Bootstrap5 下拉菜單
下拉菜單通常用于導(dǎo)航標(biāo)題內(nèi)，在用戶鼠標(biāo)懸?；騿螕粲|發(fā)元素時(shí)顯示相關(guān)鏈接列表。
基礎(chǔ)的下拉列表

<div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉按鈕</button><ul class="dropdown-menu"><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>

Bootstrap下拉菜單基本上有兩個(gè)組件–下拉觸發(fā)元素（可以是超鏈接或按鈕）和下拉菜單本身.dropdown類只是下拉菜單.
如需打開下拉菜單，使用設(shè)置.dropdown-toggle類，.dropdown-toggle類定義了觸發(fā)器元素，而觸發(fā)器元素上需要屬性data-bs-toggle="dropdown"來切換下拉菜單.
帶有.dropdown-menu類的<div>元素可構(gòu)建下拉菜單。然后將.dropdown-item類添加到下拉菜單中的每個(gè)元素（鏈接或按鈕）。

下拉列表分隔線
.dropdown-divider類用于通過水平細(xì)邊框分隔下拉菜單中的鏈接
.dropdown-header向下拉菜單的標(biāo)簽區(qū)域添加標(biāo)題

<div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉按鈕</button><ul class="dropdown-menu"><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 class="dropdown-divider">下拉菜單標(biāo)題</li><li><a class="dropdown-item" href="#">分離的鏈接</a></li></ul>
</div>

導(dǎo)航中的下拉菜單

<ul class="nav"><li class="nav-item"><a class="nav-link active" href="#">首頁</a></li><li class="nav-item"><a class="nav-link" href="#">學(xué)習(xí)</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">前端</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">HTML</a><li><li><a class="dropdown-item" href="#">HTML</a><li><li><a class="dropdown-item" href="#">HTML</a><li></ul></li><li class="nav-item"><a class="nav-link disabled" href="#">禁用</a></li>
</ul>

表單
HTML表單是網(wǎng)頁和應(yīng)用程序不可或缺的一部分。Bootstrap通過預(yù)定義的類集極大地簡化了表單控件（如標(biāo)簽、輸入字段、選擇框、文本區(qū)域、按鈕等）的樣式設(shè)置和對齊過程。
三種不同類型的表單布局：

• 垂直表單（默認(rèn)）
• 水平表單
• 內(nèi)聯(lián)表單

創(chuàng)建垂直表單布局
基本的表單結(jié)構(gòu)是Bootstrap自帶的，個(gè)別的表單控件自動(dòng)接收一些全局樣式，把標(biāo)簽和空間放在一個(gè)帶有class .form-group的

<form><div class="form-group"><label class="form-label">名稱</label><input type="text" class="form-control" placeholder="請輸入名稱"></div><div class="form-group"><label class="form-label">Email</label><input type="email" class="form-control" placeholder="Email"></div><button type="submit" class="btn btn-primary">提交</button>
</form>

創(chuàng)建內(nèi)聯(lián)表單
表單元素并排顯示，可以使用.row和.col

<form><div class="row"><div class="col"><input type="text" class="form-control" placeholder="請輸入名稱"></div><div class="col"><input type="email" class="form-control" placeholder="Email"></div></div>
</form>

表單控件尺寸
.form-control-lg或.form-control-sm更改.form-control輸入控件的大小

<input type="text" class="form-control form-control-lg" placeholder="大型輸入控件">
<input type="text" class="form-control" placeholder="普通輸入控件">
<input type="text" class="form-control form-control-sm" placeholder="小型輸入控件"> 

向表單控件添加幫助文本

<div class="row"><div class="col-auto"><label class="col-form-label" for="inputPassword">Password</label></div><div class="col-auto"><input type="password" class="form-control"></div><div class="col-auto"><span class="form-text">必須8-20個(gè)字符長.</span></div>
</div>

選擇菜單
通過將.form-select類添加到<select>元素

<select class="form-select"><option>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option><option>選項(xiàng)4</option>
</select>

選擇菜單的大小
使用.form-select-lg或.form-select-sm類來改變選擇菜單的大小

<select class="form-select form-select-lg"></select>
<select class="form-select form-select-sm"></select>

復(fù)選框和單選按鈕
復(fù)選框有不同的標(biāo)記，它們被設(shè)置了.form-check類的容器元素包圍.label設(shè)置.form-check-label類，而復(fù)選框和單選按鈕使用.form-check-input。希望默認(rèn)選中復(fù)選框，可以使用checked屬性。
復(fù)選框
使用class="form-check"的包裝元素，來確保標(biāo)簽和復(fù)選框有適當(dāng)?shù)耐膺吘?/p>

<div class="form-check"><input class="form-check-input" type="checkbox" checked><label class="form-check-label">選項(xiàng)1</label>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox"><label class="form-check-label">選項(xiàng)2</label>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox"><label class="form-check-label">選項(xiàng)3</label>
</div>

單選按鈕

<div class="form-check"><input class="form-check-input" type="radio" name="option1" checked>選項(xiàng)1<label class="form-check-label"></label>
</div>
<div class="form-check"><input class="form-check-input" type="radio" name="option1" checked>選項(xiàng)2<label class="form-check-label"></label>
</div>
<div class="form-check"><input class="form-check-input" type="radio" name="option1" checked>選項(xiàng)3<label class="form-check-label"></label>
</div>

撥動(dòng)開關(guān)
將復(fù)選框設(shè)置為切換開關(guān)的樣式，可以將.form-switch類與.form-check容器一起使用

<div class="form-switch"><input class="form-check-input" type="checkbox" checked><label class="form-check-label">開關(guān)</label>
</div>

滑塊
.form-range類添加到type="range"的input元素，可以設(shè)置范圍菜單的樣式

<label class="form-label">開關(guān)</label><input class="form-range" type="range" checked>

表單組
.input-group類是一種容器，通過在輸入字段的前面或后面添加圖標(biāo)、文本或按鈕作為“幫助文本”來增強(qiáng)輸入。.input-group-text類指定幫助文本的樣式.

<div class="input-group"><span class="input-group-text">用戶名</span><input type="text" class="form-control" placeholder="用戶名">
</div>
<div class="input-group"><input type="text" class="form-control" placeholder="請輸入郵箱"><span class="input-group-text">@qq.com</span>
</div>

輸入組大小
.input-group-sm類用于小型輸入組，將.input-group-lg用于大型輸入組

<div class="input-group input-group-sm"><span class="input-group-text">用戶名</span><input type="text" class="form-control" placeholder="用戶名">
</div>
<div class="input-group"><input type="text" class="form-control" placeholder="請輸入郵箱"><span class="input-group-text">@qq.com</span>
</div>

多個(gè)輸入

<div class="input-group"><span class="input-group-text">輸入姓名</span><input type="text" class="form-control" placeholder="姓"><input type="text" class="form-control" placeholder="名">
</div>

帶復(fù)選框和單選框的輸入組

<div class="input-group"><div class="input-group-text"><input type="checkbox"></div><input type="text" class="form-control" placeholder="這是內(nèi)容">
</div><div class="input-group"><div class="input-group-text"><input type="radio"></div><input type="text" class="form-control" placeholder="這是內(nèi)容">
</div>

帶按鈕的輸入組

<div class="input-group"><input type="text" class="form-control" placeholder="搜索"><button class="btn btn-success" type="submit">搜索</button>
</div><div class="input-group"><input type="text" class="form-control" placeholder="請輸入內(nèi)容"><button class="btn btn-primary" type="button">搜索</button>
</div>

帶下拉按鈕的輸入組

<div class="input-group"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉按鈕	</button><ul class="dropdown-menu"><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>

卡片
卡片提供了一個(gè)靈活的、可擴(kuò)展的內(nèi)容容器?？梢酝ㄟ^類.card與.card-body可以快速創(chuàng)建一個(gè)簡單的卡片，卡片可以包含頭部、內(nèi)容、底部以及各種顏色設(shè)置。
創(chuàng)建基本的卡片
外部包裝器需要基類.card，而內(nèi)容可以放置在.card-body元素內(nèi)

<div class="card"><div class="card-body">基礎(chǔ)的卡片</div>
</div>

頁眉和頁腳

<div class="card"><div class="card-header">頁眉</div><div class="card-body">內(nèi)容</div><div class="card-footer">頁腳</div>
</div>

帶有標(biāo)題、文本和鏈接的卡片

<div class="card w-60"><div class="card-header">頁眉</div><div class="card-body"><h4 class="card-title">卡片標(biāo)題</h4><p class="card-text">這是一些文本</p><a href="#" class="card-link">卡片鏈接</a></div><div class="card-footer">頁腳</div>
</div>

卡片圖像
可以給<img>添加.card-img-top使圖片位于文字上方，或添加.card-img-bottom使圖片位于文字下方來設(shè)置卡片中圖片的位置。

<div class="card" style="width:300px"><div class="card-header">頁眉</div><img class="card-img-top" src="avatar.png"><div class="card-body"><h4 class="card-title">卡片標(biāo)題</h4><p class="card-text">這是一些文本</p><a href="#" class="card-link">卡片鏈接</a></div><div class="card-footer">頁腳</div>
</div>

圖像作為卡片背景
將圖像轉(zhuǎn)換為卡片背景并使用.card-img-overlay并疊加卡片的文字

<div class="card" style="width:300px"><img class="card-img-top" src="avatar.png"><div class="card-img-overlay"><h4 class="card-title">卡片標(biāo)題</h4><p class="card-text">這是一些文本</p><a href="#" class="card-link">卡片鏈接</a></div>
</div>