부트스트랩 Bootstrap 3 구성요소 Labels,Badges

게시자: 대문 demun 카테고리: 퍼블리셔/Bootstrap 2013.10.02 01:00

라벨과 벳지.

여기서 라벨 label 은 input 에 사용되는 그 라벨이 아닙니다.

텍스트상에서 어는 한 부분을 강조하거나 다르게 보이게 위한 스타일을 입힌 부분입니다.

벳지도 마찬가지 입니다.



Labels


먼저 기본 스타일입니다. 

참고할 점은 아래의 라벨 크기는 라벨에 크기를 설정한것이 아니라 텍스틀에 크기를 설정한 것입니다. 

즉 첫번째것은 <h1>.....<span class="label label-default">..</span></h1> 입니다.




라벨은 다른곳과 마찬기자로 클래스가 두개로 만들어집니다.

.label 클래스는 라벨의 기본 스타일을 지정하고 뒤에 이어지는 .label-* 는 그 상태,모양을 나타냅니다.






Badges

뱃지는 읽었거나 읽지 않았거나 할때 자주 사용합니다. 아래처럼 받은 편지함의 42개의 메일이 왔다는 형식으로 사용합니다.
.badge 라는 클래스를 사용합니다.


Self collapsing (자동축소??) - 이 이야기는 뭐냐면  badge 클래스로 감싼 내용이 내용물이 없을때 자동으로 크기를 축소해야하는것에 대한 이야기를 하는 겁니다.

즉 내용물이 없으면 자동으로 내용을 축소하지는 않습니다.

크로스 브라우징을 위해 내용이 없을때는 :empth 클래스를 사용하여 화면에 보이지 않게 처리한다는 이야기 입니다.



Adapts to active nav states

뱃지는 활성화 되었을때는 반전해서 색상을 표시한다는 말입니다.

아래 이미지를 보시면 첫번째 Home 42를 보면 li 에 클래스가 active 가 들어가 있습니다. 

그럼 아래처럼 파랑색으로 활성화된 모습으로 보이겠죠. 그 안에 badge 는 원래는 회색이지만 그 안에 있을때는 저렇게 흰색으로 보인다는 말입니다.



즉 활성화와 비활성화 되었을때 미리 스타일을 지정해놨다는 말입니다.


위 이미지에서의 코드는 두번째에 해당하는 이미지의 코드를 나타낸 것입니다.

자세히 보시면 우측으로 뱃지가 우측으로 붙은것을 알 수 있습니다. 이것은 pull-right  라는 클래스를 추가적으로 부여했기 때문입니다.




신고

댓글