부트스트랩 Bootstrap 3 구성요소 Glyphicons, Dropdowns
- 퍼블리셔/Bootstrap
- 2013. 9. 23. 01:00
부트스트랩 3 구성요소에서 아이콘을 표시하는 Glyphicons 와 Dropdowns 에 대해서 알아봅니다.
먼저 아이콘부터 시작합니다.
부트스트랩3는 Glyphicons 에서 제공하는 폰트를 기반으로한 아이콘을 사용하는데요. 약 180개가 있다고 합니다. 물론 라이센스는 무료입니다. 누구나 부트스트랩을 사용하면서 이 아이콘을 사용할 수 있습니다.
이미지가 너무커서 모두 캡쳐를 하지 못했습니다. 참고만 하세요.
사용방법.
부트스트랩에서는 성능상의 이유로 기본클래스와 개별클래스를 사용한다고 합니다.
무슨 말이냐 아래처럼 두개의 클래스로 항상 사용합니다.
즉 앞의 glyphicon 클래스는 아이콘의 기본 스타일을 설정합니다.
뒤의 glyphicon-search 는아이콘의 모양을 지정합니다.
예제로 버튼구룹이나, 툴바, 네비게이션등에 사용하는 버튼에 아이콘이 들어간 모양입니다.
홈페이지에 나와있는 이미지는 좀 설명이 덜된것 같아 좀더 보충합니다.
위에 나와있는 4개의 버튼은 버튼그룹입니다. 위에서 말한 아이콘의 기본스타일인 glyphicon 이란 클래스는 똑같고 모양만 다르게 두번째 클래스만 아이콘의 모양에맞게 지정한것입니다.
두번째것은 앞과는 다르게 모양은 같고, 버튼의 크기가 다른것입니다.
드롭다운은 자바스크립트 플러그인이 필요합니다. 즉 아래처럼 될려면 html,css 만 가지고는 안되고 자바스크립트가 로드되어야 한다는 말입니다. 자바스크립트는 다음에 포스팅할 예정이니 거기서 자세히 다루겠습니다.
기본 스타일은 아래와 같습니다.
옵션이 있는데요. 오른쪽으로 배치하는 .pull-right 나 .dropdown-menu 가 있습니다.
.dropdown-menu 클래스는 드롭다운에 대한 기본 스타일이 지정이 되어 있습니다.
.pull-right 클래스는 이전글에서도 말했듯 우측으로 보내는 역활만 합니다.
다른 옵션으로 .dropdown-header 클래스가 있습니다.
아래 이미지처럼 목록의 해더역활을 하는곳에 .dropdown-header 클래스를 사용하면 됩니다.
비활성 목록에는 li 에 .disabled 클래스를 사용합니다.
