FullStack Academy

Dropdown Menu trong Bootstrap 4

Chào các bạn, chúng ta lại quay trở lại với series học Bootstrap 4 và sẽ đến với các class dropdown trong bootstrap 4. Hệ thống class dropdown sẽ kết hợp với navigation để có thể làm các loại menu cao cấp và phức tạp hơn hoặc các khối dữ liệu ẩn hiện, xổ xuống trong 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.

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:



 

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 và .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

Cảm ơn các bạn đã theo dõi bài học liên quan đến dropdown, mình đã trình bày tương đối nhiều về các trường hợp sử dụng của dropdown class trong bootstrap. Hi vọng các bạn có thể áp dụng vào thực tế nhiều hơn nữa.