Hướng dẫn sử dụng dropdown menu trong bootstrap

Dropdown menu là thuật ngữ vô cùng quen thuộc trong lập trình website, và khi bạn sử dụng bootstrap thì nó sẽ hỗ trợ một cách tốt nhất để bạn có thể tạo ra được những menu xổ xuống. Hãy cùng Blog Getbootstrap đi tìm hiểu kỹ hơn về Dropdown Menu trong Bootstrap nhé.

Tổng qua về Dropdown Menu

Đầu tiên thì bạn cần phải bao tất cả mọi thứ bên trong 1 thẻ div và được gán với class dropdown, class này giúp cho toàn bộ nội dung ở bên trong phần style đều được bootstrap hỗ trợ.

Code html ví dụ :

Dropdown

• Action
• Another action
• Something else here
• Separated link

Bạn đang đọc: Hướng dẫn sử dụng dropdown menu trong bootstrap

Trong đó :

Thẻ a : dùng để định nghĩa text Dropdown, với trường hợp khi text sẽ được gắn 1 link nào đó, ngoài ra thì bạn cũng có thể thay thế thẻ a bằng button (với trường hợp bạn không sử dụng link).

Ngoài ra thì thẻ a cũng có 2 thành phần bạn cần quan tâm đó là :

data-toggle: đây là thuộc tính riêng của bootstrap, hỗ trợ về hiệu ứng khi click vào dropdown menu.

class caret nằm trong thẻ span: đây là class sẽ tạo ra 1 icon mũi tên quay xuống khi hiển thị lên website.

Thẻ ul: là loại thẻ được định nghĩa bằng class dropdown-menu, ẩn trạng thái bình thường và nó sẽ được hiển thị khi click hay hover vào thẻ a bên trên.

Disable phần tử Menu

Nếu như bạn muốn disable một phần nào đó ở trong menu thì bạn chỉ cần thâm class disabled cho 1 thẻ li, khi đó đồng nghĩa bạn cũng sẽ không thể thao tác được với phần tử menu đó nữa.

Và để có thể ghép dropdown menu vào trong navigation của bootstrap thì bạn chỉ cần làm theo code hướng dẫn dưới đây:

code html ví dụ :

Toggle navigation




Project name

• Home
• About
• Contact
• Dropdown
  • Action
  • Another action
  • Something else here
  • Nav header
  • Separated link
  • One more separated link

Xem thêm: Truyện hentai one piece 18 chiến thắng arlong nami vs luffy

Kết quả hình ảnh :

Ỏ ví dụ trên thì Blog Getbootstrap đã sử dụng class dropdown-menu cho thẻ li thay vì thẻ div như bình thường, lý do đơn giản vì dropdown menu này sẽ được gán cho 1 phần từ menu trong 1 hệ thống menu.

Hi vọng với những chia sẻ trên về dropdown menu hay class data-toggle trong bootstrap sẽ giúp bạn có thêm kiến thức bổ ích về bootstrap nhé. Chúc các bạn thành công.