fbpx

上週實作完徒手刻下拉式選單,這禮拜要來介紹偷吃步 —— 使用現成的 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 引入,如下圖

成功引入後的樣貌:

第二步,將特定的程式碼放入指定位置中

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

特殊之處:

  1. 按鈕循著右方箭頭展開 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>
  1. 第三個和第四個連結之間加入分隔線

分隔線相對容易,以需要多加入一行 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>

有沒有和藹可親得多呢~ 

這裡附上兩個部分的程式碼~ 歡迎練習取用💪

  1. 純 JS 版
  2. 加入 JS 事件版

 

那也感謝你們看到這裡😀  你的雙眼辛苦了~ 我的屁股也差不多要起來扭動一下(呼😂  

最後~ 如果覺得小白筆記有幫助到你&迫不及待想看下一集,歡迎 follow 程式小白臉書群

小白最近也開始有在錄 Podcast,如果對 程式+科技 相關主題有興趣也歡迎收聽唷!

 

References 參考資料:

  1. https://api.jquery.com/
  2. https://getbootstrap.com/
  3. https://www.w3schools.com/bootstrap4/bootstrap_ref_js_dropdown.asp
  4. https://medium.com/javascript-in-plain-english/bootstrap-5-dropdowns-f7f85146d126
iris

iris

我是踏踏實實的程式小白🙆‍♀ 今年開始學習 JS 和 React~ 這邊專放我學習時的筆記和心得📒 如果喜歡我的文章不妨加入我一起學習💪 營造有趣學習程式大圈圈

Leave a Reply