드롭다운 메뉴 링크 목록을 표시하기 위한 전환 가능한 상황별 메뉴입니다.
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>
주로 추가
4. 비활성화된 메뉴 항목
드롭다운 메뉴의
계속해서 위의 코드를 수정하고 Something else here 줄의 코드를 교체하세요
실행 후 효과를 확인할 수 있습니다. 실제로 클릭하면 비활성화된 아이콘이 표시됩니다.
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>
자세한 내용은 부트스트랩 학습 튜토리얼
을 참조하세요.요약:
이번 글에서는 드롭다운 메뉴 관련 내용을 위주로 소개한 뒤, 버튼과 드롭다운 메뉴의 조합을 소개하는데, 꽤 많은 변화가 있었고 스타일도 마음에 드셨으면 좋겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
