본문
아래의 클래스와 텍스트 색상을 통해 의미를 추가합니다. 호버에 어두워집니다 링크 :
| 수업 | 기술 | 예 |
|---|---|---|
| .text-muted | 클래스와 스타일 텍스트 "text-muted" | 시도 해봐 |
| .text-primary | 텍스트 클래스 스타일 "text-primary" | 시도 해봐 |
| .text-success | 텍스트 클래스와 스타일 "text-success" | 시도 해봐 |
| .text-info | 텍스트 클래스와 스타일 "text-info" | 시도 해봐 |
| .text-warning | 텍스트 클래스와 스타일 "text-warning" | 시도 해봐 |
| .text-danger | 텍스트 클래스와 스타일 "text-danger" | 시도 해봐 |
배경
아래의 클래스와 배경 - 색상을 통해 의미를 추가합니다. 링크는 텍스트 클래스와 같은 호버에 어둡게합니다 :
| 수업 | 기술 | 예 |
|---|---|---|
| .bg-primary | 표 셀은 클래스와 스타일입니다 "bg-primary" | 시도 해봐 |
| .bg-success | 표 셀은 클래스와 스타일입니다 "bg-success" | 시도 해봐 |
| .bg-info | 표 셀은 클래스와 스타일입니다 "bg-info" | 시도 해봐 |
| .bg-warning | 표 셀은 클래스와 스타일입니다 "bg-warning" | 시도 해봐 |
| .bg-danger | 표 셀은 클래스와 스타일입니다 "bg-danger" | 시도 해봐 |
다른
| 수업 | 기술 | 예 |
|---|---|---|
| .pull-left | 왼쪽에 요소를 수레 | 시도 해봐 |
| .pull-right | 오른쪽에있는 요소를 수레 | 시도 해봐 |
| .center-block | 에 요소 설정 display:block 와 margin-right:auto 및 margin-left:auto | 시도 해봐 |
| .clearfix | 수레를 지 웁니다 | 시도 해봐 |
| .show | 표시 할 요소는 강제로 | 시도 해봐 |
| .hidden | 숨길 수있는 요소는 강제로 | 시도 해봐 |
| .sr-only | 스크린 리더를 제외한 모든 장치에 요소를 숨 깁니다 | 시도 해봐 |
| .sr-only-focusable | 그것은 초점이 맞춰지면 다시 요소를 보여 .SR 전용으로 결합 (키보드 전용 사용자에 의해 예) | 시도 해봐 |
| .text-hide | 배경 이미지 요소의 텍스트 콘텐츠를 대체하는 데 도움 | 시도 해봐 |
| .close | 가까운 아이콘을 나타냅니다 | 시도 해봐 |
| .caret | 드롭 다운 기능 (dropup 메뉴에 자동으로 역 것)를 나타냅니다 | 시도 해봐 |
응답 유틸리티
이러한 클래스는 표시 및 / 또는 미디어 쿼리를 통해 장치에 의해 내용을 숨기하는 데 사용됩니다.
하나에서 콘텐츠 전환에 사용할 수있는 클래스의 조합을 사용하여 viewport 중단 점을 :
| 클래스 | 매우 작은 장치 전화 (<768px) | 소형 장치 정제 (≥768px) | 중간 장치 데스크탑 (≥992px) | 대형 장치 데스크탑 (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
현재 v3.2.0 의 .visible-*-* 클래스 3 개의 유사, 각 CSS 하나에 와서에 대한 display 속성 값 :
| 클래스의 그룹 | CSS 표시 |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
작은 (예 : sm ) 스크린, 가능한 .visible-*-* 클래스는 다음과 같습니다 .visible-sm-block , .visible-sm-inline 및 .visible-sm-inline-block .
클래스 .visible-xs , .visible-sm , .visible-md , 그리고 .visible-lg v3.2.0의로 사용되지 않습니다.
예
<h2>Example</h2>
<p>Resize this page to see how the text below
changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA
SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a
SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a
MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a
LARGE screen.</h1>결과:
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
»그것을 자신을 시도