下拉菜单（Dropdowns）

使用Bootstrap下拉菜单插件切换上下文覆盖效果，显示连接列表以及更多的内容。

On this page

概述

下拉列表是可切换的上下文覆盖，用于显示链接列表等。它们与附带的Bootstrap 下拉JavaScript插件交互。它们是通过点击来切换的，而不是通过悬停来切换的；这是一个有意的设计决定。

下拉菜单是透过第三方插件Popper所建构的，这提供了动态位置及viewport的监控。使用前请确认popper.min.js 在Bootstrap的JavaScript之前，或者使用已经包含Popper的bootstrap.bundle.min.js /bootstrap.bundle.js。因为不需要动态定位，Popper并没有用于导航条下拉菜单的定位。

亲和性

WAI-ARIA标准定义了一个实际的role=“menu”小部件，但这是特定于触发动作或功能的应用程序类菜单的。ARIA菜单只能包含菜单项、复选框菜单项、单选按钮菜单项、单选按钮组和子菜单。

另一方面，Bootstrap的下拉列表被设计成通用的，并且适用于各种情况和标记结构。例如，可以创建包含其他输入和表单控件（如搜索字段或登录表单）的下拉列表。因此，Bootstrap并不期望（也不会自动添加）真正的aria菜单所需的任何role和aria属性。作者将不得不包括这些更具体的属性本身。

但是，Bootstrap确实为大多数标准的键盘菜单交互添加了内置支持，例如使用光标键在单个下拉项元素之间移动，并使用ESC键关闭菜单的功能。

示例

将下拉菜单的切换（按钮或链接）和下拉菜单包装在.dropdown中，或其他声明position:relative；的元素中；。可以从a或button元素触发下拉列表，以更好地满足您的潜在需求。这里显示的示例在适当的地方使用语义ul元素，但是支持自定义标记。

单个按钮

任何单个.btn都可以变成一个下拉切换，并有一些标记更改。下面是如何将它们与button元素一起使用：

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
        </div>

或者是透过a元素：

<div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
        </a>
        
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
        </div>

最好的部分地方是，您也可以使用任何按钮变体来实现这一点： 

<!-- Example single danger button -->
        <div class="btn-group">
        <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Action
        </button>
        <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
        </div>

拆分按钮

同样的，透过与单个按钮下拉菜单几乎相同的标记，创建分割按钮下拉菜单，但是添加了.dropdown-toggle-split以在下拉插入符号做适当间隔。

我们使用这个额外的class将插入符号的两边水平padding减少了25%，并移除了为常规按钮下拉菜单添加的margin-left。这些额外的变化使插入符号集中在分割按钮中，并在主按钮旁边提供适当的空间。

<!-- Example split danger button -->
        <div class="btn-group">
        <button type="button" class="btn btn-danger">Action</button>
        <button type="button" class="btn btn-danger 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="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
        </div>

大小

按钮下拉列表适用于所有大小的按钮，包括默认和拆分下拉按钮。

<!-- Large button groups (default and split) -->
        <div class="btn-group">
        <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Large button
        </button>
        <ul class="dropdown-menu">
        ...
        </ul>
        </div>
        <div class="btn-group">
        <button class="btn btn-secondary btn-lg" type="button">
        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">
        ...
        </ul>
        </div>
        
<div class="btn-group">
        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Small button
        </button>
        <ul class="dropdown-menu">
        ...
        </ul>
        </div>
        <div class="btn-group">
        <button class="btn btn-secondary btn-sm" type="button">
        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">
        ...
        </ul>
        </div>

深色下拉列表

选择较暗的下拉菜单以匹配深色导航栏或自定义样式，方法是将.dropdown menu dark添加到现有的.dropdown menu。不需要更改下拉项。

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
        </button>
        <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
        <li><a class="dropdown-item active" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
        </div>

把它放在导航栏里：

<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">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        </div>
        </div>
        </nav>

方向

RTL

在RTL中使用Bootstrap时，方向是镜像的，这意味着dropstart将出现在右侧。

向上

通过将.dropup添加到父元素，触发元素上方的下拉菜单。 

<!-- Default dropup button -->
        <div class="btn-group dropup">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup
        </button>
        <ul class="dropdown-menu">
        <!-- Dropdown menu links -->
        </ul>
        </div>
        
        <!-- Split dropup button -->
        <div class="btn-group dropup">
        <button type="button" class="btn btn-secondary">
        Split dropup
        </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">
        <!-- Dropdown menu links -->
        </ul>
        </div>

向右

通过将.dropend添加到父元素，触发元素右侧的下拉菜单。 

<!-- Default dropend button -->
        <div class="btn-group dropend">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropright
        </button>
        <ul class="dropdown-menu">
        <!-- Dropdown menu links -->
        </ul>
        </div>
        
        <!-- Split dropend button -->
        <div class="btn-group dropend">
        <button type="button" class="btn btn-secondary">
        Split dropend
        </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 Dropright</span>
        </button>
        <ul class="dropdown-menu">
        <!-- Dropdown menu links -->
        </ul>
        </div>

向左

通过将.dropstart添加到父元素，触发元素左侧的下拉菜单。

<!-- Default dropstart button -->
        <div class="btn-group dropstart">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropstart
        </button>
        <ul class="dropdown-menu">
        <!-- Dropdown menu links -->
        </ul>
        </div>
        
        <!-- Split dropstart button -->
        <div class="btn-group">
        <div class="btn-group dropstart" role="group">
        <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">
        <!-- Dropdown menu links -->
        </ul>
        </div>
        <button type="button" class="btn btn-secondary">
        Split dropstart
        </button>
        </div>

在过去下拉菜单内容必须是个链接，但v5不再是这样。现在您可以选择在下拉菜单中使用button元素，而不是仅使用a。

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li><button class="dropdown-item" type="button">Action</button></li>
        <li><button class="dropdown-item" type="button">Another action</button></li>
        <li><button class="dropdown-item" type="button">Something else here</button></li>
        </ul>
        </div>

也可以使用.dropdown item文本创建非交互式下拉项。您可以随意使用自定义CSS或文本工具进一步设计样式。

<ul class="dropdown-menu">
        <li><span class="dropdown-item-text">Dropdown item text</span></li>
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>

激活

将.active添加到下拉列表中的项以将其设置为活动样式。要将活动状态传递给无障碍请使用aria-current属性并将page上的属性设为true。

<ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Regular link</a></li>
        <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
        <li><a class="dropdown-item" href="#">Another link</a></li>
        </ul>

禁用

将.disabled添加到下拉列表中的项以将其样式设置为禁用。

<ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Regular link</a></li>
        <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
        <li><a class="dropdown-item" href="#">Another link</a></li>
        </ul>

默认情况下，下拉菜单自动定位在距父菜单顶部100%的位置，并沿父菜单的左侧。你可以用directive.drop*类来改变这一点，但是你也可以用附加的修饰符类来控制它们。

将.dropdown menu添加到.dropdown menu以右对齐下拉菜单。在RTL中使用引导时，方向是镜像的，这意味着下拉菜单结束将出现在左侧。

注意！ 下拉菜单的定位得益于Popper，除非它们包含在导航栏中。 
<div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Right-aligned menu example
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
        <li><button class="dropdown-item" type="button">Action</button></li>
        <li><button class="dropdown-item" type="button">Another action</button></li>
        <li><button class="dropdown-item" type="button">Something else here</button></li>
        </ul>
        </div>

响应式对齐

如果要使用响应式对齐，请通过添加data bs display=“static”属性禁用动态定位，并使用响应式变量类。

T要将下拉菜单与给定断点或更大断点右对齐，请添加.下拉菜单.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end。 

<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 when large screen
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end">
        <li><button class="dropdown-item" type="button">Action</button></li>
        <li><button class="dropdown-item" type="button">Another action</button></li>
        <li><button class="dropdown-item" type="button">Something else here</button></li>
        </ul>
        </div>

要将下拉菜单与给定断点或更大断点左对齐，请添加.dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start。 

<div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
        Right-aligned but left aligned when large screen
        </button>
        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
        <li><button class="dropdown-item" type="button">Action</button></li>
        <li><button class="dropdown-item" type="button">Another action</button></li>
        <li><button class="dropdown-item" type="button">Something else here</button></li>
        </ul>
        </div>

注意，您不需要向navbars中的下拉按钮添加data bs display=“static”属性，因为navbars中没有使用Popper。

对齐选项

考虑到上面显示的大多数选项，这里有一个综合演示，在一个地方有各种下拉对齐选项的下拉列表菜单。

<div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</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="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        </ul>
        </div>
        
        <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, right-aligned lg
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        </ul>
        </div>
        
        <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
        Right-aligned, left-aligned lg
        </button>
        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        </ul>
        </div>
        
        <div class="btn-group dropstart">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropstart
        </button>
        <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        </ul>
        </div>
        
        <div class="btn-group dropend">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropend
        </button>
        <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        </ul>
        </div>
        
        <div class="btn-group dropup">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup
        </button>
        <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        </ul>
        </div>

菜单内容

头部

在任何下拉菜单中添加标题以标记操作的各个部分。 

<ul class="dropdown-menu">
        <li><h6 class="dropdown-header">Dropdown header</h6></li>
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        </ul>

分隔

用分隔符分隔相关菜单项组。 

<ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>

文本

将任意形式的文本放置在带有文本的下拉菜单中，并使用间距工具。请注意，您可能需要其他大小调整样式来约束菜单宽度。

Some example text that's free-flowing within the dropdown menu.

And this is more example text. 

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
        <p>
        Some example text that's free-flowing within the dropdown menu.
        </p>
        <p class="mb-0">
        And this is more example text.
        </p>
        </div>

表单

将表单放入下拉菜单中，或将其放入下拉菜单中，然后使用边距或填充实用程序为其提供所需的负空间。

New around here? Sign up Forgot password? 
<div class="dropdown-menu">
        <form class="px-4 py-3">
        <div class="mb-3">
        <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.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>
        <div class="mb-3">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="dropdownCheck">
          <label class="form-check-label" for="dropdownCheck">
            Remember me
          </label>
        </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">New around here? Sign up</a>
        <a class="dropdown-item" href="#">Forgot password?</a>
        </div>
<form class="dropdown-menu p-4">
        <div class="mb-3">
        <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
        </div>
        <div class="mb-3">
        <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
        </div>
        <div class="mb-3">
        <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
        </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
        </form>

使用data-bs-offset或data-bs-reference来改变下拉菜单的位置。 

<div class="d-flex">
        <div class="dropdown me-1">
        <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
        Offset
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
        </div>
        <div class="btn-group">
        <button type="button" class="btn btn-secondary">Reference</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
        <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
        </div>
        </div>

Sass

Variables

Variables for all dropdowns:

$dropdown-min-width:                10rem;
        $dropdown-padding-x:                0;
        $dropdown-padding-y:                .5rem;
        $dropdown-spacer:                   .125rem;
        $dropdown-font-size:                $font-size-base;
        $dropdown-color:                    $body-color;
        $dropdown-bg:                       $white;
        $dropdown-border-color:             rgba($black, .15);
        $dropdown-border-radius:            $border-radius;
        $dropdown-border-width:             $border-width;
        $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
        $dropdown-divider-bg:               $dropdown-border-color;
        $dropdown-divider-margin-y:         $spacer / 2;
        $dropdown-box-shadow:               $box-shadow;
        
        $dropdown-link-color:               $gray-900;
        $dropdown-link-hover-color:         shade-color($gray-900, 10%);
        $dropdown-link-hover-bg:            $gray-200;
        
        $dropdown-link-active-color:        $component-active-color;
        $dropdown-link-active-bg:           $component-active-bg;
        
        $dropdown-link-disabled-color:      $gray-500;
        
        $dropdown-item-padding-y:           $spacer / 4;
        $dropdown-item-padding-x:           $spacer;
        
        $dropdown-header-color:             $gray-600;
        $dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

Variables for the dark dropdown:

$dropdown-dark-color:               $gray-300;
        $dropdown-dark-bg:                  $gray-800;
        $dropdown-dark-border-color:        $dropdown-border-color;
        $dropdown-dark-divider-bg:          $dropdown-divider-bg;
        $dropdown-dark-box-shadow:          null;
        $dropdown-dark-link-color:          $dropdown-dark-color;
        $dropdown-dark-link-hover-color:    $white;
        $dropdown-dark-link-hover-bg:       rgba($white, .15);
        $dropdown-dark-link-active-color:   $dropdown-link-active-color;
        $dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
        $dropdown-dark-link-disabled-color: $gray-500;
        $dropdown-dark-header-color:        $gray-500;

Variables for the CSS-based carets that indicate a dropdown’s interactivity:

$caret-width:                 .3em;
        $caret-vertical-align:        $caret-width * .85;
        $caret-spacing:               $caret-width * .85;

Mixins

Mixins are used to generate the CSS-based carets and can be found in scss/mixins/_caret.scss.

@mixin caret-down {
        border-top: $caret-width solid;
        border-right: $caret-width solid transparent;
        border-bottom: 0;
        border-left: $caret-width solid transparent;
        }
        
        @mixin caret-up {
        border-top: 0;
        border-right: $caret-width solid transparent;
        border-bottom: $caret-width solid;
        border-left: $caret-width solid transparent;
        }
        
        @mixin caret-end {
        border-top: $caret-width solid transparent;
        border-right: 0;
        border-bottom: $caret-width solid transparent;
        border-left: $caret-width solid;
        }
        
        @mixin caret-start {
        border-top: $caret-width solid transparent;
        border-right: $caret-width solid;
        border-bottom: $caret-width solid transparent;
        }
        
        @mixin caret($direction: down) {
        @if $enable-caret {
        &::after {
        display: inline-block;
        margin-left: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @if $direction == down {
          @include caret-down();
        } @else if $direction == up {
          @include caret-up();
        } @else if $direction == end {
          @include caret-end();
        }
        }
        
        @if $direction == start {
        &::after {
          display: none;
        }
        
        &::before {
          display: inline-block;
          margin-right: $caret-spacing;
          vertical-align: $caret-vertical-align;
          content: "";
          @include caret-start();
        }
        }
        
        &:empty::after {
        margin-left: 0;
        }
        }
        }

用法

通过数据属性或JavaScript，下拉插件通过切换parent.dropdown菜单上的.show类来切换隐藏内容（下拉菜单）。data bs toggle=“dropdown”属性依赖于关闭应用程序级别的下拉菜单，因此最好始终使用它。

在支持触摸的设备上，打开下拉列表会将空mouseover处理程序添加到元素的直接子级。这一公认的丑陋的黑客行为对于解决iOS事件委托中的一个怪癖是必要的，否则会阻止在下拉列表之外的任何地方点击触发关闭下拉列表的代码。关闭下拉列表后，这些额外的空mouseover处理程序将被删除。

通过数据属性

将数据bs toggle=“dropdown”添加到链接或按钮以切换下拉列表。

<div class="dropdown">
        <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown trigger
        </button>
        <ul class="dropdown-menu" aria-labelledby="dLabel">
        ...
        </ul>
        </div>

通过JavaScript

通过JavaScript调用下拉列表：

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
        var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
        return new bootstrap.Dropdown(dropdownToggleEl)
        })
仍然需要data-bs-toggle="dropdown"

无论您是通过JavaScript调用dropdown还是使用dataapi，都需要在dropdown的触发器元素上显示data bs toggle=“dropdown”。

选项

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到data bs-，如data bs offset=“”中所示。

Name Type Default Description
boundary string | element 'clippingParents' 下拉菜单的溢出约束边界。默认情况下，它是'clippingParents'，可以接受HTMLElement引用（仅限于JavaScript）。有关更多信息，请参阅文件。 preventOverflow docs.
reference string | element | object 'toggle' 下拉菜单的引用元素。接受“toggle”、“parent”、HTMLElement引用或提供getBoundingClientRect的对象的值。有关更多信息，请参阅Popper的构造函数文档和虚拟元素文档。 constructor docs and virtual element docs.
display string 'dynamic' 默认情况下，我们使用Popper进行动态定位。使用static禁用此功能。
offset array | string | function [0, 2]

下拉列表相对于其目标的偏移量。您可以用逗号分隔的值在数据属性中传递字符串，例如：data bs offset=“10,20”

当一个函数用于确定偏移量时，调用它的第一个参数是包含popper放置、引用和popper rects的对象。触发元素DOM node作为第二个参数传递。函数必须返回一个包含两个数字的数组： [skidding, distance].

有关更多信息，请参阅offset docs.
popperConfig null | object | function null

更改Bootstrap的默认Popper配置，请参阅Popper的配置。 Popper's configuration.

当一个函数被用来创建Popper配置时，它被一个包含引导的默认Popper配置的对象调用。它可以帮助您使用默认配置并将其与您自己的配置合并。函数必须返回Popper的配置对象。

与popperConfig一起使用

var dropdown = new bootstrap.Dropdown(element, {
        popperConfig: function (defaultBsPopperConfig) {
        // var newPopperConfig = {...}
            // use defaultBsPopperConfig if needed...
            // return newPopperConfig
          }
        })

方法

Method Description
toggle 切换给定导航栏或选项卡式导航的下拉菜单。
show 显示给定导航栏或选项卡式导航的下拉菜单。
hide 隐藏给定导航栏或选项卡式导航的下拉菜单。
update 更新元素下拉列表的位置。
dispose 销毁元素的下拉列表(删除DOM元素上存储的数据）
getInstance 静态方法，允许您获取与DOM元素关联的下拉实例。

事件

所有的下拉事件都在toggling元素上触发，然后弹出。因此，您还可以在.dropdown菜单的父元素上添加事件侦听器。hide.bs.dropdown 以及hidden.bs.dropdown 事件具有clickEvent属性（仅当原始事件类型为click时），该属性包含click事件的事件对象。

Method Description
show.bs.dropdown 当调用show instance方法时，dropdown立即激发。
shown.bs.dropdown 当下拉列表对用户可见并且CSS转换完成时激发。
hide.bs.dropdown 用hide instance方法后立即激发。
hidden.bs.dropdown 当下拉列表对用户隐藏完成并且CSS转换完成时激发。 
var myDropdown = document.getElementById('myDropdown')
        myDropdown.addEventListener('show.bs.dropdown', function () {
        // do something...
        })
返回顶部