부트스트랩은 드롭다운 메뉴 effect_javascript 기술을 구현합니다.

드롭다운 메뉴 링크 목록을 표시하기 위한 전환 가능한 상황별 메뉴입니다.

1. 사례

드롭다운 메뉴 트리거와 드롭다운 메뉴를 .dropdown으로 묶은 다음 메뉴를 구성하는 HTML 코드를 추가합니다.

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  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" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

위 코드를 보면 익숙하지 않은 스타일 클래스나 속성이 많이 있을 수 있다는 것을 알 수 있습니다.

오른쪽에 있는 드롭다운 버튼과 작은 아이콘 캐럿입니다. 물론 이 작은 아이콘과 버튼의 텍스트는 같은 수준입니다.

먼저 버튼 버튼에 드롭다운 토글이 있고, 이 속성을 기반으로 드롭다운 목록이 나타나는지 확인하세요.

ul 태그 바로 다음의 드롭다운 메뉴는 위 버튼 버튼의 스타일 클래스 드롭다운 토글과 함께 사용해야 하며 위 버튼 버튼은 aria-labelledby에 바인딩되어 있습니다.

네 번째 li 태그에는 구분선이 있는데 실제로는 선을 구분하는 스타일 클래스입니다.

이건 아마도 제가 이해한 내용일 것이고, 제 이해는 확실히 맞지 않습니다.

2. 정렬 옵션

텍스트를 오른쪽 정렬하려면 드롭다운 메뉴 .dropdown-menu에 .text-right를 추가하세요.

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" 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" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

위 코드의 ul 태그에 text-right 스타일 클래스를 추가하기만 하면 됩니다.

3. 제목

제목을 추가하면 드롭다운 메뉴에서 작업 그룹을 식별할 수 있습니다.

 <h1>下拉菜单</h1>
  <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <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" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

주로 추가

드롭다운 헤더

그 안에 .dropdown-header 스타일 클래스가 있습니다.

4. 비활성화된 메뉴 항목

드롭다운 메뉴의

에 .disabled 링크를 추가하세요.

계속해서 위의 코드를 수정하고 Something else here 줄의 코드를 교체하세요

코드 복사 코드는 다음과 같습니다.

여기에 다른 항목이 있습니다

가장 중요한 것은 li 태그에 .disabled 스타일 클래스를 추가하는 것입니다.

실행 후 효과를 확인할 수 있습니다. 실제로 클릭하면 비활성화된 아이콘이 표시됩니다.

5. 기본 케이스

1) 버튼 드롭다운 메뉴
.btn-group에 버튼을 배치하고 올바른 메뉴 태그를 추가하여 드롭다운 메뉴 트리거를 만들 수 있습니다.

단일 버튼 드롭다운 메뉴

몇 가지 기본 마크업을 변경하여 버튼을 드롭다운 메뉴 스위치로 바꾸세요.

<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 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>

분할 버튼 드롭다운 메뉴

마찬가지로 분할 버튼 드롭다운에는 동일한 변경 마크업이 필요하지만 별도의 버튼이 필요합니다.

<div class="btn-group">
   <button type="button" class="btn btn-danger">Action</button>
   <div class="dropdown">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <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>
  </div

작은 아이콘을 클릭해야만 메뉴를 표시할 수 있습니다.

2), 사이즈

드롭다운 메뉴 버튼은 모든 버튼 크기에서 작동합니다.

<div class="btn-group">
 <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
 Large button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
 Small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
 Extra small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

스타일 클래스 .btn-lg, .btn-sm, .btn-xs를 통해 버튼 크기를 제어합니다.

3) 팝업메뉴

요소 위에 트리거된 드롭다운 메뉴를 만들려면 상위 요소에 .dropup을 추가하세요.

<div class="btn-group dropup">
 <button type="button" class="btn btn-default">Dropup</button>
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>
 </button>
 <ul class="dropdown-menu">
 <!-- Dropdown menu links -->
 </ul>
</div>

자세한 내용은 부트스트랩 학습 튜토리얼

을 참조하세요.

요약:

이번 글에서는 드롭다운 메뉴 관련 내용을 위주로 소개한 뒤, 버튼과 드롭다운 메뉴의 조합을 소개하는데, 꽤 많은 변화가 있었고 스타일도 마음에 드셨으면 좋겠습니다.