Tạo các Menu đổ xuống DropDown trong Bootstrap

Dropdown cơ bản

Để tạo ra một DropDown menu trình bày HTML theo cấu trúc sau:

• Một phần tử chứa .dropdown bên trong chứa 2 thành phần phía sau
• Phần tử con để bấm vào: phần tử này thiết lập thuộc tính data-toggle="dropdown", thường tạo ra nút bấm cho phần tử này, nếu muốn có thêm biểu tượng mũi tên đổ xuống thêm vào .dropdown-toggle, thường tạo ra các nút bấm cho phần tử này
• Phần tử .dropdown-menu bên trong chứa các phần tử con .dropdown-item, nếu tạo đường kẻ thì cho thêm phần tử .dropdown-divider, các phần tử con kích hoạt cho thêm .active, không hoạt động cho thêm .disabled. Ngoài ra có thể cho thêm các loại phần tử con bất kỳ với các lớp đã biết của Bootstrap
• Nếu muốn căn thẳng cảnh phải với phần tử bấm thì .dropdown-menu cho thêm . dropdown-menu-right

Ví dụ

<div class="dropdown ">
    <div class="dropdown-toggle text-danger"  data-toggle="dropdown">
        <strong>Dropdown Menu</strong>
    </div>
    <div class="dropdown-menu" >
        <a class="dropdown-item" href="#">Menu 1</a>
        <a class="dropdown-item" href="#">Menu item 2</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Menu 3 ...</a>
    </div>
</div>

Tạo Split button

Thay vì sử dụng phần tử .dropdown có thể chuyển sang sử dụng phần tử .btn-group (Xem phần Nút bấm) để tạo ra loại Nút bấm chia làm 2 phần, phần mũi tên bấm vào đổ xuống một Menu .dropdown-menu. Ngoài ra phần nút bấm để đổ menu cho thêm lớp .dropdown-toggle-split

<div class="btn-group">

    <a class="btn btn-danger" href="#">Split Button</a>
    
    <div class="btn btn-success dropdown-toggle dropdown-toggle-split"  data-toggle="dropdown"></div>

    <div class="dropdown-menu" >
        <a class="dropdown-item" href="#">Menu 1</a>
        <a class="dropdown-item" href="#">Menu item 2</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Menu 3 ...</a>
    </div>
</div>

Để tạo ra mũi tên hướng lên, và Menu xuất hiện phía trên Nút bấm thì ở phần tử gốc cho thêm .dropup. Ngoài ra còn có .dropleft, .dropright

<div class="btn-group dropup">
   <!--Thành phần khác như trên-->
</div>