Bootstrap 4 - Bootstrap Dropdowns

 Tạo Dropdown Menu với Bootstrap

Một menu dropdown là 1 menu xổ xuống cho phép người dùng chọn 1 giá trị từ danh sách được định nghĩa trước. Chúng ta dùng lớp .dropdown để định nghĩa 1 dropdown.

Trước tiên, cần phải bao mọi thứ bên trong bằng 1 thẻ div được gán class dropdown, class này sẽ định nghĩa cho toàn bộ nội dung bên trong nó phần style do bootstrap hỗ trợ. Hãy xem đoạn code dưới đây:

<div class="container">
    <h2>Dropdown  hiepsiit.com </h2>
    <p>Lớp .dropdown dùng để định 1 menu dropdown</p>
    <p>Lớp .dropdown-menu để xây dựng nội dung menu.</p>
    <p>Để mở dropdown, dùng 1 nút hoặc liên kết với lớp .dropdown-toggle và data-toggle="dropdown".</p>
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Ví dụ dropdown
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Lập trình Web</a></li>
            <li><a href="#">Thiết kế Web</a></li>
            <li><a href="#">Tiếng Anh</a></li>
    </ul>
  </div>

Xem ví dụ

Để mở 1 menu dropdown, chúng ta xây dựng 1 nút hoặc 1 đường link với lớp tên là .dropdown-toggle và thuộc tính data-toggle=”dropdown”.

Lớp .caret để hiển thị hình mũi tên, giúp người dùng nhận biết rằng nút này chứa dropdown. Thêm lớp .dropdown-menu class vào phần tử ul để xây dựng 1 dropdown menu.


Phân chia dropdown

Lớp .divider dùng để phân chia các liên kết trong dropdown bằng 1 đường gạch ngang.

<div class="container">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button"
        data-toggle="dropdown">Ví dụ dropdown
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Lập trình Web</a></li>
            <li><a href="#">Thiết kế Web</a></li>
            <li class="divider"></li>
            <li><a href="#">Tiếng Anh</a></li>
        </ul>
    </div>
</div>

Xem ví dụ


Phần đầu Dropdown

Lớp .dropdown-header dùng để thêm các phần đầu vào bên trong 1 dropdown menu.

<div class="container">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button"
        data-toggle="dropdown">Ví dụ dropdown
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">Phần đầu Dropdown</li>
            <li><a href="#">Lập trình Web</a></li>
            <li><a href="#">Thiết kế Web</a></li>
            <li><a href="#">Tiếng Anh</a></li>
        </ul>
    </div>
</div>

Xem ví dụ


Vô hiệu hóa 1 phần tử trong dropdown
Để vô hiệu hóa 1 phần tử, chúng ta có thể dùng lớp .disabled.

<li class="disabled"><a href="#">Lập trình Web</a></li>

Vị trí dropdown
Chúng ta có thể điều chỉnh được vị trí dropdown, thêm lớp .dropdown-menu-right vào phần tử ul để tạo dropdown bên phải.

<ul class="dropdown-menu dropdown-menu-right">

Dropup
Trái ngược với dropdown, dropup là danh sách được xổ lên phía trên, chúng ta dùng lớp .dropup để định nghĩa.

Thêm thuộc tính sau vào <div class="dropup">

Khả năng truy cập dropdown
Để nâng cao khả năng truy xuất với người dùng, bạn có thể dùng các thuộc tính role và aria-* khi tạo 1 menu dropdown.

<div class="container">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button"
        data-toggle="dropdown">Ví dụ dropdown
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li role="presentation"><a role="menuitem" href="#">Lập trình Web</a></li>
            <li role="presentation"><a role="menuitem" href="#">Thiết kế Web</a></li>
            <li role="presentation"><a role="menuitem" href="#">Tiếng Anh</a></li>
        </ul>
    </div>
</div>

Xem ví dụ


Thêm Dropdowns vào Navbar

Ví dụ sau thêm Meunu Dropdows vào Navbar

 <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a href="#" class="navbar-brand">Brand</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Profile</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">Inbox</a>
                        <a href="#" class="dropdown-item">Drafts</a>
                        <a href="#" class="dropdown-item">Sent Items</a>
                        <div class="dropdown-divider"></div>
                        <a href="#"class="dropdown-item">Trash</a>
                    </div>
                </li>
            </ul>
            <ul class="nav navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Admin</a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Reports</a>
                        <a href="#" class="dropdown-item">Settings</a>
                        <div class="dropdown-divider"></div>
                        <a href="#"class="dropdown-item">Logout</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

Xem ví dụ