Bootstrap - 下拉菜单示例

什么是下拉菜单？

你好，有抱负的网页开发者们！今天，我们将深入了解Bootstrap下拉菜单的奇妙世界。作为你友好的邻居计算机老师，我很兴奋能引导你们开始这段旅程，即使你们之前从未编写过一行代码。相信我，到了这个教程的结尾，你们将能像专业人士一样创建下拉菜单！

Bootstrap - Dropdowns Demo

下拉菜单是一个用户界面元素，允许用户从一系列选项中选择一个。它就像一个当你点击按钮或链接时出现的数字菜单。想象你在一个餐厅，而不是一张纸质的菜单，服务员递给你一个神奇的按钮。当你按下它时，一份美味的菜肴列表会悬浮在空中出现。这就是下拉菜单在网页上的基本作用！

为什么使用下拉菜单？

下拉菜单非常有用，可以：

在你的网页上节省空间
组织相关选项
提供一个干净直观的用户界面

现在，让我们开始编写一些代码！

设置Bootstrap

在我们创建第一个下拉菜单之前，我们需要在我们的HTML文件中设置Bootstrap。别担心，这比设置一个新智能手机简单多了！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 下拉菜单示例</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的内容将放在这里 -->

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

这段代码设置了一个基本的HTML结构并包含了必要的Bootstrap文件。把它想象成在开始烹饪前准备你的厨房！

创建基本下拉菜单

让我们从一个简单的下拉菜单开始。我们将创建一个按钮，当点击时，会显示一个选项列表。

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
选择一个水果
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">苹果</a></li>
<li><a class="dropdown-item" href="#">香蕉</a></li>
<li><a class="dropdown-item" href="#">樱桃</a></li>
</ul>
</div>

让我们分解一下：

<div class="dropdown">：这是我们下拉菜单的容器。
<button class="btn btn-primary dropdown-toggle" ...>：这创建了一个按钮，用户点击它可以打开下拉菜单。
data-bs-toggle="dropdown"：这告诉Bootstrap这个按钮应该切换一个下拉菜单。
<ul class="dropdown-menu">：这是点击按钮时出现的列表。
<li><a class="dropdown-item" href="#">...：这些是下拉列表中的单个项目。

下拉菜单方向

就像你在自助餐可以从不同的方向拿食物一样，Bootstrap允许你改变下拉菜单的方向。让我们探索一些选项：

向上弹出

<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
向上弹出
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<li><a class="dropdown-item" href="#">操作</a></li>
<li><a class="dropdown-item" href="#">另一个操作</a></li>
<li><a class="dropdown-item" href="#">在这里的另一样东西</a></li>
</ul>
</div>

这里的唯一区别是使用dropup类而不是dropdown。就像把你的菜单翻过来！

向右弹出和向左弹出

<div class="dropend">
<button class="btn btn-info dropdown-toggle" type="button" id="droprightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
向右弹出
</button>
<ul class="dropdown-menu" aria-labelledby="droprightMenuButton">
<li><a class="dropdown-item" href="#">操作</a></li>
<li><a class="dropdown-item" href="#">另一个操作</a></li>
<li><a class="dropdown-item" href="#">在这里的另一样东西</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">
向左弹出
</button>
<ul class="dropdown-menu" aria-labelledby="dropleftMenuButton">
<li><a class="dropdown-item" href="#">操作</a></li>
<li><a class="dropdown-item" href="#">另一个操作</a></li>
<li><a class="dropdown-item" href="#">在这里的另一样东西</a></li>
</ul>
</div>

使用dropend来实现右对齐的下拉菜单，使用dropstart来实现左对齐的下拉菜单。就像选择把叉子放在盘子的哪一边！

下拉菜单项

现在，让我们给下拉菜单添加一些额外的特性：

<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
下拉菜单
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><h6 class="dropdown-header">下拉菜单头部</h6></li>
<li><a class="dropdown-item" href="#">操作</a></li>
<li><a class="dropdown-item" href="#">另一个操作</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">在这里的另一样东西</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">禁用的操作</a></li>
</ul>
</div>

在这个示例中，我们添加了：

一个头部（dropdown-header）
一个分隔符（dropdown-divider）
一个禁用的项目（dropdown-item disabled）

这就像在菜单上创建区域并将缺货的项灰显！

下拉菜单大小

就像你可以点小杯、中杯或大杯饮料一样，你可以改变下拉菜单按钮的大小：

<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
大按钮
</button>
<ul class="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">
小按钮
</button>
<ul class="dropdown-menu">
<!-- 下拉菜单项 -->
</ul>
</div>

使用btn-lg来创建一个大按钮，使用btn-sm来创建一个小按钮。就这么简单！

下拉菜单方法

Bootstrap提供了几种方法来程序化地控制下拉菜单。下面是这些方法的表格：

方法	描述
show	显示下拉菜单
hide	隐藏下拉菜单
toggle	切换下拉菜单
update	更新元素下拉菜单的位置
dispose	销毁元素的下拉菜单

要使用这些方法，你可以使用JavaScript。例如：

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

// 显示下拉菜单
dropdownList[0].show()

// 隐藏下拉菜单
dropdownList[0].hide()

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

就这样！你刚刚完成了Bootstrap下拉菜单的速成课程。记住，熟能生巧，所以不要害怕在你们自己的网站上尝试这些元素。

在你们知道之前，你们将能创建出连最精致的餐厅都会嫉妒的下拉菜单。快乐编码，愿你的下拉菜单总是向正确的方向弹出！

Credits: Image by storyset