Bootstrap: Menu sổ xuống (Dropdowns)
Các menu ngữ cảnh hoặc menu đóng/mở (toggleable menu) được sử dụng để hiển thị danh sách các liên kết.Thành phần này có thể tương tác với plugin dropdown.
Các ví dụ
Hãy bọc menu sổ xuống và phần tử kích hoạt menu bằng một .dropdown, hoặc bằng một phần tử khác được thiết lập position: relative;. Rồi sau đó, bạn hãy thêm mã HTML chơ menu đó.
<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>
Căn chỉnh
Mặc định, một menu sổ xuống sẽ tự động được định vị vị trí 100% tính từ bên trên và dọc theo bên trái của phần tử cha. Hãy thêm.dropdown-menu-right vào một .dropdown-menu để căn phải menu sổ xuống.
Có thể yêu cầu thêm việc tùy biến vị trí
Các menu sổ xuống thương được định vị bằng CSS trong document. Điều này có nghĩa là menu sổ xuống có thể bị cắt bỏ bởi phần tử cha của chúng với giá trị overflow nào đó hoặc hiển thị vượt ra khỏi khung nhìn. Khi những vấn đề này xuất hãy, bạn hãy chủ động tự mình giải quyết.
Loại bỏ căn chỉnh theo .pull-right
Trong phiên bản v3.1.0, chúng ta đã loại bỏ class .pull-right trên các menu sổ xuống. Để căn phải một menu, hãy sử dụng class .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
...
</ul>
Tiêu đề
Thêm một tiêu đề cho từng phần nhỏ trong menu của bạn.
- Dropdown header
- Action
- Another action
- Something else here
- Dropdown header
- Separated link
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
</ul>
Vô hiệu hóa các phần tử của menu
Hãy thêm class .disabled vào một <li> trong menu để vô hiệu hóa liên kết đó.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<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>