以下是您提供的英文文本的繁體中文翻譯，使用了Markdown格式：

Bootstrap - Dropdowns Demo

# Bootstrap - 下拉菜單示範

## 什麼是下拉菜單？

你好，有志於網頁開發的同学们！今天，我們將進入Bootstrap下拉菜單的奇妙世界。作為你們親切的鄰居電腦老師，我很興奮能夠帶領你們開展這次旅程，即使你們之前從未寫過一行代碼。相信我，通過這個教學，你們將會像專業人士一樣創建有下拉菜單！

下拉菜單是一個用戶界面元素，允許用戶從清單中選擇一個選項。它就像是一個當你點擊按鈕或鏈接時出現的數字菜單。想像你在一間餐廳，而不是一張紙質菜單，服務員遞給你一個神奇的按鈕。當你按下它時，一串美味的菜肴會在空中浮現。這就是下拉菜單在網頁上的基本作用！

### 為什麼使用下拉菜單？

下拉菜單非常有用於：
1. 在你的網頁上節省空間
2. 組織相關選項
3. 提供一個乾淨和直觀的用戶界面

現在，讓我們來動手寫一些代碼吧！

## 設置Bootstrap

在我們創建第一個下拉菜單之前，我們需要在HTML文件中設置Bootstrap。別擔心，這比設置一個新手機還要簡單！

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 下拉菜單示範</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 你的內容將放在這裡 -->

    <!-- Bootstrap JS 和 Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

這段代碼設置了一個基本的HTML結構並包含了必要的Bootstrap文件。把它看作是在開始烹飪前準備你的廚房！

創建基本下拉菜單

讓我們從一個簡單的下拉菜單開始。我們將創建一個按鈕，當點擊時，會顯示一個選項列表。

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

讓我們分解一下：

<div class="dropdown">：這是我們下拉菜單的容器。
<button class="btn btn-primary dropdown-toggle" ...>：這創建了用戶點擊以打開下拉菜單的按鈕。
data-bs-toggle="dropdown"：這告訴Bootstrap這個按鈕應該切換下拉菜單。
<ul class="dropdown-menu">：這是當按鈕被點擊時出現的列表。
<li><a class="dropdown-item" href="#">...</a>：這是下拉菜單列表中的個別項目。

下拉菜單方向

就像你可以在自助餐從不同的方向取食物一樣，Bootstrap允許你更改下拉菜單的方向。讓我們探討一些選項：

向上彈出

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

這裡唯一的區別是使用dropup類而不是dropdown。就像把你的菜單翻轉過來一樣！

向右彈出和向左彈出

<div class="dropend">
  <button class="btn btn-info dropdown-toggle" type="button" id="droprightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    向右彈出
  </button>
  <ul class="dropdown-menu" aria-labelledby="droprightMenuButton">
    <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>

<div class="dropstart">
  <button class="btn btn-warning dropdown-toggle" type="button" id="dropleftMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    向左彈出
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropleftMenuButton">
    <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>

使用dropend類為右對齊下拉菜單，使用dropstart類為左對齊下拉菜單。這就像選擇把你的叉子放在盤子的哪一邊一樣！

下拉菜單項目

現在，讓我們為下拉菜單添加一些額外的功能：

<div class="dropdown">
  <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜單
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><h6 class="dropdown-header">下拉菜單頭部</h6></li>
    <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>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">禁用的動作</a></li>
  </ul>
</div>

在這個例子中，我們添加了：

一個頭部（dropdown-header）
一個分隔線（dropdown-divider）
一個禁用的項目（dropdown-item disabled）

這就像在您的菜單中創建部分，並將無法提供的項目灰顯一樣！

下拉菜單尺寸

就像你可以點擊小、中或大杯的飲料一樣，你可以更改下拉菜單按鈕的尺寸：

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    大按鈕
  </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">
    小按鈕
  </button>
  <ul class="dropdown-menu">
    <!-- 下拉菜單項目 -->
  </ul>
</div>

使用btn-lg為大按鈕，使用btn-sm為小按鈕。這就是那麼簡單！

下拉菜單方法

Bootstrap提供了多種方法以程式化方式控制下拉菜單。這裡有一張方法的表格：

方法	描述
show	顯示下拉菜單
hide	隱藏下拉菜單
toggle	切換下拉菜單
update	更新元素下拉菜單的位置
dispose	销毁元素的下拉菜單

要使用這些方法，你可以使用JavaScript。例如：

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

// 顯示下拉菜單
dropdownList[0].show()

// 隱藏下拉菜單
dropdownList[0].hide()

// 切換下拉菜單
dropdownList[0].toggle()

就这样！你剛剛完成了Bootstrap下拉菜單的速成課程。記住，熟能生巧，所以不要害怕在自製的網站上嘗試這些元素。

在你還不知道之前，你將會創建有下拉菜單，這些菜單甚至會讓最高級的餐廳都感到嫉妒。快樂編程，願你的下拉菜單總是向正確的方向彈出！

Credits: Image by storyset