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