Dropdown menu là thành phần có sẵn trong Bootstrap, rất nhanh chóng và tiện lợi khi tạo một menu dropdown.
Sau đây là cách sử dụng:
Tạo một file html cơ bản như sau:
- Thẻ <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> dùng để tạo button khi ta click thì menu đổ xuống. Thành phần này bạn có thể dùng một thành phần html khác như div, a, span nhưng phải có class là dropdown-toggle và data-toggle="dropdown"
- Ta sử dụng menu dạng list với thành phần con là <li>, với những <li> có class là dropdown-header thì nó sẻ là phần header ngân cách với các cụm menu khác.
Bây giờ, bạn lưu lại và chạy thử trên trình duyệt để xem kết quả nhé :)
Chúc các bạn thành công!
Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin
Sau đây là cách sử dụng:
Tạo một file html cơ bản như sau:
Trong code html trên, từ thẻ <div class="dropdown"> là ta đã bắt đầu khởi tạo menu dropdown.<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Dropdowns menu </h2> <p>Menu dropdown này có header ngăn cách các cụm menu khác nhau:</p> <div class="dropdown"> <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li class="dropdown-header">header 1</li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li class="divider"></li> <li class="dropdown-header">header 2</li> <li><a href="#">About Us</a></li> </ul> </div> </div> </body> </html>
- Thẻ <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> dùng để tạo button khi ta click thì menu đổ xuống. Thành phần này bạn có thể dùng một thành phần html khác như div, a, span nhưng phải có class là dropdown-toggle và data-toggle="dropdown"
- Ta sử dụng menu dạng list với thành phần con là <li>, với những <li> có class là dropdown-header thì nó sẻ là phần header ngân cách với các cụm menu khác.
Bây giờ, bạn lưu lại và chạy thử trên trình duyệt để xem kết quả nhé :)
Chúc các bạn thành công!
Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin
