[Bootstrap] Bootstrap-2/부트스트랩/Bootstrap공부/Components/Button/버튼/dropdown/드롭다운

<버튼 설정>

1. 버튼색상 변경

ex) <button class="btn btn-default">DEFAULT</button>

처럼 class를 지정하여 버튼 색깔을 변경할 수 있다.

-기본버튼 : class="btn btn-default"

-파랑색버튼 : class="btn btn-primary"

-녹색버튼 : class="btn btn-success"

-하늘색버튼 : class="btn btn-info"

-노란버튼 : class="btn btn-warning"

-빨간버튼 : class="btn btn-danger"

 

2. 버튼 크기 변경

-큰 사이즈 버튼 : class="btn-lg" / “btn-group-lg”

-작은 사이즈 버튼 : class="btn-sm" / “btn-group-sm”

-가장 작은 사이즈 버튼 : class="btn-xs" / “btn-group-xs”

 

3. 버튼 그룹 설정

-가로 그룹버튼 : class="btn-group"

-브라우저 가로 100%를 채우며 동일한 사이즈로 되는 그룹버튼 : class=” btn-group-justified"

-세로 그룹버튼 : class="btn-group-vertical"

 

4. 아이콘 버튼 생성

-버튼 아이콘 : glyphicon

-특정 버튼에 해당하는 클래스 추가 : 예시는 별 아이콘으로 glyphicon-star 를 붙임

 > 아이콘 변경은 http://getbootstrap.com/components/#dropdowns 참고

<button type="button" class="btn btn-default btn-lg">   <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button>

<드롭다운 설정>

 

1. 드롭다운 버튼 생성

-드롭다운 버튼 : data-toggle="dropdown"

-드롭다운 화살표 : class="caret"

-드롭다운 메뉴 : class="dropdown-menu"

<div class="dropdown">   <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">     Dropdown Btn <span class="caret"></span>   </button>   <ul class="dropdown-menu">     <li><a href="#">menu 1</a></li>     <li><a href="#">menu 2</a></li>     <li><a href="#">menu 3</a></li>     <li><a href="#">menu 4</a></li>   </ul> </div>

 

2. 드롭다운 화살표 구분자 넣어 합치기

-버튼을 하나 더 추가 한 뒤 그룹으로 묶는다.

<div class="dropdown btn-group">   <button class="btn btn-default" type="button">        Dropdown Btn   </button>   <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">     <span class="caret"></span>   </button>   <ul class="dropdown-menu">     <li><a href="#">menu 1</a></li>     <li><a href="#">menu 2</a></li>     <li><a href="#">menu 3</a></li>     <li><a href="#">menu 4</a></li>   </ul> </div>

 

3. 드롭메뉴 상단 출력

dropdown 이라는 class를 가진 태그에 dropup 클래스를 추가해준다.

화살표 방향도 위로 바뀌며 드롭메뉴가 상단에 출력되게 된다.

 

4. 드롭메뉴 헤더(설명) 달기 (5번 소스 참조)

ul 바로 아래 자식 ( 최상단 li ) 에 <li class="dropdown-header"> 설명내용</li> 을 추가한다.

 

5. 드롭메뉴 나누기

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider" >     <li class="dropdown-header">Dropdown header</li>     <li><a href="#">menu 1</a></li>     <li><a href="#">menu 2</a></li>     <li><a href="#">menu 3</a></li>     <li class="disabled" ><a href="#">menu 4</a></li> <li role="separator" class="divider"></li>     <li><a href="#">menu 5</a></li>     <li><a href="#">menu 6</a></li>   </ul>

 

6. 특정 드롭메뉴 선택 안되게 지정하기 (5번 소스 참조)

class="disabled" 을 li에 추가한다.