Bootstrap: Menu sổ xuống dạng nút

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
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 
Small button 
Extra small button 
<!-- 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.

DropupToggle Dropdown
Right dropupToggle Dropdown
<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>
» Tiếp: Nhóm input (Input groups)
« Trước: Nhóm nút (Button groups)
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!