Contextual Text Color (맥락글자색)
<p class="text-muted">회색</p>
<p class="text-primary">파란색</p>
<p class="text-success">녹색</p>
<p class="text-info">청녹색</p>
<p class="text-warning">고동색</p>
<p class="text-danger">빨간색</p>
※ 일반텍스트 및 링크에 사용 가능. 링크 마우스허버 시 좀 더 짙어짐.
※ 다른 앵커 선택자로 인해 적용 안 될 때, 텍스트를 <span> 태그로 감싼 후 클래스 적용.
※ 스크린리더 같은 보조기기 사용자에겐 색정보 정달 안됨. 텍스트 이용해 별도 표시 필요.
※ .sr-only 클래스 적용해 스크린리더 사용자를 위한 색깔 텍스트 정보를 가리는 것도 가능.
Contextual Background Color (맥락배경색)
<p class="bg-primary">파란색배경</p>
<p class="bg-success">연녹색배경</p>
<p class="bg-info">연청녹배경</p>
<p class="bg-warning">아이보리배경</p>
<p class="bg-danger">연보라배경</p>
※ 일반텍스트 및 링크에 사용 가능. 링크 마우스허버 시 좀 더 짙어짐.
※ 다른 앵커 선택자로 인해 적용 안 될 때, 텍스트를 <div> 태그로 감싼 후 클래스 적용.
※ 스크린리더 같은 보조기기 사용자에겐 색정보 정달 안됨. 텍스트 이용해 별도 표시 필요.
※ .sr-only 클래스 적용해 스크린리더 사용자를 위한 색깔 텍스트 정보를 가리는 것도 가능.
Close Icon (닫기아이콘) = Close Button (닫기버튼)
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
Caret (카렛 = 드롭다운화살표기호・드롭업화살표기호)
<span class="caret"></span>
※ 드롭다운(아래쪽화살표)・드롭업메뉴(위쪽화살표)
Float (띄우기 = 정렬 = 왼쪽정렬・오른쪽정렬)
<div class="pull-left">왼쪽에 띄우기 float: left !important;</div>
<div class="pull-right">오른쪽에 띄우기 float: right !important;</div>
※ 요소 자체를 왼쪽이나 오른쪽에 배치할 때 사용.
※ 해당 클래스는 믹스인으로 사용 가능.
※ Naviagation bar에선 사용 금지. 대신, .navbar-left , .navbar-right 클래스 사용.
블럭요소 중앙정렬
<div class="center-block">...</div>
※ .center-block 클래스는 믹스인으로 사용가능.
Clearfix 클리어픽스 (= float 해제)
<div class="clearfix">Nicolas Gallagher가 개발한 the micro clearfix 사용.</div>
※ .clearfix 클래스는 믹스인으로 사용 가능.
Show・Hide (블럭요소 보이기・숨기기)
<div class="show">요소 보이기</div>
<div class="hidden">요소 숨기기 + 자리 차지 X</div>
<div class="invisible">요소 숨기기 + 자리 차지 O</div>
※ .show 요소는 블록레벨에만 사용 가능. (∵ display:block !important)
※ .show , .hidden 클래스는 믹스인으로 사용 가능.
※ .hide 클래스 사용금지. (즉, 스크린리더에서 효과 없는데다가, BS 3.01부터 폐기예고됨. )
※ .hide 클래스 대신에 (.hidden 또는, .sr-only) 클래스 사용.
※ .invisible 클래스 : 자리는 차지하면서 보이지만 않게 할 때 사용.
Screen Reader (스크린리더)
<a class="sr-only sr-only-focusable" href="#content">스크린리더에게만 노출</a>
// mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}
※ .sr-only 클래스 단독 : 스크린리더 제외한 모든 기기에서 요소 숨기기.
※ .sr-only-focusable 클래스 추가 : focus 상태일 땐, 요소 보이게 하기.
※ .sr-only 와 .sr-only-focusable 클래스는 믹스인으로 사용 가능.
Text 숨기기 (= 이미지대체)
<h1 class="text-hide">텍스트내용을 숨기고, 배경이미지로 내용 대체.</h1>
※ .text-hide 클래스는 믹스인으로 사용 가능.
CSS
// Class
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// mixin
.element {
.pull-left();
}
.another-element {
.pull-right();
}
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// mixin
.element {
.center-block();
}
// Mixin 자체
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// mixin으로 사용
.element {
.clearfix();
}
// Class
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
visibility: hidden;
}
// mixin
.element {
.show();
}
.another-element {
.hidden();
}
// mixin
.heading {
.text-hide();
}
