本系列之前的測試文章參考 :
# 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)" 回應回去而已, 瀏覽結果如下 :
注意, 此例必須上傳到伺服器瀏覽, 在本地瀏覽無效果.
