简体中文

Bootstrap 教程

Bootstrap 布局

Bootstrap 内容

Bootstrap 组件

Bootstrap 表单

Bootstrap 辅助工具

Bootstrap 实用工具

Bootstrap 演示

Bootstrap - 下拉菜单：初学者指南

你好，未来的网页开发者们！今天，我们将深入Bootstrap下拉菜单的奇妙世界。作为你友好的计算机老师邻居，我很兴奋能引导你走过这段旅程。如果你之前从未写过一行代码，也不用担心——我们将从头开始，逐步构建。那么，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

Bootstrap - Dropdowns

下拉菜单是什么？

在深入代码之前，让我们先聊聊下拉菜单是什么。想象你在一个餐馆，服务员递给你一份菜单。那份菜单就像一个下拉菜单——它给你提供了一系列的选择。在网页设计中，下拉菜单的工作原理类似。它们是向用户展示多个选择的紧凑方式，而不会让你的网页显得杂乱。

基本下拉菜单

让我们从最基本下拉菜单开始。这是Bootstrap中的样子：

<div class="dropdown">
<button class="btn btn-secondary 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>

让我们分解一下：

  1. 我们从一个带有dropdown类的<div>开始。这是我们的容器。
  2. 在里面，我们有一个触发下拉菜单的<button>。注意dropdown-toggle类和data-bs-toggle="dropdown"属性。
  3. 带有dropdown-menu类的<ul>是我们的实际下拉内容。
  4. <ul>中的每个<li>都是下拉菜单中的一个项目。

下拉按钮与下拉链接

你可以使用按钮或链接来创建下拉菜单。下面是它们的不同之处：

下拉按钮

我们已经在基本示例中看到了这个。它使用了<button>元素：

<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">
<!-- 菜单项 -->
</ul>
</div>

下拉链接

对于基于链接的下拉菜单，我们使用<a>标签：

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
下拉链接
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<!-- 菜单项 -->
</ul>
</div>

主要区别在于使用的HTML元素（<button> vs <a>），但它们的函数相似。

变体

Bootstrap为下拉菜单提供了多种颜色变体。你可以将btn-secondary类更改为以下任意一个：

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

例如：

<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
危险下拉菜单
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- 菜单项 -->
</ul>
</div>

分隔按钮

分隔按钮下拉菜单将按钮操作与下拉切换分离：

<div class="btn-group">
<button type="button" class="btn btn-primary">操作</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">切换下拉菜单</span>
</button>
<ul class="dropdown-menu">
<!-- 菜单项 -->
</ul>
</div>

在这里，点击按钮的左侧部分执行操作，而右侧部分打开下拉菜单。

大小

你可以通过添加btn-lg或btn-sm类来创建更大或更小的下拉菜单：

大型下拉按钮

<div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLarge" data-bs-toggle="dropdown" aria-expanded="false">
大型下拉菜单
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLarge">
<!-- 菜单项 -->
</ul>
</div>

小型下拉按钮

<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSmall" data-bs-toggle="dropdown" aria-expanded="false">
小型下拉菜单
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSmall">
<!-- 菜单项 -->
</ul>
</div>

暗色下拉菜单

对于时尚的暗色主题下拉菜单，将dropdown-menu-dark类添加到你的dropdown-menu：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
暗色下拉菜单
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
<!-- 菜单项 -->
</ul>
</div>

方向

Bootstrap允许你更改下拉菜单的方向。让我们探索这些选项：

居中下拉菜单

要将下拉菜单居中对齐，请将dropdown-center类添加到容器：

<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
居中下拉菜单
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenteredButton">
<!-- 菜单项 -->
</ul>
</div>

向上弹出

对于向上弹出的下拉菜单，使用dropup类：

<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">
<!-- 菜单项 -->
</ul>
</div>

居中向上弹出

结合dropup和dropdown-center以创建居中的向上弹出：

<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
居中向上弹出
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenteredButton">
<!-- 菜单项 -->
</ul>
</div>

向右弹出

对于向右弹出的下拉菜单，使用dropend类：

<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
向右弹出
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<!-- 菜单项 -->
</ul>
</div>

向左弹出

对于向左弹出的下拉菜单，使用dropstart类：

<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
向左弹出
</button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
<!-- 菜单项 -->
</ul>
</div>

菜单项

现在，让我们聊聊下拉菜单内部的内容。你有几个选项：

头部

添加一个头部来分组菜单项：

<ul class="dropdown-menu">
<li><h6 class="dropdown-header">下拉头部</h6></li>
<li><a class="dropdown-item" href="#">操作</a></li>
<li><a class="dropdown-item" href="#">另一个操作</a></li>
</ul>

分隔线

使用分隔线来分隔相关菜单项的组：

<ul class="dropdown-menu">
<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>
</ul>

文本

你也可以包含非交互式文本：

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">操作</a></li>
<li><a class="dropdown-item" href="#">另一个操作</a></li>
<li><a class="dropdown-item" href="#">在这里的其他事项</a></li>
<li><span class="dropdown-item-text">下拉项文本</span></li>
</ul>

表单

你甚至可以在下拉菜单中包含表单：

<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">电子邮件地址</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">密码</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="密码">
</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">
记住我
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">新来者？注册</a>
<a class="dropdown-item" href="#">忘记密码？</a>
</div>

菜单对齐

默认情况下，下拉菜单是左对齐的。你可以使用对齐类来更改这一点：

右对齐菜单

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
右对齐菜单
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<!-- 菜单项 -->
</ul>
</div>

响应式对齐

你也可以使对齐响应式：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
默认左对齐但在大屏幕上右对齐
</button>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton">
<!-- 菜单项 -->
</ul>
</div>

这个下拉菜单在默认情况下是左对齐的，但在大屏幕上会变成右对齐。

下拉菜单选项

Bootstrap下拉菜单提供了一些额外的选项：

自动关闭行为

你可以使用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">
可在外部点击
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- 菜单项 -->
</ul>
</div>

data-bs-auto-close的选项有：

  • true（默认）：点击外部或内部时关闭下拉菜单
  • false：点击外部或内部时不会关闭下拉菜单
  • inside：点击内部时关闭下拉菜单
  • outside：点击外部时关闭下拉菜单

就这样！你已经完成了Bootstrap下拉菜单的快速之旅。记住，熟能生巧，所以不要害怕尝试这些示例。祝你好运，愿你的下拉菜单总是向正确的方向弹出！

Credits: Image by storyset

上一教程:
Bootstrap - 折叠
下一教程:
Bootstrap - 列表组