Bootstrap 4 - Bootstrap Dropdowns
Tạo Dropdown Menu với Bootstrap
Một menu dropdown là 1 menu xổ xuống cho phép người dùng chọn 1 giá trị từ danh sách được định nghĩa trước. Chúng ta dùng lớp .dropdown để định nghĩa 1 dropdown.
Trước tiên, cần phải bao mọi thứ bên trong bằng 1 thẻ div
được gán class dropdown
, class này sẽ định nghĩa cho toàn bộ nội dung bên trong nó phần style do bootstrap hỗ trợ. Hãy xem đoạn code dưới đây:
<div class="container">
<h2>Dropdown hiepsiit.com </h2>
<p>Lớp .dropdown dùng để định 1 menu dropdown</p>
<p>Lớp .dropdown-menu để xây dựng nội dung menu.</p>
<p>Để mở dropdown, dùng 1 nút hoặc liên kết với lớp .dropdown-toggle và data-toggle="dropdown".</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Ví dụ dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Lập trình Web</a></li>
<li><a href="#">Thiết kế Web</a></li>
<li><a href="#">Tiếng Anh</a></li>
</ul>
</div>
Để mở 1 menu dropdown, chúng ta xây dựng 1 nút hoặc 1 đường link với lớp tên là .dropdown-toggle và thuộc tính data-toggle=”dropdown”.
Lớp .caret để hiển thị hình mũi tên, giúp người dùng nhận biết rằng nút này chứa dropdown. Thêm lớp .dropdown-menu class vào phần tử ul để xây dựng 1 dropdown menu.
Phân chia dropdown
Lớp .divider dùng để phân chia các liên kết trong dropdown bằng 1 đường gạch ngang.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
data-toggle="dropdown">Ví dụ dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Lập trình Web</a></li>
<li><a href="#">Thiết kế Web</a></li>
<li class="divider"></li>
<li><a href="#">Tiếng Anh</a></li>
</ul>
</div>
</div>
Phần đầu Dropdown
Lớp .dropdown-header dùng để thêm các phần đầu vào bên trong 1 dropdown menu.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
data-toggle="dropdown">Ví dụ dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Phần đầu Dropdown</li>
<li><a href="#">Lập trình Web</a></li>
<li><a href="#">Thiết kế Web</a></li>
<li><a href="#">Tiếng Anh</a></li>
</ul>
</div>
</div>
Vô hiệu hóa 1 phần tử trong dropdown
Để vô hiệu hóa 1 phần tử, chúng ta có thể dùng lớp .disabled.
<li class="disabled"><a href="#">Lập trình Web</a></li>
Vị trí dropdown
Chúng ta có thể điều chỉnh được vị trí dropdown, thêm lớp .dropdown-menu-right vào phần tử ul để tạo dropdown bên phải.
<ul class="dropdown-menu dropdown-menu-right">
Dropup
Trái ngược với dropdown, dropup là danh sách được xổ lên phía trên, chúng ta dùng lớp .dropup để định nghĩa.
Thêm thuộc tính sau vào <
div
class
=
"dropup"
>
Khả năng truy cập dropdown
Để nâng cao khả năng truy xuất với người dùng, bạn có thể dùng các thuộc tính role và aria-* khi tạo 1 menu dropdown.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
data-toggle="dropdown">Ví dụ dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li role="presentation"><a role="menuitem" href="#">Lập trình Web</a></li>
<li role="presentation"><a role="menuitem" href="#">Thiết kế Web</a></li>
<li role="presentation"><a role="menuitem" href="#">Tiếng Anh</a></li>
</ul>
</div>
</div>
Thêm Dropdowns vào Navbar
Ví dụ sau thêm Meunu Dropdows vào Navbar
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Drafts</a>
<a href="#" class="dropdown-item">Sent Items</a>
<div class="dropdown-divider"></div>
<a href="#"class="dropdown-item">Trash</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Admin</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Reports</a>
<a href="#" class="dropdown-item">Settings</a>
<div class="dropdown-divider"></div>
<a href="#"class="dropdown-item">Logout</a>
</div>
</li>
</ul>
</div>
</nav>