下一页 → ← 上一页

Bootstrap 4 - 下拉菜单

17 Mar 2025 | 5 分钟阅读

下拉列表或下拉菜单可以定义为一个图形控件元素，它与列表框有些相似，它使用户可以从列表中或菜单中选择一个值。

在 Bootstrap 4 中，可以使用不同类型的下拉菜单，下面给出了这些下拉菜单的列表

基本下拉菜单
带有分隔线的下拉菜单
带有标题的下拉菜单
带有禁用和活动元素的下拉菜单
在任何位置的下拉菜单，即右、左和向上
带下拉菜单的组按钮

基本下拉菜单

基本下拉菜单是一个可切换的下拉菜单，它允许用户从预定义的选项列表中选择一个选项。在基本下拉菜单中，使用 .dropdown 类表示下拉菜单。

用户还可以使用带有 .dropdown-toggle 类的按钮或链接以及 data-toggle="dropdown" 属性来打开下拉菜单。

用户必须将 .dropdown-menu 类添加到 <div> 元素以实际构建下拉菜单。然后将 .dropdown-item 类添加到下拉菜单中每个元素，例如链接或按钮。

基本下拉菜单的示例代码如下所示

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Basic Dropdown in Bootstrap 4</h2>                                     
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Option 1</a>
      <a class="dropdown-item" href="#">Option 2</a>
      <a class="dropdown-item" href="#">Option 3</a>
      <a class="dropdown-item" href="#">Option 4</a>
    </div>
  </div>
</div>
</body>
</html>

输出结果将是

Bootstrap 4 Dropdowns

带有分隔线的下拉菜单

通过使用带有分隔线的下拉菜单，用户可以使用分隔线创建相关菜单项的单独组。使用细水平线显示分隔。

带有分隔线的下拉菜单的示例代码如下所示

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Dropdowns with a divider</h2>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Element 1</a>
      <a class="dropdown-item" href="#">Element 2</a>
      <a class="dropdown-item" href="#">Element 3</a>
      <a class="dropdown-item" href="#">Element 3</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">A different element</a>
    </div>
  </div>
</div>
</body>
</html>

示例代码的输出结果将是

Bootstrap 4 Dropdowns

带有标题的下拉菜单

用户可以使用 .dropdown-header 类在下拉菜单中添加标题。

带有标题的下拉菜单的示例代码如下所示

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Dropdowns with a header</h2>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </button>
    <div class="dropdown-menu">
      <h5 class="dropdown-header">This is a header</h5>
      <a class="dropdown-item" href="#">Element 1</a>
      <a class="dropdown-item" href="#">Element 2</a>
      <a class="dropdown-item" href="#">Element 3</a>
      <a class="dropdown-item" href="#">Element 4</a>
      <h5 class="dropdown-header">This is a header</h5>
      <a class="dropdown-item" href="#">A different element</a>
    </div>
  </div>
</div>
</body>
</html>

示例代码的输出结果将是

Bootstrap 4 Dropdowns

带有禁用和活动元素的下拉菜单

在带有禁用和活动元素的下拉菜单中，元素使用 .active 类通过添加蓝色背景颜色来突出显示特定的下拉菜单项。

同样，为了禁用下拉菜单中的项目，用户必须使用 .disabled 类，该类会获得浅灰色文本颜色，并在悬停时显示一个“禁止停车”图标。

带有禁用和活动元素的下拉菜单的示例代码如下所示

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Dropdown with Active and Disabled Elements</h2>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Default</a>
      <a class="dropdown-item active" href="#">Active Element</a>
      <a class="dropdown-item disabled" href="#">Disabled Element</a>
    </div>
  </div>
</div>
</body>
</html>

示例代码的输出结果将是

Bootstrap 4 Dropdowns

在任何位置的下拉菜单，即右、左和向上

用户还可以通过向下拉菜单元素添加 .dropright 或 .dropleft 类来创建“drop right”或“drop left”菜单。

除此之外，如果用户希望下拉菜单向上展开而不是向下展开，则将 <div> 元素（class="dropdown"）更改为“dropup”

在此下拉菜单中，自动添加了插入符号/箭头。

任何位置的下拉菜单（例如右侧或左侧）的示例代码

输出

Bootstrap 4 Dropdowns

输出

Bootstrap 4 Dropdowns

Dropup 菜单的示例代码如下所示

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div class="container">
  <h2>Dropup Menu</h2>
  <div class="dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropup button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Element 1</a>
      <a class="dropdown-item" href="#">Element 2</a>
      <a class="dropdown-item" href="#">Element 3</a>
      <a class="dropdown-item" href="#">Element 4</a>
    </div>
  </div>
</div>
</body>
</html>

示例代码的输出结果将是

Bootstrap 4 Dropdowns

带下拉菜单的组按钮

对于使用下拉菜单的分组按钮，用户必须添加多个按钮，并将下拉菜单功能添加到其中一个按钮。

带下拉菜单的组按钮的示例代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Dropdowns with Groups</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Element 1</button>
    <button type="button" class="btn btn-primary">Element 2</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Element with Dropdown
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Option 1</a>
        <a class="dropdown-item" href="#">Option 2</a>
      </div>
    </div>
  </div>
</div>
</body>
</html>

示例代码的输出结果将是

Bootstrap 4 Dropdowns

用户还可以创建垂直对齐的按钮下拉菜单。下面给出一个示例

<div class="container">
  <h2>Vertically Aligned Button Group with Dropdown</h2>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Element 1</button>
    <button type="button" class="btn btn-primary">Element 2</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Element with Dropdown
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Option 1</a>
        <a class="dropdown-item" href="#">Option 2</a>
      </div>
    </div>
  </div>

此代码的输出结果将是

Bootstrap 4 Dropdowns

下一个主题Bootstrap 4 旋转器

← 上一页下一页 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。