雖說用來製作 NavBar 的元件其實有很多，但會想試著使用 Bootstrap，實在是他太火紅了，簡直就像是一位專業的美編在你身邊，專業到連他說什麼我都聽不懂，因為他幫我定義好的東西太多了，讓我不得不好好一邊 K文件一邊做筆記。
首先在自己的頁面上，需要先將會引用到的 .css、 .js 加上去，只不過，為了讓手機使用者在瀏覽頁面時不要看得太吃力，所以加上了 @media 來設定 viewport，頁面的開始，就從下面開始說起：
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
第一個 <meta http-equiv="X-UA-Compatible" content="IE=edge"> ，是為了讓 IE 能夠相容而做的設定。
第二個 <meta name="viewport" content="width=device-width, initial-scale=1"> ，則是用來設定 ViewPort，我指定他的寬度跟我設備的寬度一樣，預設的縮放則是設為 1 ，表示使用原尺寸 100%。initial-scale 可以設定從 0 ~ 10.0 的範圍，數值小於 1 表示縮小，大於 1 表示放大。
接下來，則是分別引用了 bootstrap 的 css、jQuery 的 js 以及 bootstrap 的 js 。
而 NavBar 的主角，則是使用 <nav></nav> 來登場。而這裡要注意的，則是有一大堆的 class 要慢慢分清楚並對應到正確的元件上來使用。
這個 <nav class="navbar navbar-default"> ，我們指出是要使用 navbar 的樣式類別，而且是還額外要用 navbar-default 這樣式。
為了讓手機這類小螢幕的裝置可以清楚的顯示，bootsrtap 讓我們可以在當畫面寬度小於 768px 時，自動把 NavBar 以垂直折疊的方式來顯示。
所以我們要用一個 div 來定義所謂的 navbar-header 。
<div class="navbar-header"> <a href="#" class="navbar-brand">正妹快搜網</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div>
<a href="#" class="navbar-brand">正妹快搜網</a> ，是我們看到的 Navbar 標題。而後面的 button ，則是透過 三條 橫線來表示，這裡的橫線則是使用 span 並指定他的 class 就可以使用 bootstrap 已經幫我們定義好的樣式直接使用。
關於這個 button 還有幾個可以說明。
class="navbar-toggle"，表示這個 button 的樣式是使用 navbar-toggle
data-toggle="collapse"，表示按鈕按下的動作是屬於「折疊」的方式
data-target="#myNav"，表示這個按鈕對應到表單的哪個元件 ID，#myNav 是接下來要介紹的元件ID。
<div id="myNav" class="collapse navbar-collapse">
<ul class="navbar-nav nav">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-heart"></span> Tour</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span> Photography</a></li>
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> About US <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-plane"></span> 經營理念</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 攝影團隊</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 加入我們</a></li>
</ul>
</li>
</ul>
</div>
現在登場的，則是重要的角色，因為 NavBar 裡的所有項目，都是定義在這裡。因為要寫很多，所以很重。
首先，使用 div ，而他的 ID ，就姑且取名為 myNav ，也就是上面提到，要用 #myNav 要找得對象。他則是採用 collapse 樣式類別，額外加上 navbar-collapse 樣式。這個 navbar-collapse 樣式，就是讓 NavBar 在螢幕寬度小於 768px 時會被隱藏的關鍵。
選單清單可以是巢狀式多層的，每一層則是透過 <ul> <li></li> ... </ul> 來完成。
在範例的第一層裡，<ul class="navbar-nav nav"> ，指出 navbar 元件選單的樣式類別是 navbar-nav ，且額外要加上 nav 樣式。
而在 <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>，是把每個清單的項目都放在個別的 li 元件中，超連結 <a href="#"> ，裡面的 href 屬性則是定義了該選單被按下去之後，要跳轉的頁面。
這裡有個很特別的地方，就是 bootstrap 事先將很多常用的小圖 icon 都定義好了，你可以到 glyphicons 找到這些圖示。要使用的時候，僅僅只是使用一個 span 元件，然後指定他的樣式類別為 glyphicon ，而額外的樣式定義，就是那些圖示的名稱。
在一個具有子選單的 li ，它會長成這樣 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> ，class="dropdown-toggle" 表示他的樣式類別是 dropdown-toggle ， data-toggle="dropdown" 則表示這是一個下拉選單。
<span class="caret"></span> 則是透過 bootstrap 所定義好的 caret 樣式類別套用到 span 裡， caret 可以讓我們產生一個到三角形的圖示。一般在選單中，也是透過這個倒三角形表示選單裡還有子選單。
第二層的選單，出現了第二個 ul 了。<ul class="dropdown-menu">，他使用的樣式類別為 dropdown-menu 。裡面的 li 基本上也是跟上一層的使用方法是一樣的。唯獨多了一個 <li class="divider"></li>，他主要也是利用 bootstrap 事先定義好的樣式類別 divider 達到在選單中呈現「分隔線」的效果。
完整程式碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyPage.aspx.cs" Inherits="bot02.MyPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand">正妹快搜網</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="myNav" class="collapse navbar-collapse">
<ul class="navbar-nav nav">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-heart"></span> Tour</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span> Photography</a></li>
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> About US <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-plane"></span> 經營理念</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 攝影團隊</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 加入我們</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</form>
</body>
</html>
參考：
01：網頁程式設計的16堂課： HTML5‧CSS3‧JavaScript ‧jQuery‧AJAX‧Bootstrap‧Google Maps
02：https://getbootstrap.com/components/
沒有留言:
張貼留言