부트스트랩에서 제공하는 기본 CSS(7) - 드롭다운

10. 드롭다운 버튼 (Button dropdowns)

구글의 지메일에서 사용하는 아래의 드롭다운 버튼을 만들어 보겠습니다.

먼저 부트스트랩에서 기본으로 지원하는 아이콘을 배치합니다. 

아이콘 배치가 완료 되었으면 드롭다운 리스트에 들어가는 메뉴들을 배치합니다. 메뉴는 li 로 구성되고 li 메뉴들은 ul로 감싸지는 구조입니다. 클래스는 dropdown-menu가 지징되어야 합니다.

전체적인 드롭다운 메뉴를 감싸는 div는 btn-group 클래스로 감싸져야 합니다. 드롭다운을 눌렀을 때 펼쳐지게 하는 a 링크는 dropdown-toggle 클래스와 data-toggle="dropdown"이 함께 지정되어야 합니다. 

정상적으로 동작합니다.

여기까지 똑같이 작성했는데 정상적으로 동작하지 않는다면 jquery를 지정했는지 체크합니다.

아이콘 대신 텍스트로 좀 더 꾸밀 수 있습니다.