Bài 3 - Tạo Dropdown Menu với Bootstrap
- Báo cáo
Bài đăng này đã không được cập nhật trong 4 năm
Thuật ngữ dropdown menu đã trở nên quá quen thuộc trong mỗi người của chúng ta, và với bootstrap nó cũng được hỗ trợ một cách tốt nhất để người dùng dễ dàng tạo ra các dạng menu xổ xuống một cách nhanh chóng và dễ dàng. Hôm nay, chúng ta tiếp tục tìm hiểu về cách tạo Dropdown menu với Bootstrap như thế nào.
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:
Dropdown
- Action
- Another action
- Something else here
- Separated link
Bây giờ, chúng ta hãy đi phân tích từng thành phần được bao bởi thẻ div
được gán class dropdown
.
Đầu tiên là thẻ a
. Ở đây, các bạn thấy tôi sử dụng thẻ a
để định nghĩa text Dropdown. Trường hợp này là khi text này được gàn 1 link nào đó. Tuy nhiên, các bạn có thể thay thể thẻ a
bằng button
đều được [trường hợp khi không sử dụng link].
Trong thẻ a
có 2 thành phần cần lưu ý.
data-toggle
là thuộc tính riêng của bootstrap. Thuộc tính này hỗ trợ chúng ta về hiệu ứng khi click vào dropdown menu.- Class
caret
nằm trong thẻspan
. Class này sẽ tạo ra 1 icon mũi tên quay xuống khi hiển thị lên website.
Phần thứ 2 là phần được bao bọc bên trong thẻ ul
và được định nghĩa bằng class dropdown-menu
. Phần này được ẩn đi ở trạng thái bình thường và nó được hiển thị khi click hoặc hover vào thẻ a
bên trên.