2019年11月26日 星期二

Bootstrap 4 學習筆記 (七) : 按鈕選單

由於 Bootstrap 的導覽 (nav) 元件與導覽列 (navbar) 元件會用到按鈕選單 (dropdown/dropup), 故先對此元件進行測試, 本系列之前的測試文章參考 :


Bootstrap 4 學習筆記 (一) : 環境配置
Bootstrap 4 學習筆記 (二) : 網格與容器
Bootstrap 4 學習筆記 (三) : 表格
Bootstrap 4 學習筆記 (四) : 圖示與按鈕
Bootstrap 4 學習筆記 (五) : 文字與圖片效果
Bootstrap 4 學習筆記 (六) : 表單

Bootstrap 教學文件參考 :

第 10 堂課 - 初探 bootstrap 網頁製作
Bootstrap 初學介紹 #靜態篇


Bootstrap 的按鈕選單由一個按鈕與 ul 項目清單元件, 外面再套一層 div 元件組成, 基本結構如下 :


<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  </button>
  <ul class="dropdown-menu">
     <li class="dropdown-header"></li>
     <li class="divider"></li>
     <li></li>
  </ul>
</div>


按鈕上的文字可加上文字圖示, 因為這個緣故, 通常使用 button 元素來製作按鈕 (因為 input 按鈕上的文字放在其 value 屬性, 要對按鈕文字加工或加上文字圖示都比較麻煩).

選單所需的樣式類別摘要如下表 :


 按鈕選單樣式類別 說明
 dropdown 套用於選單最上層 div 元素, 選單向下展開
 dropup 套用於選單最上層 div 元素, 選單向上展開
 dropdown-toggle 套用於選單按鈕元素, 作為選單展開縮合之用
 dropdown-menu 套用於選單本體之 ul 元素
 dropdown-header 套用於選單本體之 ui 元素, 做為選項群組之標頭
 divider 套用於選單本體之 ui 元素, 做為選項群組間的分隔線


注意, 要讓選單按鈕按下時能彈出選單, 按鈕還必須加上 data-toggle="dropdown" 屬性才行, 例如 :


範例 1 : 按鈕選單測試 (1) [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <label>網路書店</label>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li class="dropdown-header">國外</li>
          <li><a href="https://www.amazon.com/" target="_blank">亞馬遜書店</a></li>
          <li><a href="https://www.barnesandnoble.com/" target="_blank">Barnes & Noble</a></li>
          <li class="divider"></li>
          <li class="dropdown-header">國內</li>
          <li><a href="http://www.book.com.tw/" target="_blank">博客來書店</a></li>
          <li><a href="http://www.eslite.com/" target="_blank">誠品書店</a></li>
          <li><a href="http://www.kingstone.com.tw/" target="_blank">金石堂書店</a></li>
        </ul>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


此例中最外層 div 元素套用 dropdown 樣式類別, 表示此為下拉式選單而非上拉式選單. 按鈕文字放在 label 元素中, 方便加上 style 屬性對按鈕文字進行樣式套用, 後面加上一個 caret (向下箭頭) 的文字圖示, 表示按下按鈕會有一個選單出現. 瀏覽結果如下 :




選單中的選項可以套用 active 來設定開啟選單時該選項以高亮度表示; 或套用 disabled 將該選項設為不可選擇, 例如 :


範例 2 : 按鈕選單測試 (2) 選項套用 active 與 disabled 樣式 [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <label>網路書店</label>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li class="dropdown-header">國外</li>
          <li><a href="https://www.amazon.com/" target="_blank">亞馬遜書店</a></li>
          <li class="disabled"><a href="https://www.barnesandnoble.com/" target="_blank">Barnes & Noble</a></li>
          <li class="divider"></li>
          <li class="dropdown-header">國內</li>
          <li class="active"><a href="http://www.book.com.tw/" target="_blank">博客來書店</a></li>
          <li><a href="http://www.eslite.com/" target="_blank">誠品書店</a></li>
          <li><a href="http://www.kingstone.com.tw/" target="_blank">金石堂書店</a></li>
        </ul>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


此例將邦諾書店的選項套上 disabled 樣式使其不可選; 將博客來書店選項套用 active 樣式類別使其預設為高亮度顯示, 瀏覽結果如下 :




按鈕選單也可以向上展開, 只要將最外層 div 元素套用 dropup 樣式類別即可, 其餘不變, 例如 :


範例 2 : 按鈕選單測試 (3) 向上展開的選單 [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div style="margin-bottom:250px;"></div>
      <div class="dropup">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <label>網路書店</label>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li class="dropdown-header">國外</li>
          <li><a href="https://www.amazon.com/" target="_blank">亞馬遜書店</a></li>
          <li><a href="https://www.barnesandnoble.com/" target="_blank">Barnes & Noble</a></li>
          <li class="divider"></li>
          <li class="dropdown-header">國內</li>
          <li><a href="http://www.book.com.tw/" target="_blank">博客來書店</a></li>
          <li><a href="http://www.eslite.com/" target="_blank">誠品書店</a></li>
          <li><a href="http://www.kingstone.com.tw/" target="_blank">金石堂書店</a></li>
        </ul>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


此例為了能完整顯示向上展開的選單, 在按鈕選單最外層 div 上添加了一個 div 元素, 並將其 margin-bottom 樣式設為 250px, 這樣按鈕選單就會往下移 250px, 瀏覽結果如下 :




不過, 向上展開選單使用的機會應該不多, 通常網頁操作習慣都是用向下展開比較自然. 透過 class 設定簡簡單單就弄出美美的選單, Bootstrap 真是好棒棒, 我越來越喜歡了!

沒有留言:

張貼留言