부트스트랩은 드롭다운 메뉴 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 id="下拉菜单">下拉菜单</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 줄의 코드를 교체하세요

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

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