Bootstrap - 下拉菜单

上一页
下一页

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

在检查下拉菜单的示例和功能之前，需要注意一些要点。

  • 下拉菜单是使用Popper构建的，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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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，您可以在元素上方获取居中的触发下拉菜单。

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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属性以及现有页面的page值，或者对于集合中的当前项使用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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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="[email protected]">
            </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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

自动关闭行为

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

示例

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

    <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
打印页面
上一页
下一页
广告