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)" 回應回去而已, 瀏覽結果如下 :




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

沒有留言:

張貼留言