上週實作完徒手刻下拉式選單，這禮拜要來介紹偷吃步 —— 使用現成的 Bootstrap 來製作～ 但也別怪我這麼晚介紹這麼好用的功能，畢竟學習還是要從基本功開始一層一層堆疊上去
首先，你一定會問到：什麼是 Bootstrap 呢？
根據官網定義，Bootstrap 是一個利於快速製作響應式網站 (responsive web) 和致力於行動優先 (mobile-first) 的框架，它裡面用到的技術不外乎 HTML, CSS 和 Javascript，也就是前幾集介紹過的那些東西。
在做前端的人應該多多少少聽過 RWD (Responsive Web Design)，即剛剛所提的「響應式網頁設計」，或稱動態網頁。這樣的網頁能使畫面隨著螢幕大小變動。換句話說，同個網頁在不同的大小裝備 (device) 上呈現的結果會不盡相同，且會隨著螢幕的大小做畫面上的調整，譬如在 13 寸筆電上原本由左向右排列的圖片換到手機上變成由上而下的排列～ 諸如此類的排版上動態調整我們稱之為 RWD。
在開始前再補充一點，行動優先等同於「行動裝置優先」，也是 Bootstrap 開發團隊 Twitter 在 2013 年智慧型手機爆紅時就看到的「行動」商機，再加上設計美感的扁平化 (flat design)，他們在反覆調整後陸續推出了 Bootstrap 2.0, 3.0, 4.0 最後到了現在的 5.0 Alpha 2，如有興趣可以看看 Bootstrap 部落格上的最新資訊（在此事先聲明，前端變化太快框架更新速度驚人，在你看此篇文章時也許就已經更新到 Bootstrap 10.0 也是有可能～ 如果不嫌麻煩不妨上官網查一下最新版本吧！）
那我們進入正題～
First step first, 按照官方網站說明把環境架設完成，如果和我一樣使用 Codepen 的朋友也記得在設定 (Settings) 的 JS 選項中把 bootstrap-material-design 引入，如下圖
成功引入後的樣貌：
第二步，將特定的程式碼放入指定位置中
- CSS 放入 <head> 中
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- JS 放入 <body> 中（請發揮我們再熟悉不過的複製貼上技術～ 以下三個 jQuery、Popper.js、JS plugin的先後次序不能亂）
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
一切就緒後就可以來看到下拉式選單了🤩
直接來給大家看一段 Bootstrap 最簡易的實作：
</div> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Javascript Beginner </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">What is JS?</a> <a class="dropdown-item" href="#">How to fastest pick up JS?</a> <a class="dropdown-item" href="#">Future Career related to JS</a> <a class="dropdown-item" href="#">JS Demo</a> </div> </div>
如大家所見，裡面需要用到的最特別的元素就是 data-toggle=”dropdown”，也就是利用 JS 控制下拉式選單的開闔，再來我們會看到 button 的 class 中有三個設定，分別為 btn、btn-primary 和 dropdown-toggle，btn 是個 Bootstrap 預設的按鈕設定（必須寫出）；btn-primary 為按鈕顏色的設定，其餘設定還有：灰色 btn-secondary、紅色 btn-danger、綠色、btn-success、紅色btn-warning 或是特別設定僅有外框 btn-outline-primary～ 其他還有很多種類😆 可以自行看著文件嘗試玩玩
另外，在按鈕的 class 設定中一定要遵循 Bootstrap 的系統設定才行，好比說：btn-group、dropdown-toggle、dropdown-menu、dropdown-item 等等
那也在這裡分享幾個蠻酷的下拉式選單長相：
<div class="btn-group"> <button type="button" class="btn btn-danger">Welcome</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">About me</a> <a class="dropdown-item" href="#">My accomplishments</a> <a class="dropdown-item" href="#">All my works</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Learn more</a> </div>
特殊之處：
- 按鈕循著右方箭頭展開 Split Button
假如想要下拉式選單循著按鈕的箭頭打開，最好的作法就是另外再寫一顆按鈕附加在原本按鈕的下方，如以下：
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span>
- 第三個和第四個連結之間加入分隔線
分隔線相對容易，以需要多加入一行 code 即可：
<div class="dropdown-divider"></div>
如果你夠怪，或是有特殊需求～ 也可以參考看看上、右、左拉式選單，做法也相對容易，只需要在按鈕上層的 class 中加入 dropup、dropright 或是 dropleft 即可，譬如：
<div class="btn-group dropright"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Javascript Beginner </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">What is JS?</a> <a class="dropdown-item" href="#">How to fastest pick up JS?</a> <a class="dropdown-item" href="#">Future Career related to JS</a> <a class="dropdown-item" href="#">JS Demo</a> </div> </div>
那最後也順道帶大家看看如何用 Bootstrap 來操作 Javascript 事件
在處理 JS 事件時必須結合到 jQuery 語法，以下先逐一做說明後放上 demo：
$( document ).ready() 在此中的程式碼會在 DOM 準備好時執行一次
$( window ).on( “load”, function() { … }) 在此中的程式碼則會在所有頁面的元件都準備好時執行一次
event.relatedTarget() 當前方設定事件發生時（在此舉例為 show.bs.dropdown），會將指定元素牽扯進事件之中，這裡指的是 .text()
JS 事件列舉：
show.bs.dropdown 正要顯示下拉式選單
shown.bs.dropdown 下拉式選單已顯示
hide.bs.dropdown 正要隱藏下拉式選單
hidden.bs.dropdown 下拉式選單已隱藏
HTML：
<div class="container"> <h3>下拉式選單 — Javascript 事件觸發</h3> <p>JS 結合 jQuery 的 event.relatedTarget 來抓取目標</p> <div class="dropdown"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> 下拉式選單 demo </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">你好嗎</a> <a class="dropdown-item" href="#">我很好</a> <a class="dropdown-item" href="#">多照顧自己唷</a> </div> </div> </div>
其後放入 JS：
<script>
$(document).ready(function(){
$(".dropdown").on("show.bs.dropdown", function(event){
var list = $(event.relatedTarget).text();
});
});
</script>如果你無法暸解以上程式碼，可以試試看理解以下，會是一樣的效果，不過這樣的作法僅牽扯到 JS 的方法 (method)
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown();
});
</script>有沒有和藹可親得多呢～
這裡附上兩個部分的程式碼～ 歡迎練習取用💪
那也感謝你們看到這裡😀 你的雙眼辛苦了～ 我的屁股也差不多要起來扭動一下（呼😂
最後～ 如果覺得小白筆記有幫助到你＆迫不及待想看下一集，歡迎 follow 程式小白臉書群～
小白最近也開始有在錄 Podcast，如果對 程式＋科技 相關主題有興趣也歡迎收聽唷！
References 參考資料：
- https://api.jquery.com/
- https://getbootstrap.com/
- https://www.w3schools.com/bootstrap4/bootstrap_ref_js_dropdown.asp
- https://medium.com/javascript-in-plain-english/bootstrap-5-dropdowns-f7f85146d126
