Bootstrap - 下拉菜单

本章将讨论 Bootstrap 下拉菜单。下拉菜单是可切换的上下文菜单，可以启用它以列表格式显示链接。这可以通过使用下拉 JavaScript 插件来实现交互。

在检查下拉列表的示例和功能之前，有几点值得注意。

下拉菜单是使用第三方库Popper构建的。Popper 提供动态放置和视口检测。
在 Bootstrap 的 JavaScript 之前包含popper.min.js或使用bootstrap.bundle.min.js或bootstrap.bundle.js，其中包含 Popper。
由于不需要动态定位，Popper 不习惯在导航栏中放置下拉菜单。

基本下拉菜单

下拉菜单的切换（按钮或链接）和下拉菜单需要包含在.dropdown或声明position:relative;的另一个元素中。。我们可以使用<button>元素作为下拉触发器，但该插件也可以使用<a>元素。以下示例在适当的情况下使用<ul>元素，但支持自定义标记。

下拉按钮

.btn类可以通过一些标记更改转换为下拉菜单/切换。以下示例演示了如何将其与<button>元素一起使用。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

下拉链接

尽管<button>是下拉切换的首选控件，但有时您可能必须使用<a>。如果您这样做，我们建议添加一个role="button"属性，以便向屏幕阅读器等辅助技术清楚地解释该控件的功能。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown Link
        </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Create Account</a></li>
            <li><a class="dropdown-item" href="#">Sign in</a></li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
</html>

变体

使用上下文类来设置下拉菜单的颜色样式。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Primary Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Secondary Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Danger Dropdown
    </button>
    <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Info Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Success Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Light Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Warning Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

分割按钮

与单按钮下拉列表类似，拆分按钮下拉列表是使用相同的语法创建的，但添加了.dropdown-toggle-split以便在下拉插入符周围留出足够的空间。

使用此附加类可将插入符号两侧的水平填充减少 25%，并删除添加到常规按钮下拉列表中的左边距。这些额外的更改将插入符号集中在拆分按钮上，并在主按钮旁边提供了适当大小的点击区域。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Split Dropdown</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
</html>

浆纱

下拉菜单可使用各种尺寸的按钮进行操作，包括默认下拉按钮和拆分下拉按钮。

大下拉按钮

要获得下拉菜单的大尺寸按钮，请添加类.btn-lg和类.btn

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group">
    <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown - Large Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
    <div class="btn-group">
      <button class="btn btn-secondary btn-lg" type="button">
           Dropdown - Large split button
      </button>
      <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
      </ul>
    </div>
</body>
</html>

小下拉按钮

要获得下拉菜单的小尺寸按钮，请添加类.btn-sm与类.btn

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown - Small Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <button class="btn btn-secondary btn-sm" type="button">
        Dropdown - Small split button
    </button>
    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

深色下拉菜单

v5.3.0 中已弃用

将.dropdown-menu-dark类添加到现有.dropdown-menu中，以选择深色下拉菜单以匹配您的深色导航栏或自定义样式。无需更改下拉菜单项。

随着颜色模式的引入，组件的深色变体在 v5.3.0 中已被弃用。不要在根元素、父包装器或组件本身上添加.dropdown-menu-dark设置data-bs-theme="dark" 。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Dark
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item active" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">sign out</a></li>
    </ul>
    </div>
</body>
</html>

并将其放置在导航栏中以供使用：

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
            <ul class="navbar-nav">
              <li class="nav-item dropdown">
                <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown Dark Navbar
                </button>
                <ul class="dropdown-menu dropdown-menu-dark">
                  <li><a class="dropdown-item" href="#">Create Account</a></li>
                  <li><a class="dropdown-item" href="#">Sign in</a></li>
                  <li><a class="dropdown-item" href="#">Sign out</a></li>
                </ul>
              </li>
            </ul>
        </div>
    </div>
</body>
</html>

路线

在 RTL 模式下方向相反。您将在右侧看到.dropstart 。

居中下拉菜单

使用父级上的.dropdown-center 类将下拉菜单置于切换按钮下方的中心。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap - Dropdowns</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
        <title>Bootstrap - Dropdowns</title>
    </head>
    <body>
        <div class="dropdown-center">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Centered Dropdown
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Create Account</a></li>
            <li><a class="dropdown-item" href="#">Sign in</a></li>
            <li><a class="dropdown-item" href="#">Sign out<a></li>
        </ul>
        </div>
    </body>
    </html>

放弃

通过将.dropup类添加到父类，您可以在元素上方获得触发器下拉菜单。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group dropup" style="padding-top: 200px;">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group dropup" style="padding-top: 200px;">
    <button type="button" class="btn btn-secondary">
        Split Dropup Button
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
        aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
    </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Create Account</a></li>
            <li><a class="dropdown-item" href="#">Sign in</a></li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
 </html>

Dropup居中

通过将.dropup-center类添加到.dropup类中，您将获得位于元素上方居中的触发器下拉菜单。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropup dropup-center"  style="padding-top: 200px;">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Centered Dropup Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

掉落

通过将类.dropend添加到父类，您可以在元素右侧获得触发器下拉菜单。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group dropend">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropend Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group dropend">
    <button type="button" class="btn btn-secondary">
        Split Dropend Button
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
        aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

滴启动

通过将类.dropstart添加到父类，您可以在元素的左侧获得触发器下拉菜单。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group dropstart" style="padding-left: 200px;">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropstart Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group dropstart">
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
          aria-expanded="false">
        <span class="visually-hidden">Toggle Dropstart</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
        <button type="button" class="btn btn-secondary">
          Split Dropstart Button
        </button>
    </div>
</body>
</html>

菜单项

您可以使用元素<a>和<button>显示下拉项

以下示例演示了使用<button>元素的下拉项：

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Dropdowns</title>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu Using Button
    </button>
    <ul class="dropdown-menu">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button">Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

以下示例演示了使用<a>元素的下拉项：

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu Using a
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

积极的

要将下拉菜单添加为活动样式，请添加.active类。要将活动状态传达给辅助技术，请将aria-current属性与现有页面的页面值一起使用，或者对于集合中的当前项目使用true 。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap - Dropdowns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown Menu
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item active" href="#" aria-current="true">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>
    </body>
    </html>

残疾人

要禁用下拉菜单，请添加.disabled类。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item disabled">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

菜单对齐

默认情况下，下拉菜单位于距离顶部 100% 的位置，并沿着其父项的左侧。
通过使用.drop*类，您可以更改下拉菜单的方向。您还可以使用其他一些修饰符类来处理它们。
通过将 .dropdown -menu-end类添加到.dropdown-menu来使下拉菜单右对齐。
在 RTL 中使用 Bootstrap 时， .dropdown-menu-end将出现在左侧。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Right-aligned Dropdown Menu
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button"> Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

响应式对齐

对于响应式对齐，请添加data-bs-display="static"属性以禁用动态定位并使用响应式变化类。

添加.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end 将下拉菜单放置在指定断点的右侧。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
        Left-aligned but right aligned for large screen
    </button>
    <ul class="dropdown-menu dropdown-menu-lg-end">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button">Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

添加.dropdown-menu-end和.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start将下拉菜单对齐到指定断点的左侧或超出要执行的操作。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
        Right-aligned but left aligned for large screen
    </button>
    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button">Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

对齐选项

将以上示例中显示的大部分选项放在一处。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-Primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Right-aligned Menu
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">Create Account </a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
          Left-aligned, right-aligned lg Dropdown
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
          Right-aligned, left-aligned lg Dropdown
        </button>
        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group dropstart">
        <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropstart Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group dropend">
        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropend Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group dropup">
        <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropup Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
</html>

菜单内容

标头

添加.dropdown-header类以将标题添加到下拉菜单的标签部分。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><h6 class="dropdown-header">Dropdown Header</h6></li>
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

分隔线

添加类.dropdown-divider以使用分隔符分隔相关菜单元素组。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
    </div>
</body>
</html>

文本

将自由格式的文本放入带有文本的下拉菜单中，并使用间距实用程序。请注意，可能需要其他尺寸样式来限制菜单的宽度。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu With Text
    </button>
    <div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
    <p>
        example of dropdown menu with text.
    </p>
    <p class="mb-0">
            more examples of text.
    </p>
    </div>
    </div>
</body>
</html>

形式

为下拉菜单添加或创建一个表单，并使用任何边距或填充实用程序来提供必要的负空间。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu Form
    </button>
    <div class="dropdown-menu">
        <form class="px-4 py-3">
            <div class="mb-3">
              <label for="exampleDropdownFormEmail1" class="form-label">Email Id</label>
              <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="example123@gmail.com">
            </div>
            <div class="mb-3">
              <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
              <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-primary">Log in</button>
        </form>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Forgot password?</a>
        <a class="dropdown-item" href="#">Create new account</a>
    </div>
    </div>
</body>
</html>

下拉选项

要更改下拉菜单的位置，请添加类data-bs-offset或data-bs-reference。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="d-flex">
    <div class="dropdown me-1">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
            Offset Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-secondary">Reference Dropdown</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
    </div>
    </div>
</body>
</html>

自动关闭Behave

当您单击下拉菜单内部或外部时，下拉菜单将自动关闭。通过使用 autoClose 选项，您可以更改下拉列表的这种Behave。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap - Dropdowns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
          Basic Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
          Menu Close Clickable Inside
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
          Menu Close Clickable Outside
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
          Manual Close
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>
    </body>
    </html>