10. 드롭다운 버튼 (Button dropdowns)
구글의 지메일에서 사용하는 아래의 드롭다운 버튼을 만들어 보겠습니다.
먼저 부트스트랩에서 기본으로 지원하는 아이콘을 배치합니다.
아이콘 배치가 완료 되었으면 드롭다운 리스트에 들어가는 메뉴들을 배치합니다. 메뉴는 li 로 구성되고 li 메뉴들은 ul로 감싸지는 구조입니다. 클래스는 dropdown-menu가 지징되어야 합니다.
전체적인 드롭다운 메뉴를 감싸는 div는 btn-group 클래스로 감싸져야 합니다. 드롭다운을 눌렀을 때 펼쳐지게 하는 a 링크는 dropdown-toggle 클래스와 data-toggle="dropdown"이 함께 지정되어야 합니다.
정상적으로 동작합니다.
여기까지 똑같이 작성했는데 정상적으로 동작하지 않는다면 jquery를 지정했는지 체크합니다.
아이콘 대신 텍스트로 좀 더 꾸밀 수 있습니다.
'Bootstrap' 카테고리의 다른 글
| 부트스트랩에서 제공하는 기본 CSS(9) - 네비게이션2 (0) | 2013.07.25 |
|---|---|
| 부트스트랩에서 제공하는 기본 CSS(8) - 네비게이션 (0) | 2013.07.24 |
| 부트스트랩에서 제공하는 기본 CSS(6) - 버튼 그룹 (0) | 2013.07.22 |
| 부트스트랩에서 제공하는 기본 CSS(5) - 수평형 폼 (0) | 2013.07.21 |
| 부트스트랩에서 제공하는 기본 CSS(4) - 폼 (0) | 2013.07.20 |
