Trong bài này, chúng ta sẽ học các lớp để trang trí cho các dropdown trong Bootstrap. Đây là phần giúp bạn trang trí cho menu dropdown của bạn thêm sinh động hơn.
Dropdown cơ bản:
Menu thả xuống là một menu có thể chuyển đổi cho phép người dùng chọn một giá trị từ danh sách được xác định trước:
Ví dụ :
<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div>
Giải thích ví dụ
- Lớp .dropdown chỉ ra một menu thả xuống.
- Để mở menu thả xuống, hãy sử dụng nút hoặc liên kết có lớp .dropdown-toggle và thuộc tính data-toggle = "dropdown".
- Lớp .caret tạo ra một biểu tượng mũi tên dấu mũ (), biểu tượng này cho biết rằng nút là một trình đơn thả xuống.
- Thêm lớp .dropdown-menu vào phần tử <ul> để thực sự tạo menu thả xuống.
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="#">Bóng Đá</a></li> <li><a href="#">Thời sự</a></li> <li class="divider"></li> <li><a href="#">Thời tiết</a></li> </ul> </div> </div>
Kết quả :
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="#">Ăn gì hôm nay</a></li> <li><a href="#">Món ngon mỗi ngày</a></li> <li><a href="#">Ăn hàng</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ử trong dropdown, 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 thì dropup là danh sách được xổ lên phía trên, chúng ta dùng lớp .dropup để định nghĩa danh sách xổ lên này.
<div class="dropup">
Ví dụ
<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Bóng Đá</a></li> <li><a href="#">Tin tức</a></li> <li><a href="#">Xã hội</a></li> <li class="divider"></li> <li><a href="#">Lối sống</a></li> </ul> </div>
Kết quả:
Khả năng truy cập dropdown
Để nâng cao khả năng truy xuất với người dùng, chúng ta 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 - HocTV <span class="caret"></span></button> <ul class="dropdown-menu"> <li role="presentation"><a role="menuitem" href="#">Bóng Đá</a></li> <li role="presentation"><a role="menuitem" href="#">Tin tức</a></li> <li role="presentation"><a role="menuitem" href="#">Thời tiết</a></li> </ul> </div> </div>
Lời kết:
Trên đây là toàn bộ hướng dẫn về về các lớp trong Bootstrap để biểu diễn các dropdown. Phần nào chưa hiểu các bạn có thể comment ngay dưới bài viết này chúng mình sẽ giải đáp sớm nhất có thể nhé. Chúc các bạn học tốt!
