當大家要使用下拉選單的時候都是使用以上哪種稱呼呢？由於本人之前都以寫asp.net為主，所以用DropDownList名稱多一點，但若是寫WinForm轉網頁的同事就會使用ComboBox這個名稱，而Dropdowns則是在最新的Bootstrap和CSS可見。

前一篇中我們終於把需要的css和js檔都匯入了，今天就要來正式寫下拉選單元件，使用的就是Bootstrap的Dropdowns元件，當然網上也有很多範例可以參考，不過我想我就從最基本的結構寫起好了。

我們直接使用官網上的範例：

01 <div class="dropdown">
02   <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
03     Dropdown link
04   </a>
05
06  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
07    <li><a class="dropdown-item" href="#">Action</a></li>
08    <li><a class="dropdown-item" href="#">Another action</a></li>
09    <li><a class="dropdown-item" href="#">Something else here</a></li>
10  </ul>
11 </div>

這個範列主要是應用在做導覽列時的一個下拉選單，我們一行一行來解析一下：

1. 首先要先選擇使用<button>或<a>超連結來做下拉選單的按鈕，這裡是使用<a>如行02。
2. 接著用<ul><li>來做選單內容，如行06~10。
3. 處理按下選單後要做的事或轉跳至某頁面

接著分析其中的css屬性，使用bootstrap必需在<a>超連結的部分加上class = "dropdown-toggle"，然後設定 data-bs-toggle="dropdown" 再搭配 <ul css="dropdown-menu">和<li>的css="dropdown-item">，如此就可以完成下拉選單的效果，若是要修改下拉選單的樣式，則是修改其中的btn btn-secondary 這些對應的css，如官網上幾組常用顏色和大小設定等選擇，更可以設定下拉選單跳出來時的位置或是選單是否要分割。更進階的設定可以參考以下網站：

1. 官網
2. CSS Dropdowns
3. Bootstrap 按钮

其他屬性補充
aria-label： 是一個HTML attribute，用來說明這個元素在網頁上的作用。
aria-expanded：如果選單在關閉的狀態時就把值設為 false。
其他參考資料(這篇內容還有更詳細的屬性說明)：實作無障礙網頁功能：真・button —— RWD 漢堡選單應用

寫著寫著覺得自己的文章真的是完全比不上網路上的資料和大神們的文章，但又告訴自己不從頭開始練習永遠不會有變強的那一天，所以還是決定繼續完成下去，希望可以堅持30天。最後想說，當時真應該多查些資料再來撰寫我的下拉元件的，寫了半天才發現被這個那個css給影響了，而出不了我要的效果。還有，當下沒有紀錄起來的一些參考資料，現在一時也找不到了，真是可惜，有機會的話再補上吧！p.s.Mrkdown語法也是第一次嘗試 :)