Bootstrap 简明教程

Bootstrap - Dropdowns

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

在查看下拉菜单示例和功能之前，需要关注几点。

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

Basic dropdown

下拉菜单的切换按钮（button 或链接）和下拉菜单需要包装在 .dropdown 内，或申明 position: relative; 的其他元素。我们可以使用 <button> 元素作为下拉菜单触发器，但此插件同样适用于 <a> 元素。以下示例在适当的时候使用 <ul> 元素，但支持自定义标记。

Dropdown Button

可以对 .btn 类进行一些标记更改，从而将其转换为下拉菜单/切换按钮。以下示例演示如何将其与 <button> 元素搭配使用。

Example

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

<!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>

Dropdown link

尽管 <button> 是下拉切换首选的控件，但在某些情况下你必须使用 <a> 。如果你这样做，我们建议包含 role="button" 属性，以便为像屏幕阅读器这样的辅助技术清晰地解释控件的功能。

Example

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

<!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>

Variant

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

Example

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

<!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>

Split button

与单个按钮下拉菜单类似，拆分按钮下拉菜单是通过使用相同的语法来制作的，但添加了 .dropdown-toggle-split 以便在下拉插入符号周围留出足够的空间。

使用此附加类可以将插入符号两侧的水平填充减少 25％，并移除添加到常规按钮下拉菜单的左外边距。这些附加更改使拆分按钮上的插入符号居中对齐，并且为按钮控件旁边提供一个适当大小的目标区域。

Example

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

<!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>

Sizing

下拉菜单可以使用任何大小的按钮，包括默认按钮和拆分下拉按钮。

Large dropdown button

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

Example

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

<!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>

Small dropdown button

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

Example

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

<!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>

Dark dropdown

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

5.3.0 版中的组件深色变体已弃用，并引入了颜色模式。不要添加 .dropdown-menu-dark ，而应在根元素、父包装或组件本身上设置 data-bs-theme="dark" 。

Example

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

<!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>

并将它放置在导航栏中使用：

Example

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

<!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>

Directions

Centered dropdowns

在父级上使用 class .dropdown-center 将下拉菜单居中对齐在切换开关下方。

Example

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

    <!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

通过将 class .dropup 添加至父级类，可以在元素上方获取触发下拉菜单。

Example

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

<!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 centered

通过将 class .dropup-center 添加至 .dropup 类，可以在元素上方居中获取触发下拉菜单。

Example

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

<!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

通过将 class .dropend 添加至父级类，可以在元素右侧获取触发下拉菜单。

Example

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

<!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

通过将 class .dropstart 添加至父级类，可以在元素左侧获取触发下拉菜单。

Example

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

<!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>

Menu items

可以使用元素 <a> 和 <button> 来显示下拉菜单项。

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

Example

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

<!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> 元素的下拉菜单项：

Example

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

<!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

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

Example

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

    <!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

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

Example

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

<!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>

Menu alignment

默认情况下，下拉菜单从顶部向下定位 100%，并沿着其父级的左侧排列。
通过使用 .drop * 类，可以更改下拉菜单的方向。还可以通过一些其他修饰符类处理它们。
通过将 class .dropdown-menu-end 添加至 .dropdown-menu ，获取右对齐下拉菜单。
在 RTL 中使用 Bootstrap 时， .dropdown-menu-end 将出现在左侧。

Example

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

<!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>

Responsive alignment

要实现自适应对齐，添加 data-bs-display="static" 属性以禁用动态定位并使用自适应变体类。

添加 .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end 以将下拉菜单定位到指定断点的 right 中。

Example

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

<!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 以将下拉菜单对齐到指定断点或其出现的 left 中。

Example

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

<!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>

Alignment options

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

Example

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

<!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>

Menu content

Headers

添加 .dropdown-header 类以添加标头以标记下拉菜单的部分。

Example

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

<!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>

Dividers

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

Example

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

<!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>

Text

使用文本将随意文本放入下拉菜单中，并使用 spacing utilities 。请注意，可能需要其他大小样式以限制菜单的宽度。

Example

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

<!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>

Forms

添加或创建表单以进行下拉菜单功能，并使用任何 margin or padding utility 提供必要的负空间。

Example

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

<!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>

Dropdown options

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

Example

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

<!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>

Auto close behavior

当您单击下拉菜单内部或外部时，下拉菜单会自动关闭。通过使用 autoClose 选项，您可以更改下拉菜单的此行为。

Example

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

    <!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>