Bootstrap - Dropdowns: A Beginner's Guide

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của Bootstrap dropdowns. Như một người giáo viên máy tính gần gũi, tôi rất vui được hướng dẫn các bạn trong hành trình này. Đừng lo lắng nếu bạn chưa từng viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ đầu và dần dần xây dựng. Nên, hãy lấy một cốc cà phê (hoặc trà, nếu bạn thích), và chúng ta cùng bắt đầu!

What are Dropdowns?

Trước khi chúng ta nhảy vào mã, hãy nói về dropdowns là gì. Hãy tưởng tượng bạn đang ở một nhà hàng, và người phục vụ đưa cho bạn một thực đơn. Thực đơn đó giống như một dropdown - nó cung cấp cho bạn một danh sách các lựa chọn để chọn. Trong thiết kế web, dropdowns hoạt động tương tự. Chúng là những cách gọn gàng để trình bày nhiều lựa chọn cho người dùng mà không làm rối loạn trang web của bạn.

Basic Dropdown

Hãy bắt đầu với dropdown đơn giản nhất. Đây là cách nó trông trong Bootstrap:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Hãy phân tích này:

1. Chúng ta bắt đầu với một <div> có lớp dropdown. Đây là容器 của chúng ta.
2. Bên trong, chúng ta có một <button> kích hoạt dropdown. Lưu ý lớp dropdown-toggle và thuộc tính data-bs-toggle="dropdown".
3. <ul> với lớp dropdown-menu là nội dung thực sự của dropdown.
4. Mỗi <li> bên trong <ul> là một mục trong menu dropdown.

Dropdown Button vs. Dropdown Link

Bạn có thể tạo một dropdown sử dụng hoặc là một nút hoặc là một liên kết. Dưới đây là sự khác biệt:

Dropdown Button

Chúng ta đã thấy điều này trong ví dụ cơ bản. Nó sử dụng thẻ <button>:

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

Dropdown Link

Đối với dropdown dựa trên liên kết, chúng ta sử dụng thẻ <a>:

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<!-- Menu items -->
</ul>
</div>

Sự khác biệt chính là thẻ HTML được sử dụng (<button> vs. <a>), nhưng chúng hoạt động tương tự.

Variants

Bootstrap cung cấp nhiều biến thể màu sắc cho dropdown của bạn. Bạn có thể thay đổi lớp btn-secondary thành bất kỳ cái nào trong số này:

• btn-primary
• btn-success
• btn-info
• btn-warning
• btn-danger
• btn-light
• btn-dark

Ví dụ:

<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Danger Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

Split Button

Một dropdown nút chia tách分开 separates the button action from the dropdown toggle:

<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Menu items -->
</ul>
</div>

Ở đây, nhấn vào phần bên trái của nút thực hiện một hành động, trong khi phần bên phải mở dropdown.

Sizing

Bạn có thể tạo dropdown lớn hơn hoặc nhỏ hơn bằng cách thêm các lớp btn-lg hoặc btn-sm:

Large Dropdown Button

<div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLarge" data-bs-toggle="dropdown" aria-expanded="false">
Large Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLarge">
<!-- Menu items -->
</ul>
</div>

Small Dropdown Button

<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSmall" data-bs-toggle="dropdown" aria-expanded="false">
Small Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSmall">
<!-- Menu items -->
</ul>
</div>

Dark Dropdown

Để có một dropdown có giao diện tối, thêm lớp dropdown-menu-dark vào dropdown-menu của bạn:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dark Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

Directions

Bootstrap cho phép bạn thay đổi hướng của dropdown. Hãy khám phá các tùy chọn này:

Centered Dropdowns

Để canh giữa menu dropdown, thêm lớp dropdown-center vào container:

<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenteredButton">
<!-- Menu items -->
</ul>
</div>

Dropup

Để có một dropdown mở lên, sử dụng lớp dropup:

<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<!-- Menu items -->
</ul>
</div>

Dropup Centered

Kết hợp dropup và dropdown-center để có một dropup canh giữa:

<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenteredButton">
<!-- Menu items -->
</ul>
</div>

Dropend

Để có một dropdown mở sang phải, sử dụng lớp dropend:

<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<!-- Menu items -->
</ul>
</div>

Dropstart

Để có một dropdown mở sang trái, sử dụng lớp dropstart:

<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
<!-- Menu items -->
</ul>
</div>

Menu Items

Bây giờ, hãy nói về những gì bên trong menu dropdown của bạn. Bạn có nhiều tùy chọn:

Headers

Thêm một tiêu đề để nhóm các mục menu:

<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Dividers

Sử dụng các dấu phân cách để tách các nhóm mục liên quan:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Text

Bạn cũng có thể bao gồm văn bản không tương tác:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><span class="dropdown-item-text">Dropdown item text</span></li>
</ul>

Forms

Bạn thậm chí có thể bao gồm các biểu mẫu trong dropdown của mình:

<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>

Menu Alignment

Theo mặc định, các menu dropdown được canh trái. Bạn có thể thay đổi điều này với các lớp căn chỉnh:

Right-aligned Menu

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

Responsive Alignment

Bạn cũng có thể làm căn chỉnhResponsive Alignment responsive:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

Menu này sẽ được canh trái theo mặc định, nhưng sẽ được canh phải trên màn hình lớn và lớn hơn.

Dropdown Options

Bootstrap dropdowns đi kèm với một số tùy chọn bổ sung:

Auto Close Behavior

Bạn có thể kiểm soát cách dropdown đóng với thuộc tính data-bs-auto-close:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Menu items -->
</ul>
</div>

Các tùy chọn cho data-bs-auto-close:

• true (mặc định): Đóng dropdown khi nhấp bên ngoài hoặc bên trong dropdown
• false: Dropdown sẽ không đóng khi nhấp bên ngoài hoặc bên trong
• inside: Đóng dropdown khi nhấp bên trong dropdown
• outside: Đóng dropdown khi nhấp bên ngoài dropdown

Và thế là bạn đã hoàn thành một chuyến du lịch nhanh chóng qua Bootstrap dropdowns. Nhớ rằng, thực hành là cách tốt nhất để trở thành người thợ, vì vậy đừng ngại thử nghiệm với các ví dụ này. Chúc may mắn, và mong rằng các dropdown của bạn luôn mở đúng hướng!

Credits: Image by storyset