부트스트랩 CSS 도우미 클래스 참조
텍스트
아래 클래스와 함께 텍스트 색상을 통해 의미를 추가하세요. 마우스를 가져가면 링크가 어두워집니다.
| Class | Description | Example |
|---|---|---|
| .text-muted | Text styled with class "text-muted" | |
| .text-primary | Text styled with class "text-primary" | |
| .text-success | Text styled with class "text-success" | |
| .text-info | Text styled with class "text-info" | |
| .text-warning | Text styled with class "text-warning" | |
| .text-danger | Text styled with class "text-danger" |
배경
아래 클래스와 함께 배경색을 통해 의미를 더하세요. 링크는 텍스트 클래스처럼 마우스를 가져가면 어두워집니다.
| Class | Description | Example |
|---|---|---|
| .bg-primary | Table cell is styled with class "bg-primary" | |
| .bg-success | Table cell is styled with class "bg-success" | |
| .bg-info | Table cell is styled with class "bg-info" | |
| .bg-warning | Table cell is styled with class "bg-warning" | |
| .bg-danger | Table cell is styled with class "bg-danger" |
다른
| Class | Description | Example |
|---|---|---|
| .pull-left | Floats an element to the left | |
| .pull-right | Floats an element to the right | |
| .center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | |
| .clearfix | Clears floats | |
| .show | Forces an element to be shown (display:block) | |
| .hidden | Forces an element to be hidden (display:none) | |
| .invisible | Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible | |
| .sr-only | Hides an element to all devices except screen readers | |
| .sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | |
| .text-hide | Helps replace an element's text content with a background image | |
| .close | Indicates a close icon | |
| .caret | Indicates dropdown functionality (will reverse automatically in dropup menus) |
반응형 유틸리티
이 클래스는 미디어 쿼리를 통해 장치별로 콘텐츠를 표시하거나 숨기는 데 사용됩니다.
뷰포트 중단점에서 콘텐츠를 전환하는 데 사용 가능한 클래스 중 하나 또는 조합을 사용합니다.
| 클래스 | 초소형 기기 전화(<768px) | 소형 장치 태블릿(≥768px) | 중형 장치 데스크탑(≥992px) | 대형 장치 데스크탑(≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | 보이는 | 숨겨진 | 숨겨진 | 숨겨진 |
| .visible-sm-* | 숨겨진 | 보이는 | 숨겨진 | 숨겨진 |
| .visible-md-* | 숨겨진 | 숨겨진 | 보이는 | 숨겨진 |
| .visible-lg-* | 숨겨진 | 숨겨진 | 숨겨진 | 보이는 |
| .hidden-xs | 숨겨진 | 보이는 | 보이는 | 보이는 |
| .hidden-sm | 보이는 | 숨겨진 | 보이는 | 보이는 |
| .hidden-md | 보이는 | 보이는 | 숨겨진 | 보이는 |
| .hidden-lg | 보이는 | 보이는 | 보이는 | 숨겨진 |
숨겨진
화면 크기에 따라 요소 숨기기:
예시
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
<h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
<h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1>
<h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>
결과:
Example
Resize this page to see how the text below changes:
This text is hidden on an EXTRA SMALL screen.
This text is hidden on a SMALL screen.
This is text hidden on a MEDIUM screen.
This is text hidden on a LARGE screen.
v3.2.0부터 에 대한 .visible-*-*클래스는 각 CSS display
속성 값에 대해 하나씩 세 가지 변형으로 제공됩니다.
| 수업 그룹 | CSS 표시 |
|---|---|
| 보이는-*-블록 | 디스플레이: 블록; |
| .visible-*-인라인 | 디스플레이: 인라인; |
| .visible-*-인라인 블록 | 디스플레이: 인라인 블록; |
예를 들어 작은( sm) 화면의 경우 사용 가능한 .visible-*-*클래스는 .visible-sm-block, .visible-sm-inline및 .visible-sm-inline-block입니다.
.visible-xs, .visible-sm, .visible-md및 클래스 는 v3.2.0.visible-lg 부터 더 이상 사용 되지 않습니다 .
예시
<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: