Bootstrap - 下拉菜單：初學者指南

你好，未來的網頁開發者！今天，我們將要進入Bootstrap下拉菜單的奇妙世界。作為你們親切的小區電腦老師，我很興奮能夠帶領你們開展這次旅程。如果你從來沒有寫過一行代碼也不用擔心——我們會從頭開始，逐步建立。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們開始吧！

Bootstrap - Dropdowns

下拉菜單是什麼？

在我們投入代碼之前，讓我們先來討論下拉菜單是什麼。想像你在餐廳，服務生遞給你一張菜單。那張菜單就像下拉菜單——它提供了一個選項列表供你選擇。在網頁設計中，下拉菜單的工作方式也類似。它們是以一種緊湊的方式向用戶展示多個選項，而不會讓你的網頁變得雜亂。

基本下拉菜單

讓我們從最基本下拉菜單開始。在Bootstrap中，它看起來像這樣：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
下拉按鈕
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">動作</a></li>
<li><a class="dropdown-item" href="#">另一個動作</a></li>
<li><a class="dropdown-item" href="#">在這裡的其它東西</a></li>
</ul>
</div>

讓我們來解析一下：

我們從一個帶有dropdown類的<div>開始。這是我們的容器。
在其中，我們有一個觸發下拉菜單的<button>。注意dropdown-toggle類和data-bs-toggle="dropdown"屬性。
带有dropdown-menu類的<ul>是我們實際的下拉菜單內容。
<ul>中的每一個<li>是我們下拉菜單中的一個項目。

下拉按鈕與下拉鏈接

你可以使用按鈕或鏈接來創建下拉菜單。這裡是如何區分它們的：

下拉按鈕

我們已經在我們的基本範例中看到了這個。它使用<button>元素：

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
下拉按鈕
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- 鏈接項目 -->
</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">
下拉鏈接
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<!-- 鏈接項目 -->
</ul>
</div>

主要區別在於使用的HTML元素（<button>對<a>），但它們的功能相似。

變體

Bootstrap為下拉菜單提供了各種顏色變體。你可以將btn-secondary類更改為以下任何一種：

btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-light
btn-dark

例如：

<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
危險下拉菜單
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- 鏈接項目 -->
</ul>
</div>

分隔按鈕

分隔按鈕下拉菜單將按鈕動作與下拉切換分開：

<div class="btn-group">
<button type="button" class="btn btn-primary">動作</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">切換下拉菜單</span>
</button>
<ul class="dropdown-menu">
<!-- 鏈接項目 -->
</ul>
</div>

在這裡，點擊按鈕的左邊部分會執行動作，而右邊部分則會打開下拉菜單。

尺寸

你可以通過添加btn-lg或btn-sm類來創建更大或更小的下拉菜單：

大型下拉按鈕

<div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLarge" data-bs-toggle="dropdown" aria-expanded="false">
大型下拉菜單
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLarge">
<!-- 鏈接項目 -->
</ul>
</div>

小型下拉按鈕

<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSmall" data-bs-toggle="dropdown" aria-expanded="false">
小型下拉按鈕
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSmall">
<!-- 鏈接項目 -->
</ul>
</div>

暗色下拉菜單

為了獲得一個時尚的暗色主題下拉菜單，請將dropdown-menu-dark類添加到你的dropdown-menu：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
暗色下拉菜單
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
<!-- 鏈接項目 -->
</ul>
</div>

方向

Bootstrap允許你更改下拉菜單的方向。讓我們探索這些選項：

居中下拉菜單

要居中對齊下拉菜單，請將dropdown-center類添加到容器：

<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
居中下拉菜單
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenteredButton">
<!-- 鏈接項目 -->
</ul>
</div>

向上彈出

要創建一個向上彈出的下拉菜單，請使用dropup類：

<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
向上彈出
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<!-- 鏈接項目 -->
</ul>
</div>

居中向上彈出

結合dropup和dropdown-center以創建居中的向上彈出：

<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
居中向上彈出
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenteredButton">
<!-- 鏈接項目 -->
</ul>
</div>

向右彈出

要創建一個向右彈出的下拉菜單，請使用dropend類：

<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
向右彈出
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<!-- 鏈接項目 -->
</ul>
</div>

向左彈出

要創建一個向左彈出的下拉菜單，請使用dropstart類：

<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
向左彈出
</button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
<!-- 鏈接項目 -->
</ul>
</div>

菜單項目

現在，讓我們來討論下拉菜單中可以放入哪些內容。你有幾個選項：

頭部

為了將菜單項目分組，你可以添加一個頭部：

<ul class="dropdown-menu">
<li><h6 class="dropdown-header">下拉菜單頭部</h6></li>
<li><a class="dropdown-item" href="#">動作</a></li>
<li><a class="dropdown-item" href="#">另一個動作</a></li>
</ul>

分隔線

使用分隔線來分隔相關的菜單項目組：

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">動作</a></li>
<li><a class="dropdown-item" href="#">另一個動作</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">在這裡的其它東西</a></li>
</ul>

文本

你也可以包含非交互式文本：

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">動作</a></li>
<li><a class="dropdown-item" href="#">另一個動作</a></li>
<li><a class="dropdown-item" href="#">在這裡的其它東西</a></li>
<li><span class="dropdown-item-text">下拉菜單項目文本</span></li>
</ul>

表單

你甚至可以在下拉菜單中包含表單：

<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 protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">密碼</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="密碼">
</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">
記住我
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">登入</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">新來這裡？註冊</a>
<a class="dropdown-item" href="#">忘記密碼？</a>
</div>

菜單對齊

默認情況下，下拉菜單是左對齊的。你可以使用對齊類來更改這個設定：

右對齊菜單

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
右對齊菜單
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<!-- 鏈接項目 -->
</ul>
</div>

响应式對齊

你也可以使對齊響應式：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
左對齊但在大型屏幕上右對齊
</button>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton">
<!-- 鏈接項目 -->
</ul>
</div>

在這個下拉菜單將默認左對齊，但在大型屏幕上會右對齊。

下拉菜單選項

Bootstrap下拉菜單還帶有一些額外的選項：

自動關閉行為

你可以使用data-bs-auto-close屬性來控制下拉菜單的關閉方式：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
點擊外部可關閉
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- 鏈接項目 -->
</ul>
</div>

data-bs-auto-close的選項有：

true（默認）：點擊外部或內部時關閉下拉菜單
false：點擊外部或內部都不關閉下拉菜單
inside：點擊內部時關閉下拉菜單
outside：點擊外部時關閉下拉菜單

至此，你已經完成了Bootstrap下拉菜單的快速導覽。記住，熟能生巧，所以不要害怕嘗試這些範例。祝你好運，並希望你們的下拉菜單總是能夠順利打開！

Credits: Image by storyset