第23節(jié) Bootstrap5下拉菜單組件用法
On this page
23.1 Bootstrap5下拉菜單組件
下拉菜單（Dropdowns）和表單里面的下拉列表（Select）具有很多外觀上的相似性，但卻有著本質(zhì)的不同，下拉列表使用的是Select表單，而下拉菜單（Dropdowns）使用的是div和css實(shí)現(xiàn)。
下拉列表是可切換的上下文覆蓋，用于顯示鏈接列表等。它們與附帶的Bootstrap 下拉JavaScript插件交互。它們是通過(guò)點(diǎn)擊來(lái)切換的，而不是通過(guò)懸停來(lái)切換的；這是一個(gè)有意的設(shè)計(jì)決定，如果你需要懸停切換，可以通過(guò)js實(shí)現(xiàn)。
23.2 示例
23.2.1 單個(gè)按鈕
將下拉菜單的切換（按鈕或鏈接）和下拉菜單包裝在dropdown中就變成了下拉菜單。
可以從a或button元素觸發(fā)下拉列表，以更好地滿足您的潛在需求。這里顯示的示例在適當(dāng)?shù)牡胤绞褂谜Z(yǔ)義ul元素，但是支持自定義標(biāo)記。
任何單個(gè).btn都可以變成一個(gè)下拉切換，并有一些標(biāo)記更改。下面是如何將它們與button元素一起使用：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>下拉菜單</title>
</head>
<body>
<div class="container">
<br><br><br>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
button下拉菜單
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">子菜單1</a></li>
<li><a class="dropdown-item" href="#">子菜單2</a></li>
<li><a class="dropdown-item" href="#">子菜單3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">子菜單4</a></li>
</ul>
</div>
<br><br><br>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
a 鏈接下拉菜單
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">子菜單1</a></li>
<li><a class="dropdown-item" href="#">子菜單2</a></li>
<li><a class="dropdown-item" href="#">子菜單3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">子菜單4</a></li>
</ul>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼兩種菜單從外觀和體驗(yàn)上看是沒(méi)有任何區(qū)別的。
23.2.2 按鈕組
按鈕組就是同一行中同時(shí)存在幾個(gè)按鈕，默認(rèn)情況下，由于菜單默認(rèn)是獨(dú)占一行的，兩個(gè)菜單靠在一起不美觀，故上面的例子加了幾個(gè)換行。
按鈕組的使用十分簡(jiǎn)單，直接把按鈕的<div class="dropdown">換成<div class="btn-group">，并不是把單個(gè)按鈕放在一個(gè)按鈕組容器中，這點(diǎn)一定要注意。
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
button下拉菜單
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">子菜單1</a></li>
<li><a class="dropdown-item" href="#">子菜單2</a></li>
<li><a class="dropdown-item" href="#">子菜單3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">子菜單4</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
a 鏈接下拉菜單
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">子菜單1</a></li>
<li><a class="dropdown-item" href="#">子菜單2</a></li>
<li><a class="dropdown-item" href="#">子菜單3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">子菜單4</a></li>
</ul>
</div>
復(fù)制代碼23.2.3 分割按鈕
默認(rèn)情況下，點(diǎn)擊按鈕任何區(qū)域，都會(huì)彈出下拉菜單，但是通過(guò)往添加dropdown-toggle-split以在下拉插入符號(hào)做適當(dāng)間隔，這插入符號(hào)的兩邊水平padding減少了25%，并移除了為常規(guī)按鈕下拉菜單添加的margin-left。這些額外的變化使插入符號(hào)集中在分割按鈕中，并在主按鈕旁邊提供適當(dāng)?shù)目臻g。
分割按鈕只能用于按鈕組，只有點(diǎn)擊按鈕上的三角符號(hào)，下拉菜單才會(huì)彈出，點(diǎn)按鈕其他地方都不在彈出。 下面代碼第一個(gè)是普通按鈕，第二個(gè)是分割按鈕
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
普通下拉菜單
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">子菜單1</a></li>
<li><a class="dropdown-item" href="#">子菜單2</a></li>
<li><a class="dropdown-item" href="#">子菜單3</a></li>
</ul>
</div>
<br>
<div class="btn-group">
<button type="button" class="btn btn-secondary">分割下拉菜單</button>
<button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">子菜單1</a></li>
<li><a class="dropdown-item" href="#">子菜單2</a></li>
<li><a class="dropdown-item" href="#">子菜單3</a></li>
</ul>
</div>
復(fù)制代碼23.3 下拉菜單的大小
將或者加到button按鈕類(lèi)中，就可以實(shí)現(xiàn)按鈕大小的設(shè)置，雖然例子中用的是按鈕組，但對(duì)單個(gè)按鈕和分割按鈕同樣適用。 下面是三種按鈕大小比較：
<div class="btn-group">
<button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
sm下拉菜單
</button>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
下拉菜單
</button>
</div>
<div class="btn-group">
<button class="btn btn-lg btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
lg下拉菜單
</button>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button">
sm分割按鈕
</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>
</div>
復(fù)制代碼注意：后面一般情況下，為了節(jié)儉代碼，對(duì)于不需要彈出選項(xiàng)的菜單都省略菜單部分。
23.4 下拉菜單的顏色
下拉菜單的顏色與按鈕的顏色完全一致，以下是各種顏色的下拉菜單：
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
primary
</button>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
secondary
</button>
</div>
<div class="btn-group">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
success
</button>
</div>
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
danger
</button>
</div>
<div class="btn-group">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
warning
</button>
</div>
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
info
</button>
</div>
<div class="btn-group">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
light
</button>
</div>
<div class="btn-group">
<button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
dark
</button>
</div>
<div class="btn-group">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
link
</button>
</div>
復(fù)制代碼23.5 深色下拉列表
23.5.1 深色下拉列表
選擇較暗的下拉菜單以匹配深色導(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">
深色下拉菜單
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action選項(xiàng)1</a></li>
<li><a class="dropdown-item" href="#">選項(xiàng)2</a></li>
<li><a class="dropdown-item" href="#">選項(xiàng)3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">選項(xiàng)4</a></li>
</ul>
</div>
復(fù)制代碼23.5.2 含深色下拉列表的導(dǎo)航
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</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">
深色下拉菜單
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action選項(xiàng)1</a></li>
<li><a class="dropdown-item" href="#">選項(xiàng)2</a></li>
<li><a class="dropdown-item" href="#">選項(xiàng)3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">選項(xiàng)4</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
復(fù)制代碼23.6 菜單項(xiàng)彈出方向
下拉菜單默認(rèn)的選項(xiàng)默認(rèn)是向下彈出的，通過(guò)在下拉菜單的容器中添加dropup、dropstart、dropend，可以分別設(shè)置向上、向左、向右彈出。
這幾個(gè)類(lèi)的用法很簡(jiǎn)單，直接加在容器上即可。需要注意的是，這幾個(gè)方向設(shè)置都是在空間足夠情況下說(shuō)的，如果向上彈出，但是上面空間不夠，則會(huì)自動(dòng)改為向下彈出。向左、向右也是如此
<div class="text-center">
<br><br><br><br><br><br>
<div class="dropdown dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
向上
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item active" href="#">子菜單1</a></li>
<li><a class="dropdown-item" href="#">子菜單2</a></li>
<li><a class="dropdown-item" href="#">子菜單3</a></li>
</ul>
</div> <br><br><br>
<div class="dropdown dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
向左
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">子菜單1</a></li>
<li><a class="dropdown-item" href="#">子菜單2</a></li>
<li><a class="dropdown-item" href="#">子菜單3</a></li>
</ul>
</div>
<br><br><br>
<div class="dropdown dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
向右
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<li><a class="dropdown-item active" href="#">子菜單1</a></li>
<li><a class="dropdown-item" href="#">子菜單2</a></li>
<li><a class="dropdown-item" href="#">子菜單3</a></li>
</ul>
</div>
</div>
復(fù)制代碼23.7 菜單項(xiàng)
23.7.1 使用其他內(nèi)容
在過(guò)去下拉菜單內(nèi)容必須是個(gè)鏈接，但Bootstrap5不再是這樣。現(xiàn)在您可以選擇在下拉菜單中使用button元素，而不是僅使用a。
也可以使用dropdown-item文本創(chuàng)建非交互式下拉項(xiàng)。您可以隨意使用自定義CSS或文本工具進(jìn)一步設(shè)計(jì)樣式。默認(rèn)情況下，使用鏈接和按鈕選項(xiàng)，鼠標(biāo)懸停在選項(xiàng)上會(huì)有陰影，文本選項(xiàng)五陰影效果。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
其他選項(xiàng)下拉菜單
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<li><button class="dropdown-item" type="button">按鈕選項(xiàng)1</button></li>
<li><button class="dropdown-item" type="button">按鈕選項(xiàng)2</button></li>
<li><span class="dropdown-item-text">文本選項(xiàng)</span></li>
</ul>
</div>
復(fù)制代碼23.7.2 激活禁用
將active添加到下拉列表中的項(xiàng)以將其設(shè)置為活動(dòng)樣式。 將disabled添加到下拉列表中的項(xiàng)以將其樣式設(shè)置為禁用。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
下拉菜單
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">激活選項(xiàng)</a></li>
<li><a class="dropdown-item" href="#">普通選項(xiàng)</a></li>
<li><a class="dropdown-item disabled" href="#">禁用選項(xiàng)</a></li>
</ul>
</div>
復(fù)制代碼23.7.3 菜單項(xiàng)右對(duì)齊
默認(rèn)情況下，下拉菜單自動(dòng)定位在距父菜單頂部100%的位置，并沿父菜單的左側(cè)。你可以將dropdown-menu-end添加到dropdown-menu以右對(duì)齊下拉菜單。
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
菜單項(xiàng)右對(duì)齊 太短了看不出
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">子菜單1</a></li>
<li><a class="dropdown-item" href="#">子菜單2</a></li>
<li><a class="dropdown-item" href="#">子菜單3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">子菜單4</a></li>
</ul>
</div>
復(fù)制代碼23.7.4 菜單項(xiàng)響應(yīng)式右對(duì)齊
如果要使用響應(yīng)式對(duì)齊，請(qǐng)通過(guò)在button添加 data-bs-display="static"屬性禁用動(dòng)態(tài)定位，并使用響應(yīng)式變量類(lèi)。 在dropdown-menu添加dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>下拉菜單</title>
</head>
<body>
<div class="container">
<br><br><br>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
菜單項(xiàng)響應(yīng)式右對(duì)齊，改變?yōu)g覽器大小觀看
</button>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">子菜單1</a></li>
<li><a class="dropdown-item" href="#">子菜單2</a></li>
<li><a class="dropdown-item" href="#">子菜單3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">子菜單4</a></li>
</ul>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼這個(gè)在lg斷點(diǎn)前左對(duì)齊，斷點(diǎn)后右對(duì)齊，比較簡(jiǎn)單就不演示了，提供完整代碼，有興趣的試一下。
23.7.5 菜單項(xiàng)放入表單
將表單放入下拉菜單中，或?qū)⑵浞湃胂吕藛沃校缓笫褂眠吘嗷蛱畛鋵?shí)用程序?yàn)槠涮峁┧璧呢?fù)空間。
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
菜單項(xiàng)包含登錄表單
</button>
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">電子郵箱</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">密碼</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">
記住狀態(tài)
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">登錄</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">還沒(méi)賬戶，點(diǎn)此注冊(cè)</a>
<a class="dropdown-item" href="#">忘記密碼</a>
</div>
</div>
復(fù)制代碼限于篇幅，本文對(duì)下拉菜單做了簡(jiǎn)要介紹，一般情況下足夠平常的使用了，如果你需要更詳細(xì)的了解下拉菜單用法，請(qǐng)參考Bootstrap中文文檔 >組件 >下拉菜單相關(guān)章節(jié)。
今天的課程就到這里，請(qǐng)關(guān)注我，及時(shí)學(xué)習(xí) 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第24節(jié) Bootstrap5分頁(yè)導(dǎo)航Pagination組件用法，從字面也可以看出，按鈕組就是多個(gè)按鈕的組合。
如果這篇文章對(duì)你有幫助，記得隨手點(diǎn)贊哦！