如何利用Bootstrap的標籤（Tabs）和導覽列（Navigation Bar） ~ PJCHENder<br>那些沒告訴你的小細節

這篇文章主要是最為我學習Bootstrap的一些筆記整理，把每次修改的地方用顏色標記，方便閱讀，所有的code都來自W3Schools和Bootstrap官方網站的教學。

匯入Bootstrap

第一步一定要記得匯入Bootstrap的CSS，然後在後面的地方，因為會用到jQuery，所以需要一併把jQuery和Bootstrap的javascript也一起匯入。

<head>
  <title>Bootstrap Navigation Bar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">//匯入bootstrap
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>//匯入jQuery
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>//匯入bootstrap javascript
</head>

HTML基本標籤

在HTML中，我們會使用<ul>來製作表單，ul是unorder list（非順序性清單）的意思，<ul>裡面會搭配<li>來建立清單，像是：

<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
</body>

因此，當我們輸入以上內容時，就會有如下的表單

一般來說，如果我們想要把表單變成水平排列，我們可以在ul的地方改成 <ul class="list-inline">

基本標籤tabs

接下來，我們就可以開始加一些bootstrap的關鍵字來讓它更好看了，我們可以在ul的地方改成<ul class="nav nav-tabs">，像是這樣：

    <ul class="nav nav-tabs">
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>

這時候，結果就會變成如下：

這就是基本的tabs了，如果我們要讓某個tabs看起來像是目前的頁面，可以用<li class="active">：

<body>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
</body>

可下拉式的標籤（dropdown tabs）

為了製作可下拉式選單，我們會用到的關鍵字包含許多，整個程式碼如下：

<ul class="nav nav-tabs">
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">First</a></li>
                <li><a href="#">Second</a></li>
                <li><a href="#">Third</a></li>
            </ul>
        </li>
    </ul>

<li class="dropdown">：其中，我們要在希望增加下拉式選li的地方加上這段，以建立一個超連結，而這個超連結的class是<class="dropdown-toggle">。

<data-toggle="dropdown">：這個data-toggle是用來使用javascript的，讓網友點擊該超連結時，會出現下拉式選單，如果沒有這段，不管怎麼點，下拉式選單都不會出現。

<span class="caret">：這是用來產生「下三角形」的符號，用來暗示網友這是下拉式選單，沒有這個的話，下三角形還是在，只是網友點擊之後，才知道這是下拉式選單。

<ul class="dropdown-menu">：接著，要建立一個新的 <ul>標籤，這個標籤的裡面，放的就是下拉式選單的內容，裡面記得要加上「dropdown-menu」，沒有這段的話，下拉式選單不會隱藏在主選單當中。

結果就會像這樣

動態性標籤（Dynamic Tabs）

這個的作法，是讓網頁中文字的內容，可以隨著點選的tab而動態（淡入淡出）的效果，這樣的效果同樣會用到很多不同的語法：

<ul class="nav nav-tabs">
        <li><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">Page 1</a></li>
        <li><a data-toggle="tab" href="#menu2">Page 2</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">First</a></li>
                <li><a href="#">Second</a></li>
                <li><a href="#">Third</a></li>
            </ul>
        </li>
    </ul>
        
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <p>Some content.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
            <h3>Menu 1</h3>
            <p>Some content in menu 1.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Some content in menu 2.</p>
        </div>
    </div>

data-toggle="tab"：這會產生相對應的javascript語法，如果沒有這個的話，點標籤會沒有任何反應，所以每一個我們希望點了會有反應的標籤，都要加上這段語法。

在超連結的地方，我們可以看到，超連結網址的名稱，要和下面內容id的名稱一致，第一個標籤會連到id="home"。

class="tab-content"：這個的目的是要讓下面不同div呈現的內容都會在同樣的位置，如果沒有這個的話，因為三個div是有順序的，所以位置會變成由上往下來排（不會在相同位置處呈現），加上這個之後，等於讓每個div的位置，都是出現在最左上角。

tab-pane：tab-pane和上面tab-content的效果很相似，沒有這個的話，div內容的位置也會出現問題。

fade：以淡入、淡出的方式呈現，沒有這個的話，就會像超連結一樣，點了直接消失、出現。

in：意思是先淡入（顯示）的意思，通常是用在首頁，如果沒有這個in的話，網友一開始進到home這個頁面時會沒有任何內容，因為home這個頁面還沒有淡入（顯示）。

active：搭配in一起使用，表示這是一開始就要活動的頁面，如果沒有這個的話，網友一開始進到home這個頁面時也不會有任何內容。

結果就像這樣，動畫的效果可以到W3CSchool觀看：

基本的導覽列（navigation bar）

在瞭解了標籤（Tabs）的使用後，我們可以來看要怎麼用Bootstrap做導覽列，最基本導覽列的寫法如下：

<nav class="nav navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a data-toggle="tab" href="#home">Home</a></li>
                <li><a data-toggle="tab" href="#menu1">Page 1</a></li>
                <li><a data-toggle="tab" href="#menu2">Page 2</a></li>
            </ul>
        </div>
    </nav>    
        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
                <h3>HOME</h3>
                <p>Some content.</p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <h3>Menu 1</h3>
                <p>Some content in menu 1.</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>Menu 2</h3>
                <p>Some content in menu 2.</p>
            </div>
        </div>

先來看一下結果：

nav：在導覽列中，我們會用到<nav>這個html標籤，這裡只是沿用<nav>這個標籤，如果要用<div>也是可以的（註：在官網中有特別說明，若使用的是div這個標籤，最好可以加上role="navigation"，以利無障礙網頁的設計）。另外一般來說，當我們單純使用<nav>這個標籤時，顯示的效果會像這樣：

class="nav navbar-default"：要建立導覽列我們會用到nav這個class，而navbar-default表示這裡顯示的是預設值的navbar，底色是灰色的。如果你希望底色是黑的，文字是白的，可以把navbar-default改成.navbar-inverse，顏色會變成這樣子

class="navbar-header"：主要是告訴它，我接下來放的是導覽列的標頭，後面一般會接網頁的logo或是名稱，如果要接圖片的話，只需把裡面文字的地方（Brand）改成<img alt="Brand" src="...">

。

class="nav navbar-nav"：這裡這兩個class都是關鍵字，少了nav的話，會變成這樣子

沒有輸入navbar-nav的話，會變成

所以，這兩個關鍵字都一定要打。

另外，如果你沒有修改，如同剛剛標籤（Tabs）的地方，你還是用<ul class="nav nav-tabs">的話，那結果會變成這樣子

固定在頁頂的導覽列

現在很流行的是把導覽列固定在頁面的頂端，讓它不會隨著視窗的捲動而改變它的位置，只要在正確的位置加上.navbar-fixed-top，像這樣：

<div class="nav navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div >
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a data-toggle="tab" href="#home">Home</a></li>
                <li><a data-toggle="tab" href="#menu1">Page 1</a></li>
                <li><a data-toggle="tab" href="#menu2">Page 2</a></li>
            </ul>
        </div>
    </div>

結果會像這樣

同樣的道理，如果你要讓它固定在頁底，只要把top改成bottom就可以了，也就是.navbar-fixed-bottom。（註：當我們內文的文字呈現在網頁太高的位置時，有可能會被這個固定的導覽列所擋到，這時候，可以在CSS的地方加上body { padding-top: 70px; }，來讓我們網頁的內容下降一點，每個導覽列預設的高度是50px。

將部分導覽列置於網頁右側

有些元件會放在網頁的右上方，我們只要在相對應的地方加上.navbar-right就可以了，像是這樣：

 <nav class="nav navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li><a data-toggle="tab" href="#home">Home</a></li>
                    <li><a data-toggle="tab" href="#menu1">Page 1</a></li>
                    <li><a data-toggle="tab" href="#menu2">Page 2</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a data-toggle="tab" href="#"><span class="glyphicon glyphicon-log-in"></span> Log in</a></li>
                    <li><a data-toggle="tab" href="#">Log out</a></li>
                    <li><a data-toggle="tab" href="#"><span class="glyphicon glyphicon-user"></span> Admin</a></li>
                </ul>
            </div>
        </div>
    </nav>

結果會像這樣子：

class="glyphicon glyphicon-log-in"這裡是使用bootstrap所提供的icon，直接用class就可以插入這些icon。

適應性網頁的導覽列

在適應性網頁設計中（RWD），當網頁寬度太小時，這些導覽列會直接縮成一個按鈕（通常長的像「三」），我們一樣可以寫出這樣的語法來：

    <nav class="nav navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span> 
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">//底下放要縮放的內容
                <ul class="nav navbar-nav">
                    <li><a data-toggle="tab" href="#home">Home</a></li>
                    <li><a data-toggle="tab" href="#menu1">Page 1</a></li>
                    <li><a data-toggle="tab" href="#menu2">Page 2</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Log in</a></li>
                    <li><a href="#">Log out</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Admin</a></li>
                </ul>
            </div>
        </div>
    </nav>

這段程式碼當我們把網頁視窗縮小的時候，會顯示出如下的效果：

然後我們來看一下這段程式碼寫了些什麼：

首先，我們要建立一個長的像「三」的按鍵，我們要透過<button></button>，這裡面會有一些關鍵字，包含：

class="navbar-toggle"：這個是關鍵字，有它才能讓我們順利的看到「三」，而且出現在視窗的右方。

data-toggle="collapse"：這是用來製作動畫效果的，沒有的話，我們點「三」的時候不會有任何反應。

data-target="#myNavbar"這裡面的myNavbar是一個CSS的id，我們可以取任意的名字，只是一定要跟下面縮放的id對應到。

<span class="icon-bar"></span>這段這是用來產生「一」，當有三個「一」時，合在一起就會變「三」的按鍵了。

class="collapse navbar-collapse"：這兩個也是關鍵字，幫助我們在正常視窗的情況下，可以看到原本的導覽列。

讓導覽列根據網友瀏覽的位置而改變（Scrollspy）

在常用在全頁式的網頁，隨著網友瀏覽內容的不同，導覽列的狀態也會隨著改變。

語法：

<style>
       body{ 
           padding: 70px;
           position:relative;
       }
    </style>
</head>
<body  data-target="#navbar-spy" data-spy="scroll" >
<div>
    <nav class="nav navbar-default navbar-fixed-top" id="navbar-spy">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span> 
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#menu1">Page 1</a></li>
                    <li><a href="#menu2">Page 2</a></li>
                </ul>
            </div>
        </div>
    </nav>    
    <div style="font-size:36px">
        <div id="home">
            <h1>Home</h1>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>
        </div>
        <div id="menu1">
            <h1>Page 1</h1>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>
        </div>
        <div id="menu2">
            <h1>Page 2</h1>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>I need more content<br>
        </div>
    </div>
</div>

這段語法的效果會是這樣：

當我把網頁右方捲軸（Scroll）捲到Home的地方時，上方導覽列的Home就會顯示

當我把網頁右方捲軸（Scroll）捲到Page1的地方時，上方導覽列的Page1就會顯示

當我把網頁右方捲軸（Scroll）捲到Page2的地方時，上方導覽列的Page2就會顯示

讓我們來看看這段語法：

首先，我們看到，我們的捲軸是在我們的網頁視窗上，所以是在「body」，為了要使用這個功能，我們必須要先把body的position設成relative，再來在我們的<body>標籤後，我們要加上一些關鍵字：

data-target="#navbar-spy"：這個名稱可以隨便取，但是必須要和導覽列裡的id相對應。

data-spy="scroll"：這個的意思是請它要幫我們偵測的是body被捲軸捲動（scroll）的情形。

接下來，在我們的<nav>標籤中，就要填上剛剛對應的id名稱，像這裡是id="navbar-spy"。

最後，則是要在導覽列的超連結和內容區塊都填上一致的id，這樣它就可以自動幫我們偵測了。

以上內容均為本人在W3Schools和Bootstrap官方網站學習所整理之筆記

PJCHENder
那些沒告訴你的小細節

—不怕面對改變，敢於挑戰不熟悉的事物—

2015年4月18日

如何利用Bootstrap的標籤（Tabs）和導覽列（Navigation Bar）

4 則留言: