2019年11月30日 星期六

Bootstrap 4 學習筆記 (九) : 導覽列

測試完導覽頁籤, 馬上來測試功能類似的導覽列 (navbar).

本系列之前的測試文章參考 :


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


Bootstrap 教學文件參考 :

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



一. 導覽列相關之樣式類別 : 

導覽列以 HTML5 的 nav 元素為主角, 它是全站導覽元素, 通常放在網頁的最上方, 如下面的 HTML5 結構圖所示 :




nav 搭配 div, button 等元素組合以及 Bootstrap 提供的樣式類別, 打造出美美的導覽列, 相關樣式如下表 :


 導覽列樣式類別 說明
 navbar 套用於 nav 元素之導覽列基礎類別 (必要)
 navbar-default 套用於 nav 元素之導覽列預設類別
 navbar-inverse 套用於 nav 元素之導覽列類別 (反轉)
 navbar-fixed-top 套用於 nav 元素之導覽列類別 (固定在頂部)
 navbar-fixed-bottom 套用於 nav 元素之導覽列類別 (固定在底部)
 navbar-dark 套用於 nav 元素之導覽列類別 (暗色背景)
 navbar-light 套用於 nav 元素之導覽列類別 (淡色背景)
 bg-dark 套用於 nav 元素之導覽列背景色類別 (暗色背景)
 bg-light 套用於 nav 元素之導覽列背景色類別 (淡色背景)
 navbar-expand-xl 套用於 nav 元素之導覽列類別 (超大)
 navbar-expand-lg 套用於 nav 元素之導覽列類別 (大)
 navbar-expand-md 套用於 nav 元素之導覽列類別 (中)
 navbar-expand-sm 套用於 nav 元素之導覽列類別 (中小)
 navbar-header 導覽列標頭, 討用於標頭 div 元素
 navbar-brand 導覽列網站名稱 (字體較大), 套用於標頭內之 a 元素 
 navbar-text 導覽列文字, 套用於選項後之 p 或 span 元素
 navbar-nav 套用於導覽列項目之 ul 元素
 navbar-toggle 套用於導覽按鈕 button 元素之類別 (螢幕變小時縮合用)
 collapsed 套用於導覽按鈕 button 元素之類別 (螢幕變小時縮合用)
 navbar-collapse 套用於導覽項目之外層 div 元素  (螢幕變小時縮合用)
 collapse 套用於導覽項目之外層 div 元素  (螢幕變小時縮合用)


參考 :

https://getbootstrap.com/docs/4.3/components/navbar/



二. 以導覽列瀏覽本地網頁內容 : 

導覽列用來導覽網站之內容, 下面是結合導覽列與頁籤功能的響應式網頁, 利用 collapse 樣式類別設定, 導覽列的選項在小型裝置上可透過按鈕縮合與垂直展開 :


範例 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>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">
            <span>小狐狸事務所</span>
          </a>
          <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
            <span class="sr-only">導覽按鈕</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar-menu" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#home" data-toggle="tab">首頁</a></li>
            <li><a href="#board" data-toggle="tab">留言板</a></li>
            <li><a href="#download" data-toggle="tab">下載區</a></li>
            <li><a href="#config" data-toggle="tab">設定</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <article>
      <div class="container">
        <div class="tab-content" style="padding:10px;">
          <div class="tab-pane active" id="home">
            <p>這是首頁</p>
          </div>
          <div class="tab-pane" id="board">
            <p>這是留言板</p>
          </div>
          <div class="tab-pane" id="download">
            <p>這是下載區</p>
          </div>
          <div class="tab-pane" id="config">
            <p>這是設定</p>
          </div>
        </div>
      </div>
    </article>
    <footer></footer>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


此例導覽列位於網頁最上面以 nav 元素包起來, 網頁內容則放在底下以 article 元素包起來的區域, article 裡面是樣式類別為 tab-content 的兩層 div 結構, 利用 id 與上面導覽列選項 (li 元素) 內超連結的 href 屬性相連結, 且每個導覽列選項都要設定 data-toggle="tabs" 表示此為頁籤結構. 關於導覽頁籤參考 :

Bootstrap 4 學習筆記 (八) : 導覽頁籤

在瀏覽器寬度超過 768px 時瀏覽結果如下 :



透過導覽列中 button 元素的 collapse 樣式設定, 當瀏覽器寬度小於 768px 時選項會先縮合起來, 導覽列最右邊會出現一個三條槓的按鈕, 按此按鈕會在導覽列下方出現堆疊排列之選項, 再按一次選項又會消失, 這就是 class="navbar-toggle collapsed" 樣式之效果 :




上面範例套用 navbar-default 樣式類別, 效果為淡底色黑字體, 若改用 navbar-inverse 類別則將套用反白效果, 即暗底色白字體, 如下範例所示 :


範例 2 : 導覽列測試 (2) navbar-inverse 的反白效果 [看原始碼]


<!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>
    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">
            <span>小狐狸事務所</span>
          </a>
          <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
            <span class="sr-only">導覽按鈕</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar-menu" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#home" data-toggle="tab">首頁</a></li>
            <li><a href="#board" data-toggle="tab">留言板</a></li>
            <li><a href="#download" data-toggle="tab">下載區</a></li>
            <li><a href="#config" data-toggle="tab">設定</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <article>
      <div class="container">
        <div class="tab-content">
          <div class="tab-pane active" id="home">
            <p>這是首頁</p>
          </div>
          <div class="tab-pane" id="board">
            <p>這是留言板</p>
          </div>
          <div class="tab-pane" id="download">
            <p>這是下載區</p>
          </div>
          <div class="tab-pane" id="config">
            <p>這是設定</p>
          </div>
        </div>
      </div>
    </article>
    <footer></footer>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


此例與上面的差別只是將 nav 元素改為套用 navbar-inverse 類別而已, 瀏覽結果如下 :





上面範例是在導覽列標頭超連結內以 span 元素標記網站名稱 (套用 navbar-brand 樣式), 可改用公司商標 logo 小圖示取代, 也可以在選項最後面加上歡迎文字或今日日期等訊息, 如下面範例所示 :


範例 3 : 導覽列測試 (3) logo 圖片與文字 [看原始碼]


<!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>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">
            <img src="F.jpg">
          </a>
          <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
            <span class="sr-only">導覽按鈕</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar-menu" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#home" data-toggle="tab">首頁</a></li>
            <li><a href="#board" data-toggle="tab">留言板</a></li>
            <li><a href="#download" data-toggle="tab">下載區</a></li>
            <li><a href="#config" data-toggle="tab">設定</a></li>
          </ul>
          <p class="navbar-text">歡迎來到小狐狸事務所!</p>
        </div>
      </div>
    </nav>
    <article>
      <div class="container">
        <div class="tab-content">
          <div class="tab-pane active" id="home">
            <p>這是首頁</p>
          </div>
          <div class="tab-pane" id="board">
            <p>這是留言板</p>
          </div>
          <div class="tab-pane" id="download">
            <p>這是下載區</p>
          </div>
          <div class="tab-pane" id="config">
            <p style="height:1400px;">這是設定</p>
          </div>
        </div>
      </div>
    </article>
    <footer></footer>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


此例中我製作了 "F.jpg" logo 小圖示 (30*30) 用來取代文字 logo, 注意, 有 logo 圖示就不要同時用文字網站名稱, 這樣會因為文繞圖問題破壞標題列版面. 另外在選項最後面加上一段歡迎文字, 注意, 此 p 元素套用了 navbar-text 樣式類別, 瀏覽結果如下 :



在上面範例中, 最後一個選項內容 "這是設定" 的高度被刻意設定為 1400px; 超過一般筆電或桌機螢幕高度, 因此切到此頁籤時右邊會出現捲軸, 往下捲動時會使上方的導覽列消失, 這可以套用 navbar-fixed-top 樣式來讓導覽列固定不動, 例如 :


範例 4導覽列測試 (4) navbar-fixed-top 固定導覽列 [看原始碼]


<!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>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">
            <img src="F.jpg">
          </a>
          <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
            <span class="sr-only">導覽按鈕</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar-menu" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#home" data-toggle="tab">首頁</a></li>
            <li><a href="#board" data-toggle="tab">留言板</a></li>
            <li><a href="#download" data-toggle="tab">下載區</a></li>
            <li><a href="#config" data-toggle="tab">設定</a></li>
          </ul>
          <p class="navbar-text">歡迎來到小狐狸事務所!</p>
        </div>
      </div>
    </nav>
    <article>
      <div class="container">
        <div class="tab-content">
          <div class="tab-pane active" id="home">
            <p>這是首頁</p>
          </div>
          <div class="tab-pane" id="board">
            <p>這是留言板</p>
          </div>
          <div class="tab-pane" id="download">
            <p>這是下載區</p>
          </div>
          <div class="tab-pane" id="config">
            <p style="height:1400px;">這是設定</p>
          </div>
        </div>
      </div>
    </article>
    <footer></footer>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


瀏覽結果確實在 "設定" 選項時導覽列不再隨捲軸移動, 但是頁籤內容卻沒有顯示, why? 難到是 navbar-fixed-top 還有 bug 嗎? 暫且別用 navbar-fixed-top 吧!

接下來要測試 navbar-rigth 樣式, 此類別是套用在導覽列的 ul 元素上, 它會將整個導覽選項全部向右靠齊. 另外, 下拉式選單 (dropdown) 也可以放在導覽列上, 只要把它當作一個 li 選項即可, 如下列範例所示 :


範例 5 : 導覽列測試 (5) navbar-right 導覽列靠右 [看原始碼]


<!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>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">
            <img src="F.jpg">
          </a>
          <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
            <span class="sr-only">導覽按鈕</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar-menu" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home" data-toggle="tab">首頁</a></li>
            <li><a href="#board" data-toggle="tab">留言板</a></li>
            <li><a href="#download" data-toggle="tab">下載區</a></li>
            <li><a href="#config" data-toggle="tab">設定</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <label>網路書店</label>
                <span class="caret"></span>
              </a>
              <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>
            </li>
          </ul>
          <p class="navbar-text">歡迎來到小狐狸事務所!</p>
        </div>
      </div>
    </nav>
    <article>
      <div class="container">
        <div class="tab-content">
          <div class="tab-pane active" id="home">
            <p>這是首頁</p>
          </div>
          <div class="tab-pane" id="board">
            <p>這是留言板</p>
          </div>
          <div class="tab-pane" id="download">
            <p>這是下載區</p>
          </div>
          <div class="tab-pane" id="config">
            <p>這是設定</p>
          </div>
        </div>
      </div>
    </article>
    <footer></footer>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


此例主要就是選項多加一個下拉式選單, 以及 ul 元素加上 navbar-right 類別, 讓全部 ul 裡面的 li 選項全部向右靠齊, 瀏覽結果如下 :




注意, 導覽列文字不屬於 ul (p 與 ul 是兄弟元素), 因此它不會向右靠齊.


三. 以導覽列瀏覽遠端網頁內容 (Ajax) :

上面範例中, 導覽列所指內容均來自網頁本身, 其實網頁內容也可以透過 Ajax 從伺服器取得, 不須寫死在網頁上, 作法與導覽頁籤一樣, 需要利用 Javascript 程式碼輔助, 如下面範例所示 :


範例 6 : 導覽列測試 (6) 以 Ajax 從伺服器取得導覽網頁 [看原始碼]


<!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>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">
            <span>小狐狸事務所</span>
          </a>
          <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
            <span class="sr-only">導覽按鈕</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar-menu" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#home" data-url="tabs.php?text=這是首頁">首頁</a></li>
            <li><a href="#board" data-url="tabs.php?text=這是留言板">留言板</a></li>
            <li><a href="#download" data-url="tabs.php?text=這是下載區">下載區</a></li>
            <li><a href="#config" data-url="tabs.php?text=這是設定">設定</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <article>
      <div class="container">
        <div class="tab-content" style="padding:10px;">
          <div class="tab-pane active" id="home"></div>
          <div class="tab-pane" id="board"></div>
          <div class="tab-pane" id="download"></div>
          <div class="tab-pane" id="config"></div>
        </div>
      </div>
    </article>
    <footer></footer>
    <script>
      $(document).ready(function(){
        $('#navbar-menu a').click(function (e) {
          e.preventDefault();     
          var url=$(this).attr("data-url");
          var href=this.hash;
          var pane=$(this);
          $(href).load(url,function(result){
            pane.tab('show');
            });
          });
        $('#home').load($('.active a').attr("data-url"), function(result){
          $('.active a').tab('show');
          });
        });
    </script>
  </body>
</html>


此例導覽列選項超連結的 data-url 屬性用來指定此選項之資料來源, 此處為伺服端的 PHP 程式 tabs.php?text=xxx, 其中 ?text=xxx 表示 GET 方法傳遞參數 text 之值為 xxx. tabs.php 程式內容如下 :

<p><?php echo $_GET['text'], " (Ajax)" ?></p>

就是將客戶端傳遞的 text 參數與 "(Ajax)" 回應回去而已, 瀏覽結果如下 :




注意, 此例必須上傳到伺服器瀏覽, 在本地瀏覽無效果.

2019年11月28日 星期四

Bootstrap 4 學習筆記 (八) : 導覽頁籤

導覽是網頁設計很重要的功能, 通常用在首頁中引導使用者快速找到目標內容. Bootstrap 的導覽元件可以設計出頁籤面板 (tabbed panel), 或結合下拉式選單以簡化網頁結構.

本系列之前的測試文章參考 :


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


Bootstrap 教學文件參考 :

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


一. 導覽頁籤相關之樣式類別 : 

Bootstrap 的導覽元件使用 ul-ui 清單項目為基本架構, 每一個 li 元素代表一個導覽項目, 並提供如下表中之樣式類別來設定導覽元件 :


 導覽元件樣式類別 說明
 nav 導覽元件必要之基礎類別 (套用在 ul 元素)
 nav-tabs 頁嵌式導覽面板 (套用在 ul 元素)
 nav-pills 按鈕式導覽面板 (套用在 ul 元素)
 nav-stacked 堆疊式導覽面板 (套用在 ul 元素)
 nav-justified 在大於 768px 螢幕上讓導覽項目以平均寬度排列 (套用在 ul 元素)
 data-toggle 套用在 ui 元素, 指定切換導覽頁籤時觸發之事件, 頁籤要設為 tab
 data-url 套用在 ui 元素, 指定以 Ajax 方式載入導覽頁籤之 URL 
 tab-content 套用於頁籤內容版面外層 div 元素 (整個頁籤面板)
 tab-pane 套用於頁籤內容版面內層 div 元素 (個別頁籤)
 active 啟用導覽項目 (套用在 ui 元素) 或頁籤面板 (套用在 div 元素)
 disabled 停用導覽項目 (套用在 ul 元素) 或頁籤面板 (套用在 div 元素)


其中 nav 類別為基礎類別, 必須率先套用.


二. 頁籤內容來自網頁本身 : 

導覽元件分為兩個部分 :
  • 表頭 (header) :
    類似活頁簿的標籤, 由 ul 與 ui 元素搭配 nav 與 nav- 樣式類別構成.
  • 內容 (content) :
    由兩層 div 元素搭配 tab-content 與 tab-pane 樣式類別構成. 
如果頁籤內容來自網頁本身, 則頁籤內容直接放在雙層 div 的內層; 如果頁籤內容來自 Ajax 取得, 則內層 div 不需要內容.


範例 1 : 導覽頁籤 nav-tab 樣式 [看原始碼]


<!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">
      <ul class="nav nav-tabs">
        <li><a href="#home" data-toggle="tab">首頁</a></li>
        <li><a href="#board" data-toggle="tab">留言板</a></li>
        <li><a href="#download" data-toggle="tab">下載區</a></li>
        <li><a href="#config" data-toggle="tab">設定</a></li>
      </ul>
      <div class="tab-content" style="padding:10px;">
        <div class="tab-pane active" id="home">
          <p>這是首頁</p>
        </div>
        <div class="tab-pane" id="board">
          <p>這是留言板</p>
        </div>
        <div class="tab-pane" id="download">
          <p>這是下載區</p>
        </div>
        <div class="tab-pane" id="config">
          <p>這是設定</p>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


此例中 ul 與 li 結構組成導覽頁籤, 兩層 div 結構組成各頁籤內容. ul 須先套用 nav 再套用 nav-tab 樣式, li 的 href 須設定為指向頁籤內容的內層 div 元素之 id. 頁籤內容之外層 div 須套用 tab-content 樣式, 而內層 div 則是套用 tab-pane 樣式並設定 id 屬性, 以便與導覽頁籤的 href 相連結. 每個 li 元素都必須有 data-toggle 屬性並設定其值為 "tab", 瀏覽結果如下 :



若改用 nav-pills, 則頁籤會改用按鈕樣式, 例如 :


範例 2 : 導覽按鈕 nav-pills 樣式 [看原始碼]


<!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">
      <ul class="nav nav-pills">
        <li><a href="#home" data-toggle="tab">首頁</a></li>
        <li><a href="#board" data-toggle="tab">留言板</a></li>
        <li><a href="#download" data-toggle="tab">下載區</a></li>
        <li><a href="#config" data-toggle="tab">設定</a></li>
      </ul>
      <div class="tab-content" style="padding:10px;">
        <div class="tab-pane active" id="home">
          <p>這是首頁</p>
        </div>
        <div class="tab-pane" id="board">
          <p>這是留言板</p>
        </div>
        <div class="tab-pane" id="download">
          <p>這是下載區</p>
        </div>
        <div class="tab-pane" id="config">
          <p>這是設定</p>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


瀏覽結果如下 :



不論是 nav-tabs 還是 nac-pills, 其頁籤或按鈕都是向左靠, 若再套用 nav-justified 的話, 頁籤或按鈕將不會向左靠, 而是平均分享頁面寬度, 例如 :


範例 3 : 導覽按鈕 nav-justified 樣式 [看原始碼]


<!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">
      <ul class="nav nav-pills nav-justified">
        <li><a href="#home" data-toggle="tab">首頁</a></li>
        <li><a href="#board" data-toggle="tab">留言板</a></li>
        <li><a href="#download" data-toggle="tab">下載區</a></li>
        <li><a href="#config" data-toggle="tab">設定</a></li>
      </ul>
      <div class="tab-content" style="padding:10px;">
        <div class="tab-pane active" id="home">
          <p>這是首頁</p>
        </div>
        <div class="tab-pane" id="board">
          <p>這是留言板</p>
        </div>
        <div class="tab-pane" id="download">
          <p>這是下載區</p>
        </div>
        <div class="tab-pane" id="config">
          <p>這是設定</p>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


瀏覽結果如下 :





上面範例即使瀏覽器寬度縮減, nav-tabs 與 nav-pills 的頁籤都不會往下摺疊, 但套用 nav-justified 則會折疊. 如果要固定上下折疊效果可明確套用 nav-stacked 樣式, 如下範例所示 :


範例 4 : 導覽按鈕 nav-stacked 樣式 [看原始碼]


<!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">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#home" data-toggle="tab">首頁</a></li>
        <li><a href="#board" data-toggle="tab">留言板</a></li>
        <li><a href="#download" data-toggle="tab">下載區</a></li>
        <li><a href="#config" data-toggle="tab">設定</a></li>
      </ul>
      <div class="tab-content" style="padding:10px;">
        <div class="tab-pane active" id="home">
          <p>這是首頁</p>
        </div>
        <div class="tab-pane" id="board">
          <p>這是留言板</p>
        </div>
        <div class="tab-pane" id="download">
          <p>這是下載區</p>
        </div>
        <div class="tab-pane" id="config">
          <p>這是設定</p>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


此例選定 nav-pills 樣式後再套用 nav-stacked 樣式, 使得導覽按鈕不論瀏覽器寬度為何君固定以上下堆疊方式呈現, 瀏覽結果如下 :




三. 頁籤內容來自遠端 (Ajax) : 

以上範例之導覽頁籤內容均來自網頁本身, Bootstrap 可否利用 Ajax 從遠端 (即伺服器) 取得呢? 可以的, 但是須搭配 Javascript 程式控制. 使用 Ajax 方式取得頁籤內容之導覽網頁時, li 元素中的超連結 a 元素須用 data-url 屬性指定遠端網頁來源之 URL, 參考 :

https://www.bootply.com/0uzrsETEjS

例如 :


範例 5 : 用 Ajax 取得遠端導覽頁籤內容 (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">
      <ul class="nav nav-tabs" id="tabs">
        <li class="active"><a href="#home" data-url="home.htm">首頁</a></li>
        <li><a href="#board" data-url="board.php">留言板</a></li>
        <li><a href="#download" data-url="download.php">下載區</a></li>
        <li><a href="#config" data-url="config.php">設定</a></li>
      </ul>
      <div class="tab-content" style="padding:10px;">
        <div class="tab-pane active" id="home"></div>
        <div class="tab-pane" id="board"></div>
        <div class="tab-pane" id="download"></div>
        <div class="tab-pane" id="config"></div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        $('#tabs a').click(function (e) {  //當按下 id=tabs 中的超連結時
          e.preventDefault();                   //阻止事件向上提升 (處理一次)    
          var url=$(this).attr("data-url");  //取得 data-url 屬性值
          var href=this.hash;                     //取得 href 值
          var pane=$(this);                       //轉成 DOM 物件
          $(href).load(url,function(result){   //載入頁嵌內容
            pane.tab('show');                           //將此頁籤設為顯示 (active)
            });
          });
        $('#home').load($('.active a').attr("data-url"), function(result){
          $('.active a').tab('show');   //載入首頁時
          });
        });
    </script>
  </body>
</html>


此例導覽頁籤中的 a 元素都改用 data-url 來指定遠端網頁檔案, 故必須先準備 home.htm, board.php, download.php, 以及 config.php 這四個遠端檔案, 其內容很簡單, 就 "這是下載區" 之類的. 例如 board.php 內容為 :


<?php
echo "<p>這是留言板</p>"
?>

而 home.htm 內容為 :


<p>這是首頁</p>


瀏覽結果如下 :



注意, 此例必須上傳伺服器才有效, 直接在本機檔案系統開啟無法載入頁籤內容, 會出現如下錯誤 :




上面的範例也可以改成透過 GET 傳參數, 例如 :


範例 6 : 用 Ajax 取得遠端導覽頁籤內容 (2) [看原始碼]


<!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">
      <ul class="nav nav-pills" id="tabs">
        <li class="active"><a href="#home" data-url="tabs.php?text=這是首頁">首頁</a></li>
        <li><a href="#board" data-url="tabs.php?text=這是留言板">留言板</a></li>
        <li><a href="#download" data-url="tabs.php?text=這是下載區">下載區</a></li>
        <li><a href="#config" data-url="tabs.php?text=這是設定">設定</a></li>
      </ul>
      <div class="tab-content" style="padding:10px;">
        <div class="tab-pane active" id="home"></div>
        <div class="tab-pane" id="board"></div>
        <div class="tab-pane" id="download"></div>
        <div class="tab-pane" id="config"></div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        $('#tabs a').click(function (e) {
          e.preventDefault();       
          var url=$(this).attr("data-url");
          var href=this.hash;
          var pane=$(this);
          $(href).load(url,function(result){
            pane.tab('show');
            });
          });
        $('#home').load($('.active a').attr("data-url"), function(result){
          $('.active a').tab('show');
          });
        });
    </script>
  </body>
</html>


此例頁籤超連結的 URL 都改成 tabs.php?text=xxx 了, 亦即將欲顯示的文字透過 text 參數傳遞給 tabs.php, 因此只要準備一個 tabs.php 即可, 內容如下 :


<p><?php echo $_GET['text'] ?></p>


同樣地, 此範例不能在本機測試, 須上傳伺服器.

導覽頁籤的每一個頁籤都可以改成按鈕選單, 只要將 li 頁籤套上 dropdown 樣式類別 (取代原案鈕選單中的最外層 div 元素), button 按鈕改成頁籤的超連結按鈕, 套用 dropdown-toggle 並加上 data-toggle="dropdown" 屬性即可, 如下列範例所示 :


範例 7 : 導覽頁籤內容為按鈕選單 [看原始碼]


<!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">
      <ul class="nav nav-tabs">
        <li><a href="#home" data-toggle="tab">首頁</a></li>
        <li><a href="#board" data-toggle="tab">留言板</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <label>圖書館</label>
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li>
              <a href="http://webpac.ksml.edu.tw" target="_blank">市立圖書館</a>
            </li>
            <li>
              <a href="https://nkust.primo.exlibrisgroup.com/" target="_blank">高科大圖書館</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <label>網路書店</label>
            <span class="caret"></span>
          </a>
          <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>
        </li>
      </ul>
      <div class="tab-content" style="padding:10px;">
        <div class="tab-pane active" id="home">
          <p>這是首頁</p>
        </div>
        <div class="tab-pane" id="board">
          <p>這是留言板</p>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        });
    </script>
  </body>
</html>


此例只有前兩個頁籤有內容, 因此在雙層 div 頁籤內容部分只需要兩個內層 div 分別放置首頁與留言板之內容 (tab-pane); 而後兩個頁籤是按鈕選單, 以 a 元素超連結當按鈕用, 瀏覽結果如下 :





簡簡單單幾乎不須寫 Javascript 程式就能建立功能豐富的專業網頁, Bootstrap 實在太好用了!

參考 :

Creating Tabs with Bootstrap
如何利用Bootstrap的標籤(Tabs)和導覽列(Navigation Bar)
How to use AJAX loading with Bootstrap tabs?
# Bootstrap tabs with Ajax

好用的 Mega 雲端硬碟

昨天收到 ASUS 寄來推銷網路硬碟的信, 1 TB 一年 350 元, 一天不到一元, 可說相當便宜, 我的是 5GB 免費版, 有點心動, 但一年後要續約可能就沒這價格了, 考慮中.

https://www.asuswebstorage.com/
新會員獨享方案1TB → NT$350




另外看到一篇介紹雲端硬碟的文章 :

5大雲端硬碟超級比一比

其中 Mega 就是以前赫赫有名的 Mega Upload, 免費空間有 50GB, 比 Dropbox, OneDrive, ASUS 等等的 5GB 要大很多, 所以就註冊一個來用用, 沒想到我的信箱之前就註冊過了, 登入試用覺得介面簡單易用, 而且 Google Play 有 App, 手機傳遞分享相片圖片檔案很方便.

https://mega.nz/
MEGA 超大 50 GB 免費雲端硬碟註冊、下載教學




用過 Mega 介面覺得 Dropbox 真是難用, 找半天都不知下載鈕藏到哪兒去了, 要不是筆電有安裝同步軟體傳檔方便, 早就被我拋棄了.

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 真是好棒棒, 我越來越喜歡了!

Bootstrap 4 學習筆記索引

Bootstrap 是能幫助網頁設計師或缺乏版面美術訓練的後端工程師快速搭建專業網頁外觀的即戰前端框架, 目前已測試整理之功能如下 : 

Bootstrap 4 學習筆記 (一) : 環境配置
Bootstrap 4 學習筆記 (二) : 網格與容器
Bootstrap 4 學習筆記 (三) : 表格
Bootstrap 4 學習筆記 (四) : 圖示與按鈕
Bootstrap 4 學習筆記 (五) : 文字與圖片效果
Bootstrap 4 學習筆記 (六) : 表單
Bootstrap 4 學習筆記 (七) : 按鈕選單
Bootstrap 4 學習筆記 (八) : 導覽頁籤
Bootstrap 4 學習筆記 (九) : 導覽列
# Bootstrap 4 學習筆記 (十) : 面板與手風琴


~進行中~