Bootstrap - Ví dụ Dropdown

什么是下拉菜单？

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của các下拉菜单 Bootstrap. Là người giáo viên máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn các bạn trong hành trình này, ngay cả khi bạn chưa bao giờ viết một dòng mã trước đây. Tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ tạo được các下拉菜单 như một chuyên gia!

Bootstrap - Dropdowns Demo

Một下拉菜单 là một phần tử giao diện người dùng cho phép người dùng chọn một tùy chọn từ danh sách các mục. Nó giống như một thực đơn kỹ thuật số xuất hiện khi bạn nhấp vào một nút hoặc liên kết. Hãy tưởng tượng bạn đang ở một nhà hàng, thay vì một thực đơn giấy, nhân viên phục vụ sẽ đưa bạn một nút kỳ diệu. Khi bạn nhấn nó, một danh sách các món ăn ngon xuất hiện lơ lửng trong không khí. Đó chính là điều mà một下拉菜单 làm trên một trang web!

Tại sao sử dụng下拉菜单?

Các下拉菜单 rất hữu ích cho:

Tiết kiệm không gian trên trang web của bạn
Tổ chức các tùy chọn liên quan
Cung cấp một giao diện người dùng sạch sẽ và trực quan

Bây giờ, hãy cùng bắt đầu với một chút mã!

Thiết lập Bootstrap

Trước khi chúng ta tạo下拉菜单 đầu tiên, chúng ta cần thiết lập Bootstrap trong tệp HTML của mình. Đừng lo lắng; điều này dễ dàng hơn việc thiết lập một chiếc điện thoại mới!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Nội dung của bạn sẽ ở đây -->

<!-- Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Mã này thiết lập cấu trúc HTML cơ bản và bao gồm các tệp Bootstrap cần thiết. Hãy tưởng tượng nó như việc chuẩn bị nhà bếp trước khi bạn bắt đầu nấu ăn!

Tạo một Dropdown cơ bản

Hãy bắt đầu với một下拉菜单 đơn giản. Chúng ta sẽ tạo một nút khi được nhấp sẽ hiển thị danh sách các tùy chọn.

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Chọn một loại quả
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Táo</a></li>
<li><a class="dropdown-item" href="#">Chuối</a></li>
<li><a class="dropdown-item" href="#">Cherry</a></li>
</ul>
</div>

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

<div class="dropdown">: Đây là containner cho下拉菜单 của chúng ta.
<button class="btn btn-primary dropdown-toggle" ...>: Điều này tạo ra nút mà người dùng nhấp để mở下拉菜单.
data-bs-toggle="dropdown": Điều này cho biết rằng nút này sẽ toggles một下拉菜单.
<ul class="dropdown-menu">: Đây là danh sách xuất hiện khi nút được nhấp.
<li><a class="dropdown-item" href="#">...: Đây là các mục cá nhân trong danh sách下拉菜单.

Hướng của Dropdown

Giống như cách bạn có thể phục vụ đồ ăn từ các hướng khác nhau tại một tiệc buffet, Bootstrap cho phép bạn thay đổi hướng của下拉菜单. Hãy cùng khám phá một số tùy chọn:

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">
<li><a class="dropdown-item" href="#">Hành động</a></li>
<li><a class="dropdown-item" href="#">Hành động khác</a></li>
<li><a class="dropdown-item" href="#">Điều khác ở đây</a></li>
</ul>
</div>

Sự khác biệt duy nhất ở đây là lớp dropup thay vì dropdown. Nó giống như lật úp thực đơn của bạn!

Dropright và Dropleft

<div class="dropend">
<button class="btn btn-info dropdown-toggle" type="button" id="droprightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu" aria-labelledby="droprightMenuButton">
<li><a class="dropdown-item" href="#">Hành động</a></li>
<li><a class="dropdown-item" href="#">Hành động khác</a></li>
<li><a class="dropdown-item" href="#">Điều khác ở đây</a></li>
</ul>
</div>

<div class="dropstart">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropleftMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<ul class="dropdown-menu" aria-labelledby="dropleftMenuButton">
<li><a class="dropdown-item" href="#">Hành động</a></li>
<li><a class="dropdown-item" href="#">Hành động khác</a></li>
<li><a class="dropdown-item" href="#">Điều khác ở đây</a></li>
</ul>
</div>

Sử dụng dropend cho các下拉菜单 canh phải và dropstart cho các下拉菜单 canh trái. Nó giống như việc chọn bên nào của đĩa để đặt fork của bạn!

Các mục trong Dropdown Menu

Bây giờ, hãy làm cho thực đơn下拉 của chúng ta thêm phần phong phú với một số tính năng bổ sung:

<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><h6 class="dropdown-header">Tiêu đề Dropdown</h6></li>
<li><a class="dropdown-item" href="#">Hành động</a></li>
<li><a class="dropdown-item" href="#">Hành động khác</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Điều khác ở đây</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Hành động bị vô hiệu hóa</a></li>
</ul>
</div>

Trong ví dụ này, chúng ta đã thêm:

Một tiêu đề (dropdown-header)
Một phân cách (dropdown-divider)
Một mục bị vô hiệu hóa (dropdown-item disabled)

Nó giống như tạo các phần trong thực đơn của bạn và làm mờ các mục không có sẵn!

Kích thước của Dropdown

Giống như cách bạn có thể đặt một ly đồ uống nhỏ, vừa hoặc lớn, bạn có thể thay đổi kích thước của nút下拉 của mình:

<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Nút lớn
</button>
<ul class="dropdown-menu">
<!-- Các mục trong Dropdown menu -->
</ul>
</div>

<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Nút nhỏ
</button>
<ul class="dropdown-menu">
<!-- Các mục trong Dropdown menu -->
</ul>
</div>

Sử dụng btn-lg cho nút lớn và btn-sm cho nút nhỏ. Đó là đơn giản như vậy!

Phương thức của Dropdown

Bootstrap cung cấp một số phương thức để điều khiển下拉菜单 theo cách thủ công. Dưới đây là bảng các phương thức này:

Phương thức	Mô tả
show	Hiển thị下拉菜单
hide	Ẩn下拉菜单
toggle	Toggles下拉菜单
update	Cập nhật vị trí của下拉菜单 của một phần tử
dispose	Hủy下拉菜单 của một phần tử

Để sử dụng các phương thức này, bạn có thể sử dụng JavaScript. Ví dụ:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})

// Hiển thị下拉菜单
dropdownList[0].show()

// Ẩn下拉菜单
dropdownList[0].hide()

// Toggles下拉菜单
dropdownList[0].toggle()

Và thế là bạn đã hoàn thành một khóa học nhanh về các下拉菜单 Bootstrap. Nhớ rằng, thực hành làm cho hoàn hảo, vì vậy đừng ngần ngại thử nghiệm các phần tử này trên các trang web của riêng bạn.

Sớm thôi, bạn sẽ tạo được các下拉菜单 mà ngay cả nhà hàng sang trọng cũng phải ghen tị. Chúc bạn may mắn và Dropdown của bạn luôn rơi vào đúng hướng!

Credits: Image by storyset

Hướng Dẫn Trước:

Bootstrap - Demo Sidebars

Hướng Dẫn Tiếp Theo:

Bootstrap - Demo nhóm danh sách