2015年4月18日

如何利用Bootstrap的標籤(Tabs)和導覽列(Navigation Bar)


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

匯入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官方網站學習所整理之筆記

4 則留言: