Tạo Dropdown cơ bản

Dropdown menu là những menu cho phép người dung chọn các nút ,các khối đổ xuống trong thanh menu.

Ví dụ:

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.

Các loại dropdown khác

Dropdown Divider (Dropdown dạng phân cách)

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 Header

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

Ví dụ: 

Disable and Active items

Đánh dấu các phần dropdown với lớp .active  (và tạo thêm hiển thị màu xanh background color).

Để có thể (disable an item ) làm mất tính năng trên thanh dropdown menu, sử dụng lớp .disabled  (hiển thị màu light-grey ở phần chữ và không hiển thị chuyển động trên các thanh ).

Ví dụ:

Dropdown Position

         

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:

Dropdown Menu Righ

Để căn chỉnh phần the dropdown menu sang bên phải,thêm lớp .dropdown-menu-right cho các phần tử cùng với lớp .dropdown-menu.

Ví dụ:

Dropup

Nếu muốn thanh dropdown menu hiển thị theo hương lên trên thay vì xuống dưới , sử dụng thẻ