Bài 19: Dropdown Menu trong Bootstrap 4

0
420

Xin chào các bạn, chúng ta lại quay trở lại với bài tiếp theo trong series học Bootstrap 4, bài trước, mình đã hướng dẫn các bạn tìm hiểu về Navigation trong Bootstrap 4, phục vụ làm Menu. Và trong bài hôm nay, chúng ta sẽ đi tìm hiểu về Dropdown trong Bootstrap để giúp các bạn có những định dạng phức tạp hơn, có thể làm các Menu nâng cao nhiều cấp hoặc các nút, các khối đổ xuống trên website.

Tạo Dropdown cơ bản

Đầu tiên, mình sẽ hướng dẫn các bạn xây dựng Menu dropdown, menu này giúp người dùng có thể lựa chọn 1 trong các giá trị từ list lựa chọn.

Cách tạo như sau:

  • Như trên, chúng ta có 1 khối div tổng sử dụng class .dropdown
  • 1 nút button để click hiển thị các lựa chọn, nút này sử dụng các class tạo nút là .btn btn-primary. Thêm vào đó, để có thể trỏ ra các sự lựa chọn, sử dụng thêm class .dropdown-toggle và thuộc tính data-toggle=”dropdown”.
  • Khối trỏ ra sử dụng class .dropdown-menu, các giá trị hiển thị ra để chọn sử dụng thẻ <a> với class .dropdown-item.

Kết quả hiển thị ví dụ:

Dropdown dạng phân cách

Sau khi đã biết cách tạo ra dạng Dropdown cơ bản, bây giờ mình sẽ hướng dẫn các bạn tạo ra dạng Dropdown phân chia các vùng, phân chia các liên kết lựa chọn bên trong bằng đường viền ngang. Để phân chia, sử dụng class .dropdown-divider, như sau:

Ví dụ:

Dropdown định nghĩa phần đầu

Sử dụng class .dropdown-header để thêm vùng đầu cho Menu dropdown, như sau:

Ví dụ:

Dropdown Position

Các bạn có thể tạo ra các dạng Dropdown trỏ sang 2 bên trái hoặc phải bằng việc sử dụng các class .dropright.dropleft, như sau:

Dropup trong Dropdown

Bình thường, các menu dropdown trỏ xuống dưới, bây giờ các bạn muốn nó hiển thị ngược lại lên trên nút button, thì sử dụng class .dropup cho div lớn, như sau:

Kết luận

Như vậy, mình đã giới thiệu cho các bạn kha khá những kiểu Dropdown hay gặp nhất, ngoài ra còn 1 số kiểu nữa nhưng ít dùng nên mình cũng không liệt kê hết làm các bạn rối khi học. Những gì đã liệt kê là hoàn toàn đủ dùng rồi, còn nếu muốn tìm hiểu hết thì các bạn có thể lên trang chủ Bootstrap để xem full tất cả lý thuyết về Dropdown nhé.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây