부트스트랩 Bootstrap 3 구성요소 Button dropdowns

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

Button dropdowns 은 버튼에 드롭다운메뉴가 추가된 형태를 말합니다. 그래서 버튼을 클릭하면 하위메뉴가 나오는 형태입니다. 이또한 제대로 작동하려면 자바스크립트(dropdown.js)가 포함되어야 합니다.


Single button dropdowns

기본적인 형태로 하나의 드롭다운이 있는 형태입니다.

아래 이미지를 보시면 버튼의 버튼의 색깔 모양은 이전에 얘기했듯 .btn-primary, .btn-success, .btn-info..... 등의 클래스만 추가하면 아래처럼 모양이 바뀝니다.

아래 이미지는 .btn-default 인 기본형태입니다.


자세히봐야할점은 버튼에 dropdown-toggle 라는 클래스가 있어야하고, data-toggle="dropdown" 이 있어야합니다.

이것이 바로 자바스크립트에서 접었다 폈다하는 기능을 합니다.


버튼의 드롭다운은 .btn-group 라는 클래스로 모두 묶여있습니다. 클릭하는 순간 .open 이라는 클래스가 추가되면서 하위메뉴가 보여지는 형태입니다. 



Split button dropdowns(분할된 드롭다운 버튼)

분할된 형태의 버튼으로 텍스트가 있과 아래(하위메뉴)를 가리키는 아이콘이 있는 형태의 버튼입니다.

텍스트를 클릭하면 하위메뉴가 펼쳐지지않고, 아래를 향하는 아이콘을 클릭해야 펼쳐지는 버튼입니다.


아래 코드는 맨 우측버튼인 Danger 버튼의 코드입니다. 단지 Action이 아니라 Danger 만 다를뿐입니다.



Sizing(크기조정)

버튼의 크기조정은 위에서도 말했듯 .btn-* 여기에 lg, sm, xs 등등이 붙으면 크기는 변합니다.

아래는 각각의 크기에 따른 코드가 나와있으니 참고가 될겁니다.



Dropup variation(드롭다운 방향 변경)

드롭다운 방향은 아래로만 향하는 것이 아니라 위로도 향하게 할 수 있습니다. 

맨 아래에 위치한 경우 위로 드롭다운이 향하게 해야하는 경우도 있지요. 그럴때 사용하면 됩니다.

위로 향하게하는 드롭다운은 .btn-group 에 .dropup 이라는 클래스만 추가해주면 됩니다.

아래 이미지를 보시죠.


 

두개의 이미지가 있습니다. 

왼쪽에는 기본 형태의 위쪽으로 향하는 드롭다운버튼입니다.

자세히 보시면 버튼의 왼쪽으로 정렬이 되어서 위로 드롭다운이 펼쳐집니다.


오른쪽에는 버튼의 오른쪽너비의 크기만큼 정렬이 되어서 위로 드롭다운이 펼쳐집니다.

이것의 차이는 ul 에 클래스에 있습니다. 

.dropdown-menu 에 .pull-right 클래스만 추가해주면 됩니다. 

그럼 <ul class="dropdown-menu pull-right"> 와 같은 형태가 바로 오른쪽의 이미지의 코드입니다. 



신고

댓글