這篇要來整理之前還沒有講到，但非常實用的Bootstrap 元件：Dropdown（下拉選單） 與 Input Group（輸入框組）。

1. Dropdown（下拉選單）

使用者可以從下拉清單中選擇單一選項的切換元件。它內建了 Popper.js 的定位能力，能確保選單在各種螢幕尺寸或視窗邊界下都不會破版。

基礎結構解析

Dropdown 的外層必須包覆 .dropdown，並由**「觸發按鈕」與「dropdown-menu(選單清單)」**組成：

<div class="dropdown">
  <!-- 1. 觸發按鈕：必須加上 data-bs-toggle="dropdown" -->
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <!-- 2. 下拉選單選單項目 -->
  <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>

(參考資料：Bootstrap 5 components-Dropdowns)

2. Input Group（輸入群組）

Input Group 是用來擴充表單 <input> 的視覺工具。它可以輕鬆地在輸入框的左側（Prefix）或右側（Suffix）附加上文字標籤、圖示（Icon）或是按鈕。

基礎結構解析

只要將輸入框與按鈕/文字包在 .input-group 容器內即可：

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

由於變化蠻多元的，建議根據自己的需求查找官方文件適合的範例來使用。
(參考資料：Bootstrap 5 Forms-Input group)

3.實作：整合到TaskTimer

除了我們完成的任務清單頁面之外，計時器的區域也使用了 Dropdown 和Input group，這邊就不另加贅述，直接放上計時器頁面實作的成果。