Bootstrap5 下拉菜单

听海边涛声

已于 2024-09-01 16:18:04 修改

阅读量235

点赞数 2

文章标签： bootstrap 前端

于 2024-09-01 16:17:05 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/141784365

版权

https://getbootstrap.com/docs/5.3/components/dropdowns/

下拉菜单通常用于导航标题内，在用户鼠标悬停或者单击触发元素时显示相关链接列表。

基础下拉菜单

bootstrap 下拉菜单基本上有两个组件：下拉触发元素（可以是超链接或按钮）和下拉菜单本身。
.dropdown 类指示下拉菜单。
如需打开下拉菜单，使用.dropdown-toggle类。.dropdown-toggle类定义了触发元素，而触发元素上需要属性data-bs-toggle="dropdown" 来切换下拉菜单。
带有.dropdown-menu类的<div>元素可以构建下拉菜单，然后将.dropdown-item类添加到下拉菜单中的每个元素（链接或按钮）。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉按钮</button>
      <ul class="dropdown-menu">
        <li><a href="#" class="dropdown-item">链接1</a></li>
        <li><a href="#" class="dropdown-item">链接2</a></li>
        <li><a href="#" class="dropdown-item">链接3</a></li>
      </ul>
    </div>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

下拉列表分割线

https://getbootstrap.com/docs/5.3/components/dropdowns/#dividers

https://getbootstrap.com/docs/5.3/components/dropdowns/#headers

.dropdown-divider 类用于通过水平细线分隔下拉菜单中的链接。
.dropdown-header 向下拉菜单的标签区域添加标题。

标题

在这里插入图片描述

完整示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉按钮</button>
      <ul class="dropdown-menu">
        <li class="dropdown-header">下拉菜单标题</li>
        <li><a href="#" class="dropdown-item">链接1</a></li>
        <li><a href="#" class="dropdown-item">链接2</a></li>
        <li><a href="#" class="dropdown-item">链接3</a></li>
      </ul>
    </div>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

分隔线

在这里插入图片描述

导航栏中的下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="nav">
      <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">前端框架</a>
        <ul class="dropdown-menu">
          <li class="dropdown-item">链接1</li>
          <li class="dropdown-item">链接2</li>
          <li class="dropdown-item">链接3</li>
        </ul>
      </li>
      <li class="nav-item"><a href="#" class="nav-link">后端框架</a></li>
      <li class="nav-item"><a href="#" class="nav-link disabled">课程开发中</a></li>
    </ul>

  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

选项卡中的下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs">
      <li class="nav-item"><a href="#" class="nav-link active">首页</a></li>
      <li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">前端框架</a>
        <ul class="dropdown-menu">
          <li class="dropdown-item">链接1</li>
          <li class="dropdown-item">链接2</li>
          <li class="dropdown-item">链接3</li>
        </ul>
      </li>
      <li class="nav-item"><a href="#" class="nav-link">后端框架</a></li>
      <li class="nav-item"><a href="#" class="nav-link disabled">课程开发中</a></li>
    </ul>

  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

按钮组中的下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <div class="btn-group"></div>
    <button type="button" class="btn btn-info">按钮1</button>
    <button type="button" class="btn btn-warning">按钮2</button>
    <div class="dropdown">
      <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">按钮3</button>
      <ul class="dropdown-menu">
        <li class="dropdown-item">链接1</li>
        <li class="dropdown-item">链接2</li>
        <li class="dropdown-item">链接3</li>
      </ul>
    </div>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>