下拉菜單（Dropdowns）

使用Bootstrap下拉菜單插件切換上下文覆蓋效果，顯示連接列表以及更多的內(nèi)容。

On this page

概述

下拉列表是可切換的上下文覆蓋，用于顯示鏈接列表等。它們與附帶的Bootstrap 下拉JavaScript插件交互。它們是通過點(diǎn)擊來切換的，而不是通過懸停來切換的；這是一個(gè)有意的設(shè)計(jì)決定。

下拉菜單是透過第三方插件Popper所建構(gòu)的，這提供了動(dòng)態(tài)位置及viewport的監(jiān)控。使用前請確認(rèn)popper.min.js 在Bootstrap的JavaScript之前，或者使用已經(jīng)包含Popper的bootstrap.bundle.min.js /bootstrap.bundle.js。因?yàn)椴恍枰獎(jiǎng)討B(tài)定位，Popper并沒有用于導(dǎo)航條下拉菜單的定位。

親和性

WAI-ARIA標(biāo)準(zhǔn)定義了一個(gè)實(shí)際的role=“menu”小部件，但這是特定于觸發(fā)動(dòng)作或功能的應(yīng)用程序類菜單的。ARIA菜單只能包含菜單項(xiàng)、復(fù)選框菜單項(xiàng)、單選按鈕菜單項(xiàng)、單選按鈕組和子菜單。

另一方面，Bootstrap的下拉列表被設(shè)計(jì)成通用的，并且適用于各種情況和標(biāo)記結(jié)構(gòu)。例如，可以創(chuàng)建包含其他輸入和表單控件（如搜索字段或登錄表單）的下拉列表。因此，Bootstrap并不期望（也不會(huì)自動(dòng)添加）真正的aria菜單所需的任何role和aria屬性。作者將不得不包括這些更具體的屬性本身。

但是，Bootstrap確實(shí)為大多數(shù)標(biāo)準(zhǔn)的鍵盤菜單交互添加了內(nèi)置支持，例如使用光標(biāo)鍵在單個(gè)下拉項(xiàng)元素之間移動(dòng)，并使用ESC鍵關(guān)閉菜單的功能。

示例

將下拉菜單的切換（按鈕或鏈接）和下拉菜單包裝在.dropdown中，或其他聲明position:relative；的元素中；?？梢詮腶或button元素觸發(fā)下拉列表，以更好地滿足您的潛在需求。這里顯示的示例在適當(dāng)?shù)牡胤绞褂谜Z義ul元素，但是支持自定義標(biāo)記。

單個(gè)按鈕

任何單個(gè).btn都可以變成一個(gè)下拉切換，并有一些標(biāo)記更改。下面是如何將它們與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>

最好的部分地方是，您也可以使用任何按鈕變體來實(shí)現(xiàn)這一點(diǎn)：

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

拆分按鈕

同樣的，透過與單個(gè)按鈕下拉菜單幾乎相同的標(biāo)記，創(chuàng)建分割按鈕下拉菜單，但是添加了.dropdown-toggle-split以在下拉插入符號(hào)做適當(dāng)間隔。

我們使用這個(gè)額外的class將插入符號(hào)的兩邊水平padding減少了25%，并移除了為常規(guī)按鈕下拉菜單添加的margin-left。這些額外的變化使插入符號(hào)集中在分割按鈕中，并在主按鈕旁邊提供適當(dāng)?shù)目臻g。

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

大小

按鈕下拉列表適用于所有大小的按鈕，包括默認(rèn)和拆分下拉按鈕。

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

深色下拉列表

選擇較暗的下拉菜單以匹配深色導(dǎo)航欄或自定義樣式，方法是將.dropdown menu dark添加到現(xiàn)有的.dropdown menu。不需要更改下拉項(xiàng)。

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

把它放在導(dǎo)航欄里：

<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時(shí)，方向是鏡像的，這意味著dropstart將出現(xiàn)在右側(cè)。

向上

通過將.dropup添加到父元素，觸發(fā)元素上方的下拉菜單。

<!-- 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添加到父元素，觸發(fā)元素右側(cè)的下拉菜單。

<!-- 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添加到父元素，觸發(fā)元素左側(cè)的下拉菜單。

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

在過去下拉菜單內(nèi)容必須是個(gè)鏈接，但v5不再是這樣?，F(xiàn)在您可以選擇在下拉菜單中使用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文本創(chuàng)建非交互式下拉項(xiàng)。您可以隨意使用自定義CSS或文本工具進(jìn)一步設(shè)計(jì)樣式。

<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添加到下拉列表中的項(xiàng)以將其設(shè)置為活動(dòng)樣式。要將活動(dòng)狀態(tài)傳遞給無障礙請使用aria-current屬性并將page上的屬性設(shè)為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添加到下拉列表中的項(xiàng)以將其樣式設(shè)置為禁用。

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

默認(rèn)情況下，下拉菜單自動(dòng)定位在距父菜單頂部100%的位置，并沿父菜單的左側(cè)。你可以用directive.drop*類來改變這一點(diǎn)，但是你也可以用附加的修飾符類來控制它們。

將.dropdown menu添加到.dropdown menu以右對齊下拉菜單。在RTL中使用引導(dǎo)時(shí)，方向是鏡像的，這意味著下拉菜單結(jié)束將出現(xiàn)在左側(cè)。

注意！ 下拉菜單的定位得益于Popper，除非它們包含在導(dǎo)航欄中。

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

響應(yīng)式對齊

如果要使用響應(yīng)式對齊，請通過添加data bs display=“static”屬性禁用動(dòng)態(tài)定位，并使用響應(yīng)式變量類。

T要將下拉菜單與給定斷點(diǎn)或更大斷點(diǎn)右對齊，請?zhí)砑?下拉菜單.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>

要將下拉菜單與給定斷點(diǎn)或更大斷點(diǎn)左對齊，請?zhí)砑?code>.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”屬性，因?yàn)閚avbars中沒有使用Popper。

對齊選項(xiàng)

考慮到上面顯示的大多數(shù)選項(xiàng)，這里有一個(gè)綜合演示，在一個(gè)地方有各種下拉對齊選項(xiàng)的下拉列表菜單。

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

頭部

在任何下拉菜單中添加標(biāo)題以標(biāo)記操作的各個(gè)部分。

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

分隔

用分隔符分隔相關(guān)菜單項(xiàng)組。

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

文本

將任意形式的文本放置在帶有文本的下拉菜單中，并使用間距工具。請注意，您可能需要其他大小調(diào)整樣式來約束菜單寬度。

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

表單

將表單放入下拉菜單中，或?qū)⑵浞湃胂吕藛沃?，然后使用邊距或填充?shí)用程序?yàn)槠涮峁┧璧呢?fù)空間。

<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;
}
}
}

用法

通過數(shù)據(jù)屬性或JavaScript，下拉插件通過切換parent.dropdown菜單上的.show類來切換隱藏內(nèi)容（下拉菜單）。data bs toggle=“dropdown”屬性依賴于關(guān)閉應(yīng)用程序級(jí)別的下拉菜單，因此最好始終使用它。

在支持觸摸的設(shè)備上，打開下拉列表會(huì)將空mouseover處理程序添加到元素的直接子級(jí)。這一公認(rèn)的丑陋的黑客行為對于解決iOS事件委托中的一個(gè)怪癖是必要的，否則會(huì)阻止在下拉列表之外的任何地方點(diǎn)擊觸發(fā)關(guān)閉下拉列表的代碼。關(guān)閉下拉列表后，這些額外的空mouseover處理程序?qū)⒈粍h除。

通過數(shù)據(jù)屬性

將數(shù)據(jù)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調(diào)用下拉列表：

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})

仍然需要`data-bs-toggle="dropdown"`

無論您是通過JavaScript調(diào)用dropdown還是使用dataapi，都需要在dropdown的觸發(fā)器元素上顯示data bs toggle=“dropdown”。

選項(xiàng)

選項(xiàng)可以通過數(shù)據(jù)屬性或JavaScript傳遞。對于數(shù)據(jù)屬性，將選項(xiàng)名稱附加到data bs-，如data bs offset=“”中所示。

Name	Type	Default	Description
`boundary`	string \| element	`'clippingParents'`	下拉菜單的溢出約束邊界。默認(rèn)情況下，它是'clippingParents'，可以接受HTMLElement引用（僅限于JavaScript）。有關(guān)更多信息，請參閱文件。 preventOverflow docs.
`reference`	string \| element \| object	`'toggle'`	下拉菜單的引用元素。接受“toggle”、“parent”、HTMLElement引用或提供getBoundingClientRect的對象的值。有關(guān)更多信息，請參閱Popper的構(gòu)造函數(shù)文檔和虛擬元素文檔。 constructor docs and virtual element docs.
`display`	string	`'dynamic'`	默認(rèn)情況下，我們使用Popper進(jìn)行動(dòng)態(tài)定位。使用static禁用此功能。
`offset`	array \| string \| function	`[0, 2]`	下拉列表相對于其目標(biāo)的偏移量。您可以用逗號(hào)分隔的值在數(shù)據(jù)屬性中傳遞字符串，例如：data bs offset=“10,20” 當(dāng)一個(gè)函數(shù)用于確定偏移量時(shí)，調(diào)用它的第一個(gè)參數(shù)是包含popper放置、引用和popper rects的對象。觸發(fā)元素DOM node作為第二個(gè)參數(shù)傳遞。函數(shù)必須返回一個(gè)包含兩個(gè)數(shù)字的數(shù)組： `[skidding, distance]`. 有關(guān)更多信息，請參閱offset docs.
`popperConfig`	null \| object \| function	`null`	更改Bootstrap的默認(rèn)Popper配置，請參閱Popper的配置。 . 當(dāng)一個(gè)函數(shù)被用來創(chuàng)建Popper配置時(shí)，它被一個(gè)包含引導(dǎo)的默認(rèn)Popper配置的對象調(diào)用。它可以幫助您使用默認(rèn)配置并將其與您自己的配置合并。函數(shù)必須返回Popper的配置對象。

與popperConfig一起使用

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

方法

Method	Description
`toggle`	切換給定導(dǎo)航欄或選項(xiàng)卡式導(dǎo)航的下拉菜單。
`show`	顯示給定導(dǎo)航欄或選項(xiàng)卡式導(dǎo)航的下拉菜單。
`hide`	隱藏給定導(dǎo)航欄或選項(xiàng)卡式導(dǎo)航的下拉菜單。
`update`	更新元素下拉列表的位置。
`dispose`	銷毀元素的下拉列表(刪除DOM元素上存儲(chǔ)的數(shù)據(jù)）
`getInstance`	靜態(tài)方法，允許您獲取與DOM元素關(guān)聯(lián)的下拉實(shí)例。

事件

所有的下拉事件都在toggling元素上觸發(fā)，然后彈出。因此，您還可以在.dropdown菜單的父元素上添加事件偵聽器。hide.bs.dropdown 以及hidden.bs.dropdown 事件具有clickEvent屬性（僅當(dāng)原始事件類型為click時(shí)），該屬性包含click事件的事件對象。

Method	Description
`show.bs.dropdown`	當(dāng)調(diào)用show instance方法時(shí)，dropdown立即激發(fā)。
`shown.bs.dropdown`	當(dāng)下拉列表對用戶可見并且CSS轉(zhuǎn)換完成時(shí)激發(fā)。
`hide.bs.dropdown`	用hide instance方法后立即激發(fā)。
`hidden.bs.dropdown`	當(dāng)下拉列表對用戶隱藏完成并且CSS轉(zhuǎn)換完成時(shí)激發(fā)。

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})

下拉菜單（Dropdowns）

概述

親和性

示例

單個(gè)按鈕

拆分按鈕

大小

深色下拉列表

方向

RTL

向上

向右

向左

菜單項(xiàng)

激活

禁用

菜單對齊

響應(yīng)式對齊

對齊選項(xiàng)

菜單內(nèi)容

頭部

Dropdown header

分隔

文本

表單

下拉選項(xiàng)