[BS] Dropdown & Buttons

링크들의 목록을 보여주기 위한 토글 가능한 메뉴 만들기

 

dropdown 의 트리거와 메뉴를 .dropdown으로 둘러싼다.

드롭다운 메뉴는 부모에 .dropup을 추가하는 것으로 바뀌는 것이 가능합니다.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

- 정렬 

드롭 다운 메뉴는 자동적으로 최상단에 위치한다. 우측 정렬하려면 .dropdown-menu에 .dropdown-menu-right 를 추가하면 된다.

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

 

 

 

 

- 제목 (Header)

드롭다운 메뉴의 액션 그룹에 라벨을 붙이려면 헤더를 추가하라

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  ...
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
</ul>

 

 

 

 

 

- 구분선 (Divider)

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="presentation" class="divider"></li>
  ...
</ul>

 

- 비활성화된 메뉴 항목

링크를 비활성화하려면 드롭다운의 <li>에 .disabled를 추가

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>

 

 

 

 

 

 

Button Groups

일련의 버튼들을 그룹으로 같이 한줄에 모든다, 라디오와 체크박스처럼 사용할 수 있다.

버튼 그룹안의 툴팁 & 팝오버 특별한 설정이 필요합니다

.btn-group 요소에 툴팁이나 팝오버를 사용할 때, 당신은 원치않는 부작용(요소가 넓어진다거나 모서리가 없어진다거나)을 피하기 위해 옵션 container: 'body' 을 명시해야 할 것입니다.

정확한 role 을 부여하고 라벨을 제공하세요

보조 공학을 위해 그룹화된 일련의 버튼들을 전달하기 위해서, 적절한 role 속성이 제공되어져야 합니다. 버튼 그룹을 위해, 이것은 role="group" 이 될 수 있습니다. 툴바는 role="toolbar" 을 가져야 합니다.

한가지 예외는 하나의 콘트롤 밖에 없는 그룹이나 드롭다운입니다.  

게다, 대부분의 보조 공학은 올바른 role 속성이 존재함에도 불구하고, 그룹과 툴바는 명확하게 라벨이 주어져야 합니다. 여기에 제공된 예제에서, 우리는 aria-label 을 사용했습니다만 aria-labelledby 같은 대안도 사용될 수 있습니다

 

 

 

1) 기본 예제

.btn으로 일련된 버튼들을 .btn-group으로 감싸라

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

- 버튼 툴바(Button Toolbar)

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

 

 

- 크기 조절

그룹 내 모든 버튼에 일일이 크기 조절 클래스를 적용하는 대신, .btn-group에 .btn-group-*을 추가한다.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

 

 

 

- 중첩하기

버튼들과 같이 있는 드롭다운 메뉴를 원할 때는 .btn-group안에 다른 .btn-group을 넣으면 된다.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

 

 

 

 

- 수직형(vertical)

버튼 그룹들이 수직으로 쌓인다. 분리된 버튼 드롭다운은 지원되지 않는다.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

 

 

 

 

 

 

양쪽정렬된 버튼을 위해 사용된 특정 HTML 과 CSS 로 인해 (말하자면, display: table-cell),
그들사이의 모서리는 두배입니다. 보통 버튼 그룹에서는, 그들을 없애기 위해
margin-left: -1px 를 사용됩니다.
하지만 margin은 display: table-cell와 같이 작동하지 않습니다. 결과적으로, 부트스트랩을 맞춤화하여, 모서리를 제거하거나 색을 적용하는 것을 원할 수 있습니다.

 

 

 

Button Dropdown

:  .btn-group 안에 두고 적절한 메뉴 마크업을 해준다.

 

- 단버튼 드롭다운 : 몇가지 기본 마크업을 변경하여서 버튼 드롭다운 을 토글로 바꾼다.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

 

 

- 복합된 버튼 드롭다운 

똑같은 마크업에 분리된 버튼만 추가하여 분할된 버튼 드롭다운을 만든다.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>