English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
이 장에서는 Bootstrap에서 사용할 수 있는 유용한 보조 클래스들에 대해 논의할 것입니다。
다양한 종류의 클래스가 다른 텍스트 색상을 보여줍니다. 텍스트가 링크라면 마우스를 텍스트 위에 가져다닐 때 어둡게 됩니다：
| 클래스 | 설명 | 예제 |
|---|---|---|
| .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으로 설정하고 중앙에 표시하십시오 | 시도해 보세요 |
| .clearfix | 浮动를 제거하십시오 | 시도해 보세요 |
| .show | 요소를 강제로 표시하십시오 | 시도해 보세요 |
| .hidden | 요소를 강제로 숨기십시오 | 시도해 보세요 |
| .sr-only | 화면 읽기 기기 외에 다른 장치에서 요소를 숨기십시오 | 시도해 보세요 |
| .sr-only-focusable | 와 .sr-only 클래스를 함께 사용하여 요소가 포커스를 받았을 때 표시합니다(예: 키보드 작업 사용자) | 시도해 보세요 |
| .text-hide | 페이지 요소에 포함된 텍스트 내용을 배경 이미지로 대체하십시오 | 시도해 보세요 |
| .close | 닫기 버튼을 표시하십시오 | 시도해 보세요 |
| .caret | 드롭다운 기능을 표시하십시오 | 시도해 보세요 |
모달 창과 경고 창을 닫는 데 일반적인 닫기 아이콘을 사용합니다. class를 사용하여 close 닫기 아이콘을 얻습니다.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 닫기 아이콘</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <p> 닫기 아이콘 예제 <button type="button" class="close" aria-hidden="true">×</button> </p> </body> </html>테스트를 보려면 ‹/›
결과는 다음과 같습니다:
aria-hidden="true"는 장애인(예: 시각 장애인)이 읽기 장치(콘텐츠를 자동으로 읽고 자동으로 재생)를 사용하는 데 도움이 되며, 이 속성을 가진 콘텐츠가 재생될 때 자동으로 건너뜀하여 장애인이 혼란을 받지 않도록 합니다!
삽입기를 사용하여 드롭다운 기능 및 방향을 표시하십시오. class를 사용하여 caret 의 <span> 요소가 이 기능을 받습니다.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 삽입기</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <p> 삽입기 예제 <span class="caret"></span> </p> </body> </html>테스트를 보려면 ‹/›
결과는 다음과 같습니다:
class를 사용하여 별도로 사용할 수 있습니다 pull-left 또는 pull-right 요소를 왼쪽 또는 오른쪽으로 흐르게 만듭니다. 다음 예제가 이를 보여줍니다.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 빠른 흐름</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="pull-left"> 왼쪽으로 빠르게漂流 </div> <div class="pull-right"> 오른쪽으로 빠르게漂流 </div> </body> </html>테스트를 보려면 ‹/›
결과는 다음과 같습니다:
네비게이션 바의 요소를 정렬하려면 사용하십시오 .navbar-left 또는 .navbar-right 대신 확인하십시오 Bootstrap nawigacja paska。
class를 사용하여 center-block 요소를 중앙에 배치하십시오.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 중앙 내용 블록</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="center-block" style="width:200px;background-color:#ccc;"> 이것은 center-block 예제 </div> </div> </body> </html>테스트를 보려면 ‹/›
결과는 다음과 같습니다:
요소의 흐름을 제거하려면 사용하십시오 .clearfix class.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 浮动를 제거하는</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="clearfix" style="background: #D8D8D8;border: 1px 단단한 #000(padding: 10px;"> <div class="pull-left" style="background:#58D3F7"> 왼쪽으로 빠르게漂流 </div> <div class="pull-right" style="background: #DA81F5"> 오른쪽으로 빠르게漂流 </div> </div> </body> </html>테스트를 보려면 ‹/›
결과는 다음과 같습니다:
class를 사용하여 .show 와 .hidden 요소를 강제로 표시하거나 숨기기(스크린 레이더 포함)를 설정합니다。
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 내용을 표시하고 숨기기</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row" style="padding: 91px 100px 19px 50px;"> <div class="show" style="margin-left:10px;width:300px;background-color:#ccc;"> 이 show class의 예제입니다 </div> <div class="hidden" style="width:200px;background-color:#ccc;"> 이 hide class의 예제입니다 </div> </div> </body> </html>테스트를 보려면 ‹/›
결과는 다음과 같습니다:
class를 사용하여 .sr-only 요소를 모든 장치에서 숨기고 스크린 레이더를 제외합니다。
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 스크린 레이더</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row" style="padding: 91px 100px 19px 50px;"> <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="email">이메일 주소</label> <input type="email" class="form-control" placeholder="Enter email"> </div> <div class="form-group"> <label class="sr-only" for="pass">비밀번호</label> <input type="password" class="form-control" placeholder="Password"> </div> </form> </div> </body> </html>테스트를 보려면 ‹/›
결과는 다음과 같습니다:
여기서 두 개의 input 타입의 label 태그가 class를 가지고 있음을 볼 수 있습니다 sr-only따라서 태그는 전화기에만 보여질 것입니다.