Bootstrap: Menu sổ xuống dạng nút
Giải phóng thời gian, khai phóng năng lực
Bạn có thể sử dụng bất kỳ phần tử nào làm phần tử kích hoạt bằng cách đặt nó nẳm bên trong .btn-group
và thêm markup cho menu cho phù hợp.
Tính phụ thuộc của plugin
Các menu sổ xuống dạng nút yêu cầu plugin sổ xuống phải được tích hợp sẵn trong phiên bản Bootstrap mà bạn sử dụng.
Các menu dạng nút đơn lẻ
Biến một nút bất kỳ thành một menu sổ xuống bằng một số thay đổi cơ bản của markup.
Default
Primary
Success
Info
Warning
Danger
<!-- Single button -->
<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>
Menu sổ xuống dạng nút có phân chia
Tương tự trường hợp trên, bạn có thể tạo ra các menu sổ xuống có phân chia bằng việc thay đổi chỉ một chút markup, chỉ áp dụng với nút dạng phân chia.
DefaultToggle Dropdown
PrimaryToggle Dropdown
SuccessToggle Dropdown
InfoToggle Dropdown
WarningToggle Dropdown
DangerToggle Dropdown
<!-- 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">
<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>
Kích thước
Các menu sổ xuống dạng nút có thể hoạt động với mọi kích thước của nút.
<!-- Large button group -->
<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>
Menu sổ lên
Để kích hoạt menu sổ lên, bạn hãy thêm class .dropup
vào phần tử cha.
<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>
Giải phóng thời gian, khai phóng năng lực