下拉菜單（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>文本
將任意形式的文本放置在帶有文本的下拉菜單中，并使用間距工具。請注意，您可能需要其他大小調整樣式來約束菜單寬度。
<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>表單
將表單放入下拉菜單中，或將其放入下拉菜單中，然后使用邊距或填充實用程序為其提供所需的負空間。
<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作為第二個參數傳遞。函數必須返回一個包含兩個數字的數組：
有關更多信息，請參閱offset docs. |
popperConfig |
null | object | function | null |
更改Bootstrap的默認Popper配置，請參閱Popper的配置。 . 當一個函數被用來創建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...
})