Bootstrap 5学习教程，从入门到精通，Bootstrap 5 下拉菜单（Dropdown）语法知识点及案例代码（29）

于 2025-06-30 14:11:21 发布
阅读量643 收藏 19
点赞数 17
CC 4.0 BY-SA版权
分类专栏： Bootstrap5 网页开发 前端开发 文章标签： bootstrap 学习 前端 javascript typescript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45746668/article/details/149022303

Bootstrap 5 下拉菜单（Dropdown）语法知识点及案例代码

Bootstrap 5 提供了强大的下拉菜单组件，用于在网页中实现可展开的选项列表。

一、Bootstrap 5 下拉菜单语法知识点

1. 引入 Bootstrap 5

在使用 Bootstrap 5 之前，需要在 HTML 文件中引入 Bootstrap 的 CSS 和 JS 文件，以及其依赖的 Popper.js。

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS Bundle (包含 Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. 基本结构

下拉菜单的基本结构包括一个按钮（触发器）和一个下拉菜单内容容器（通常使用 <div> 包裹）。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜单
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">菜单项 1</a></li>
    <li><a class="dropdown-item" href="#">菜单项 2</a></li>
    <li><a class="dropdown-item" href="#">菜单项 3</a></li>
  </ul>
</div>

3. 主要类名解释

  • dropdown: 定义一个下拉菜单容器。
  • dropdown-toggle: 应用于触发下拉菜单的按钮，指示这是一个下拉菜单的切换按钮。
  • dropdown-menu: 定义下拉菜单的内容容器。
  • dropdown-item: 定义下拉菜单中的每个菜单项。

4. 数据属性

  • data-bs-toggle="dropdown": 指示按钮用于切换下拉菜单。
  • aria-expanded="false": 提供无障碍支持，指示下拉菜单的展开状态。

5. 方向调整

可以通过添加额外的类来调整下拉菜单的显示方向：

  • dropup: 下拉菜单向上展开。
  • dropend: 下拉菜单向右展开。
  • dropstart: 下拉菜单向左展开。
<div class="dropdown dropup">
  <!-- 下拉菜单内容 -->
</div>

6. 对齐方式

默认情况下，下拉菜单与触发按钮左对齐。可以使用 dropdown-menu-end 类来右对齐。

<ul class="dropdown-menu dropdown-menu-end">
  <!-- 菜单项 -->
</ul>

7. 分隔线与标题

可以在下拉菜单中添加分隔线和标题，以组织菜单项。

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">菜单标题</h6></li>
  <li><a class="dropdown-item" href="#">菜单项 1</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">菜单项 2</a></li>
</ul>

8. 禁用菜单项

可以使用 disabled 类来禁用某个菜单项。

<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">禁用项</a></li>

9. 按钮样式

触发下拉菜单的按钮可以使用 Bootstrap 提供的各种按钮样式，如 btn-primary, btn-success 等。

<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  主要按钮
</button>

10. 分割按钮下拉菜单

可以创建带有分割线的下拉按钮。

<div class="btn-group">
  <button type="button" class="btn btn-danger">操作</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">切换下拉菜单</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">操作 1</a></li>
    <li><a class="dropdown-item" href="#">操作 2</a></li>
  </ul>
</div>

二、案例代码及详细注释

以下是一个完整的 Bootstrap 5 下拉菜单案例，包含不同类型的下拉菜单示例，并附有详细注释。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 5 下拉菜单示例</title>
  <!-- 引入 Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 自定义样式，可根据需要调整 */
    body {
      padding: 20px;
    }
    .dropdown-menu {
      max-width: 200px;
    }
  </style>
</head>
<body>

  <h2>Bootstrap 5 下拉菜单示例</h2>

  <!-- 1. 基本下拉菜单 -->
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      基本下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">菜单项 1</a></li>
      <li><a class="dropdown-item" href="#">菜单项 2</a></li>
      <li><a class="dropdown-item" href="#">菜单项 3</a></li>
    </ul>
  </div>

  <hr>

  <!-- 2. 右对齐下拉菜单 -->
  <div class="dropdown">
    <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      右对齐下拉菜单
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
      <li><a class="dropdown-item" href="#">菜单项 A</a></li>
      <li><a class="dropdown-item" href="#">菜单项 B</a></li>
      <li><a class="dropdown-item" href="#">菜单项 C</a></li>
    </ul>
  </div>

  <hr>

  <!-- 3. 带有标题和分隔线的下拉菜单 -->
  <div class="dropdown">
    <button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      带标题和分隔线下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><h6 class="dropdown-header">菜单标题</h6></li>
      <li><a class="dropdown-item" href="#">菜单项 X</a></li>
      <li><a class="dropdown-item" href="#">菜单项 Y</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">菜单项 Z</a></li>
    </ul>
  </div>

  <hr>

  <!-- 4. 禁用菜单项的下拉菜单 -->
  <div class="dropdown">
    <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      禁用菜单项下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">可用项 1</a></li>
      <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">禁用项</a></li>
      <li><a class="dropdown-item" href="#">可用项 2</a></li>
    </ul>
  </div>

  <hr>

  <!-- 5. 分割按钮下拉菜单 -->
  <div class="btn-group">
    <button type="button" class="btn btn-info">操作</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">切换下拉菜单</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">操作 1</a></li>
      <li><a class="dropdown-item" href="#">操作 2</a></li>
      <li><a class="dropdown-item" href="#">操作 3</a></li>
    </ul>
  </div>

  <hr>

  <!-- 6. 向上展开的下拉菜单 -->
  <div class="dropdown dropup">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      向上展开下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">菜单项 A</a></li>
      <li><a class="dropdown-item" href="#">菜单项 B</a></li>
      <li><a class="dropdown-item" href="#">菜单项 C</a></li>
    </ul>
  </div>

  <hr>

  <!-- 7. 左侧展开的下拉菜单 -->
  <div class="dropdown dropstart">
    <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      左侧展开下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">菜单项 X</a></li>
      <li><a class="dropdown-item" href="#">菜单项 Y</a></li>
      <li><a class="dropdown-item" href="#">菜单项 Z</a></li>
    </ul>
  </div>

  <hr>

  <!-- 8. 右侧展开的下拉菜单 -->
  <div class="dropdown dropend">
    <button class="btn btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      右侧展开下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">菜单项 M</a></li>
      <li><a class="dropdown-item" href="#">菜单项 N</a></li>
      <li><a class="dropdown-item" href="#">菜单项 O</a></li>
    </ul>
  </div>

  <!-- 引入 Bootstrap 5 JS Bundle (包含 Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代码说明

  1. 引入 Bootstrap 5 CSS 和 JS:

    • 使用 CDN 链接引入 Bootstrap 5 的 CSS 和 JS 文件，确保下拉菜单的样式和功能正常。
    • 引入 Popper.js 是因为 Bootstrap 5 依赖它来实现下拉菜单的交互功能。

  2. 基本下拉菜单:

    • 使用 dropdown 类定义下拉菜单容器。
    • 按钮使用 btn 和 btn-primary 类设置样式，并添加 dropdown-toggle 类和 data-bs-toggle="dropdown" 属性来指示这是一个下拉菜单的触发按钮。
    • 下拉菜单内容使用 dropdown-menu 类包裹的 <ul> 列表，每个菜单项使用 dropdown-item 类。

  3. 右对齐下拉菜单:

    • 在 dropdown-menu 类的基础上添加 dropdown-menu-end 类，使下拉菜单右对齐。

  4. 带有标题和分隔线的下拉菜单:

    • 在 <ul> 列表中添加 <h6> 元素作为菜单标题。
    • 使用 <hr> 元素添加分隔线，分隔不同的菜单项。

  5. 禁用菜单项的下拉菜单:

    • 在某个 dropdown-item 元素上添加 disabled 类和相应的属性，使其成为禁用状态。

  6. 分割按钮下拉菜单:

    • 使用 btn-group 类包裹两个按钮：一个普通按钮和一个带有 dropdown-toggle-split 类的按钮。
    • 第二个按钮使用 visually-hidden 类隐藏文本内容，确保无障碍支持。

  7. 向上、左侧和右侧展开的下拉菜单:

    • 通过在 dropdown 容器上添加 dropup, dropstart, dropend 类，分别实现下拉菜单向上、左侧和右侧展开。

注意事项

  • 响应式设计: Bootstrap 5 的下拉菜单是响应式的，能够适应不同的屏幕尺寸。如果需要自定义样式或行为，可以根据具体需求进行调整。
  • 无障碍支持: 使用 aria-expanded 和 visually-hidden 类等，确保下拉菜单对辅助技术的支持。
  • JavaScript 依赖: Bootstrap 5 的下拉菜单依赖于 JavaScript，因此确保在页面中正确引入 Bootstrap 的 JS 文件和 Popper.js。
Bootstrap5 教程
shengyin714959的博客
08-21 223
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。
BootStrap基础知识学习-No.1
qq_27348951的博客
12-05 1361
Bootstrap基础知识！
bootstrap5
weixin_34138139的博客
01-18 308
列表组的使用 ul.list-group &gt; li.list-group-item *5... 列表组中可以放置徽标: 在li中放置 span.badge. bootstrap中的情景类: 实际上就是所谓的颜色类, 如 .list-group-item-success 等类. 列表组的链接 还是list-group, list-group-item类, 只是将ul换成 div, li换成 a...
BootStrap5快速入门
没有途径，只有努力
04-07 3127
BootStrap5快速入门BootStrap5快速入门引入1.容器2.网格系统3.文字排版标签Display 标题类smallmarkabbrblockquotecodekbd4.颜色5.表格6.形状7.消息提示8.按钮9.徽章10.进度条11.加载12.分页13.列表组14.卡片15.下拉菜单16.手风琴17.导航18.轮播19.模态框(信息交互)20.提示框21.回到顶部----------------总结练习实战效果图 BootStrap5快速入门 本教程只记录部分常用的 官方文档请前往官网:[简
Bootstrap5详细讲解
Harris-H的博客
08-30 5712
文章目录Boostrap v50.介绍1.快速开始2.布局容器 Boostrap v5 0.介绍 使用 Bootstrap 构建快速、响应式布局的网站 Bootstrap 是全球最流行的前端开源工具包，它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。 1.快速开始 <!doctype html> <html lang="zh-CN"> <head> &l
atom-bootstrap4：:red_circle:已弃用| Bootstrap 4支持和Atom片段
01-31
4. **导航（Navs）和导航条（Navbar）**：Bootstrap 4的导航和导航条是网站布局中常见的元素，这个插件可能提供方便的代码片段来创建响应式的导航结构，包括链接、下拉菜单等。 5. **按钮组（Button Groups）和下拉...
bootstrap响应式网页作业c-m开发笔记
最新发布
06-24
3. **Bootstrap组件**：Bootstrap提供了丰富的组件，如导航条（navbar）、下拉菜单（dropdown）、模态框（modal）、按钮组（button groups）、轮播图（carousel）等。这些组件都已经预设好样式，只需简单地添加相应...
Bootstrap 4弃用通知：Atom片段支持终结束
### 知识点概述 #### Bootstrap框架介绍 Bootstrap是一个非常流行的前端框架，用于快速开发响应式布局和移动设备优先的Web项目。它提供了一系列预定义的样式和组件，比如导航栏、按钮、表单、模态框等，允许开发者...
www:pug-bootstrap的文档网站
03-25
**Pug Bootstrap 知识点详解** Pug Bootstrap 是一个结合了Pug模板引擎和Bootstrap框架的项目，旨在提供一种高效、简洁的方式来构建基于Bootstrap的前端界面。Pug（以前称为Jade）是一种流行的HTML预处理器，它允许...
bootstrap5：Bootstrap 5-示例和练习项目
03-04
Desenvolver布局baseado no arquivo MODELO SITE： 1 Colunas ao ser visualizado否celular 2 Colunas ao ser visualizado否平板电脑4 Colunas ao ser visualizado否computador Deveráconter： 影像 文字报 文本 Botãocom o texto-塞巴舞 软件ERP Trabalhamos comvários的客户，DES PORTE Pequenoatémulti nacionais e estamos prreparados para melhor lender。 （imagem：software.png） Aplicativos移动版 Android应用程序和IOS参数集成软件。 （imagem：mobile.png） Desen
BootStrap5基础入门
Artisan_w
10-13 1190
1、引入依赖从官网 getbootstrap.com 下载 Bootstrap 5。或者Bootstrap 5 CDN注意：bootstrap.bundle.min.js 包含了 Bootstrap 的 JavaScript 组件以及必需的 Popper.js 库，它是一个捆绑版的 Bootstrap JavaScript 文件。所以，当你使用 bootstrap.bundle.min.js 时，不需要额外引入 bootstrap.min.js 或 Popper.js，因为它们已经包含在内。
最新版Bootstrap5教程——Bootstrap5基础
m0_61684063的博客
05-20 5012
  Bootstrap是由推特设计师Mark Otto和Jacob Thornton合作开发的一款基于HTML、CSS、JavaScript的前端开源框架，使用简洁灵活，让web开发更加快速简单。  Bootstrap现在最新的版本为v5.2.0-beta1，现在介绍一下Bootstrap5相对于以前版本的改变。
Bootstrap 5 保姆级教程（五）：按钮组 & 徽章
Flag少侠的博客
04-16 950
Bootstrap 5 中允许我们将按钮放在同一行上。可以在 元素上添加 .btn-group 类来创建按钮组。
Bootstrap 5 保姆级教程（一）：容器 & 网格系统
Flag少侠的博客
04-10 2616
container 类用于固定宽度并支持响应式布局的容器。
WEB前端网页设计-Bootstrap5 网格系统
君逍遥o
04-30 642
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
最新版Bootstrap5教程——Bootstrap5基础，前端高级工程师进阶学习—前端热修复原理
weixin_58134620的博客
04-02 1007
Bootstrap5简介Bootstrap是由推特设计师Mark Otto和Jacob Thornton合作开发的一款基于HTML、CSS、JavaScript的前端开源框架，使用简洁灵活，让web开发更加快速简单。Bootstrap现在最新的版本为v5.2.0-beta1，现在介绍一下Bootstrap5相对于以前版本的改变。（1）不在支持internet explorer10和internet explorer11。节省了很多为兼容而写的代码，同时也可以更好的运用html5和css3的一些新特征。
Bootstrap5
Kongfutu的博客
05-27 857
col-针对所有设备。.col-sm-平板 - 屏幕宽度等于或大于 576px。.col-md- 桌面显示器 -屏幕宽度等于或大于 768px。.col-g-大桌面显示器-屏幕宽度等于或大于 992px。.col-xl-特大桌面显示器-屏幕宽度等于或大于 1200px。.col-xxl-超大桌面显示器 -屏幕宽度等于或大于1400px。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值