부트스트랩 도우미 클래스


이 장에서는 유용할 수 있는 부트스트랩의 일부 도우미 클래스에 대해 설명합니다.

Text

다음의 다양한 클래스는 다양한 텍스트 색상을 표시합니다. 텍스트가 링크인 경우 마우스를 그 위로 이동하면 텍스트가 어두워집니다.

ClassDescriptionInstance
.text-muted "text-muted" 텍스트 스타일 class 사용해 보세요
.text-primary "text-primary" 클래스의 텍스트 스타일 사용해 보세요
.text-success 텍스트 스타일 "text- 성공" 클래스 사용해 보세요
.text-info "text-info" 클래스의 텍스트 스타일 사용해 보세요
.text-warning "텍스트"의 텍스트 스타일 -warning" class 사용해 보세요
.text-danger "text-danger" 클래스의 텍스트 스타일 사용해 보세요

Background

아래의 다른 클래스는 서로 다릅니다. 배경 색상. 텍스트가 링크인 경우 텍스트 위로 마우스를 이동하면 어두워집니다.

ClassDescriptionExample
.bg-primary테이블 셀은 "bg-primary"를 사용합니다. " class 사용해 보세요
.bg-success 테이블 셀은 "bg-success" 클래스를 사용합니다 사용해 보세요
.bg-info 테이블 셀은 "bg-success" 클래스를 사용합니다. -info" 클래스 사용해 보세요
.bg-warning 테이블 셀은 "bg-warning" 클래스를 사용합니다 사용해 보세요
.bg-danger 테이블 셀은 "bg-danger" 수업한번 해보세요

Other

ClassDescriptionInstance
.pull-left요소가 왼쪽으로 떠있습니다 사용해 보세요
.pull-right 요소가 오른쪽으로 이동합니다. 사용해 보세요
.center-block 요소를 표시하도록 설정: 차단하고 중앙에 배치 사용해 보세요
.clearfix 플로트 지우기
.show 힘 표시할 요소 사용해 보세요
.hidden요소 숨기기 강제로사용해 보세요
.sr-only스크린 리더 이외의 기기에서 요소 숨기기사용해 보세요
.sr-only- focusable은 .sr-only 클래스와 함께 사용되어 요소에 포커스가 있을 때 표시됩니다(예: 키보드를 조작하는 사용자) 사용해 보세요
.text-hide 페이지 요소에 포함된 텍스트 콘텐츠를 배경 이미지로 바꾸세요사용해 보세요
.close닫기 버튼 표시사용해 보세요
.caret드롭다운 기능 표시사용해 보세요

추가 예제

닫기 아이콘

모달 상자와 경고 상자를 닫으려면 범용 닫기 아이콘을 사용하세요. 닫기 아이콘을 얻으려면 클래스 close를 사용하세요.

<!DOCTYPE html>
<html>
<head>
<title>부트스트랩 예 - 아이콘 닫기</title>
<link rel="stylesheet" href="http:// apps .bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery . min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></ script> ;
</head>
<body>

<p>아이콘 인스턴스 닫기
                                      < ;/button>
</p>

</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 关闭图标</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>关闭图标实例
   <button type="button" class="close" aria-hidden="true">
      ×
   </button>
</p>

</body>
</html>

인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Caret

<!DOCTYPE html>
<html>
<head>
< ;title>부트스트랩 예 - Caret</title>
<link rel="stylesheet" href="http ://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> ;
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http:// apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script>
</head>
<body>

<p>캐럿 예시
< ;span class="caret"></span>
</p>

< ;/body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 插入符</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>插入符实例
   <span class="caret"></span>
</p>

</body>
</html>

인스턴스 실행»
클릭 온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 누르세요

Quick Float

pull-left 또는 pull-right 클래스를 사용하여 요소를 각각 왼쪽이나 오른쪽으로 띄울 수 있습니다. 다음 예제에서는 이를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>부트스트랩 예 - 빠른 부동</title>
<link rel="stylesheet" href="http:// apps .bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery . min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> ;
</head>
<body>

<div class="pull-left">
왼쪽으로 빠르게 이동
</div>
<div class="pull-right"> ;
빠르게 오른쪽으로 이동
</div>


</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 快速浮动</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="pull-left">
   向左快速浮动
</div>
<div class="pull-right">
   向右快速浮动
</div>


</body>
</html>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭하세요. 온라인으로 보기 예

내비게이션 바에서 구성 요소를 정렬하려면 .navbar-left 또는 .navbar-right를 대신 사용하세요. Bootstrap 탐색 모음을 확인하세요.

콘텐츠 중심

클래스 center-block을 사용하여 요소를 중앙에 배치하세요.

<!DOCTYPE html>
<html>
<head>
<title>부트스트랩 예 - 중앙 콘텐츠 블록</title>
<link rel="stylesheet" href="http:/ / apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/ jquery .min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">< / script>
</head>
<body>

<div class="row">
<div class="center-block" style="width:200px; background-color:#ccc ; ">
이것은 중앙 블록 인스턴스입니다
</div>
</div>

</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 居中内容块</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/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>

Run Instance »

온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요.

Clear Float

요소의 float를 지워야 하는 경우 .clearfix 클래스를 사용하세요.

<!DOCTYPE html>
<html>
<head>
<title>부트스트랩 예 - Clear Float</title>
<link rel="stylesheet" href="http:// apps .bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery . min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> ;
</head>
<body>

<div class="clearfix" style="배경: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class = "pull-left" style="Background:#58D3F7;">
왼쪽으로 빠르게 이동
</div>
<div class="pull-right" style="Background: #DA81F5;"> ㅋㅋㅋ                                                                  오른쪽에 다트가 있는 경우

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요

콘텐츠 표시 및 숨기기

클래스 .show 및 .hidden을 사용하여 요소를 강제로 표시하거나 숨길 수 있습니다(스크린 리더 포함).

<!DOCTYPE html>
<html>
<head>
<title>부트스트랩 예 - 콘텐츠 표시 및 숨기기</title>
<link rel="stylesheet" href="http: / /apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1 / jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">< ; /script>
</head>
<body>

<div class="row" style="padding: 91px 100px 19px 50px;">
<div class="show" style=" 왼쪽 -margin:10px;width:300px;Background-color:#ccc;">
이것은 쇼 클래스
</div>
<div class="hidden" style="width:200px;배경의 예입니다. -color:#ccc;">
이것은 hide 클래스의 인스턴스입니다


Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

스크린 리더

클래스 .sr-only를 사용하여 스크린 리더를 제외한 모든 장치에서 요소를 숨길 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<title>부트스트랩 예 - 스크린 리더</title>
<link rel="stylesheet" href="http:/ /apps .bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery. min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">< /script> ;
</head>
<body>

<div class="row" style="padding: 91px 100px 19px 50px;">
<form class="form-inline" role= "양식 " & gt;
& lt; div class = "form-found" & gt;
& lt; label class = "sr-only" for = "email" & gt; 이메일 주소 & label & lt; UT TYPE = " email" class="form-control" placeholder="이메일 입력">
</div>
<div class="form-group">
<label class="sr-only" for=" pass">Password</label>
" <input type="password" class="form-control" placeholder="Password">
</div>
</form>
</div> ;

</body>
</html>
Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 清除浮动</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
   <div class="pull-left" style="background:#58D3F7;">
      向左快速浮动
   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮动
   </div>
</div>

</body>
</html>

인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

←
→