Bootstrap-Tabs、Toolbar與導覽功能

by vivid 23. 九月 2015 10:01

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N150916302
出刊日期:2015/09/23
開發工具:Visual Studio 2013 Ultimate Update 4
版本:bootstrap 3.3.4

在這一篇文章中,我們將介紹在Bootstrap中的Tabs、Toolbar與Navbar三種設計UI的元件。

Tabs分頁

當網頁中的資訊非常多時,網頁看起來很複雜,我們可以利用Tabs(分頁)將相關的資料分組到不同分頁,一次只顯示一個分頁的內容,使用者可以利用分頁標籤來切換到不同分頁的內容做檢視。Bootstrap提供非常多樣式,可以展現分頁的資料。

你可以使用一個<ul>標籤來設計分頁的表頭,每一個分頁的內容使用<div>包起來。在<ul>中的<li>項目中放<a>標籤,點選<a>標籤時,可以切換到不同分頁內容。參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>

</head>
<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#cat_box" data-toggle="tab">cat box</a></li>
            <li><a href="#cat_cage" data-toggle="tab">cat cage</a></li>
            <li><a href="#cat_drunk" data-toggle="tab">cat drunk</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="cat_box">
                <h4>Cat Box</h4>
                <img src="images/cat_box.png" />
            </div>
            <div class="tab-pane" id="cat_cage">
                <h4>Cat Cage</h4>
                <img src="images/cat_cage.png" />
            </div>
            <div class="tab-pane" id="cat_drunk">
                <h4>Cat Drunk</h4>
                <img src="images/cat_drunk.png" />
            </div>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

<ul>標籤套用了「nav」與「nav-tabs」樣式,<ul>中的<li>項目,其中放了<a>標籤,它的href屬性指向下方有套用「tab-content」樣式的<div>標籤,此<div>標籤用來顯示分頁內容。<a>標籤還套用了「data-toggle="tab"」,這樣點選超連結時,才能正確切換到分頁內容。

套用「tab-content」樣式的<div>標籤中包含三個<div>,分別代表三個分頁內容,個別的分頁內容則套用「tab-pane」樣式。

預設Bootstrap不會顯示任何分頁內容,因此第一個分頁內容(div)套用了「active」樣式,這樣此分頁的內容才會顯示在畫面上。此範例執行的結果看起來如下圖所示:

clip_image002

圖 1:分頁。

點選表頭的連結可以切換到不同分頁,請參考下圖所示:

clip_image004

圖 2:切換到不同分頁。

在Tabs使用nav-pills樣式

Bootstrap設計了「nav-pills」樣式,可以顯示不同於「nav-tabs」樣式的分頁表頭,我們只需要將上個例子的「nav-tabs」樣式改為「nav-pills」樣式,就可以看出他們的不同。參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>

</head>
<body>
    <div class="container">


        <ul class="nav nav-pills">
            <li class="active"><a href="#cat_box" data-toggle="tab">cat box</a></li>
            <li><a href="#cat_cage" data-toggle="tab">cat cage</a></li>
            <li><a href="#cat_drunk" data-toggle="tab">cat drunk</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="cat_box">
                <h4>Cat Box</h4>
                <img src="images/cat_box.png" />
            </div>
            <div class="tab-pane" id="cat_cage">
                <h4>Cat Cage</h4>
                <img src="images/cat_cage.png" />
            </div>
            <div class="tab-pane" id="cat_drunk">
                <h4>Cat Drunk</h4>
                <img src="images/cat_drunk.png" />
            </div>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

此範例執行的結果看起來如下圖所示,預設表頭的分頁按鈕寬度和配合文字寬度調整:

clip_image006

圖 3:使用nav-pills樣式。

您可以利用「nav-justified」樣式來變更分頁按鈕的寬度,寬度會隨著瀏覽器的寬度來自動調整,例如以下範例程式碼:

<ul class="nav nav-pills nav-justified">
            <li class="active"><a href="#cat_box" data-toggle="tab">cat box</a></li>
            <li><a href="#cat_cage" data-toggle="tab">cat cage</a></li>
            <li><a href="#cat_drunk" data-toggle="tab">cat drunk</a></li>
</ul>

寬度夠時,Tabs表頭的超連結以水平方向呈現,寬度一致,執行的結果看起來如下圖所示:

clip_image008

圖 4:使用nav-pills樣式。

寬度較小時會動堆疊,執行的結果看起來如下圖所示:

clip_image010

圖 5:使用nav-pills樣式。

若不管瀏覽器寬、高,永遠都想使用堆疊方式來呈現,則可以在<ul>標籤上改用「nav-stacked」樣式,例如以下範例程式碼:

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#cat_box" data-toggle="tab">cat box</a></li>
    <li><a href="#cat_cage" data-toggle="tab">cat cage</a></li>
    <li><a href="#cat_drunk" data-toggle="tab">cat drunk</a></li>
</ul>

切換分頁時,你還可以搭配動畫效果來顯示下方的分頁內容,Bootstrap定義「fade」樣式,來達到這個功能,參考以下範例程式碼,第一個分頁內容另外套用了「in」樣式,如此才能在網頁一載入時,就顯示此分頁內容:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>

</head>
<body>
    <div class="container">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#cat_box" data-toggle="tab">cat box</a></li>
            <li><a href="#cat_cage" data-toggle="tab">cat cage</a></li>
            <li><a href="#cat_drunk" data-toggle="tab">cat drunk</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active fade in" id="cat_box">
                <h4>Cat Box</h4>
                <img src="images/cat_box.png" />
            </div>
            <div class="tab-pane fade" id="cat_cage">
                <h4>Cat Cage</h4>
                <img src="images/cat_cage.png" />
            </div>
            <div class="tab-pane fade" id="cat_drunk">
                <h4>Cat Drunk</h4>
                <img src="images/cat_drunk.png" />
            </div>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

整合Dropdown與Tabs

我們也可整合Dropdown與Tabs兩種介面,只要將Tabs中的<li>項目當做是Dropdown直接套用「dropdown」樣式,然後在Dropdwon之中使用<a>標籤,並套用「data-toggle="dropdown"」,不要使用<button>標籤來展開、收合選單,這樣dropdown的樣式才會和Tabs表頭的樣式一致。參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>

</head>
<body>
    <div class="container">
        <ul class="nav nav-pills nav-justified">
            <li class="active"><a href="#cat_box" data-toggle="tab">cat box</a></li>
            <li><a href="#cat_cage" data-toggle="tab">cat cage</a></li>
            <li><a href="#cat_drunk" data-toggle="tab">cat drunk</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    Cat Lists
                    <span class="glyphicon glyphicon-arrow-down"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#cat_box" data-toggle="tab">
                            &nbsp;<span class="glyphicon glyphicon-thumbs-down"></span>
                            cat box
                        </a>
                    </li>
                    <li>
                        <a href="#cat_cage" data-toggle="tab">
                            &nbsp;<span class="glyphicon glyphicon-hand-right"></span>
                            cat cage
                        </a>
                    </li>
                    <li>
                        <a href="#cat_drunk" data-toggle="tab">
                            &nbsp;<span class="glyphicon glyphicon-hand-left"></span>
                            cat drunk
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active fade in" id="cat_box">
                <h4>Cat Box</h4>
                <img src="images/cat_box.png" />
            </div>
            <div class="tab-pane fade" id="cat_cage">
                <h4>Cat Cage</h4>
                <img src="images/cat_cage.png" />
            </div>
            <div class="tab-pane fade" id="cat_drunk">
                <h4>Cat Drunk</h4>
                <img src="images/cat_drunk.png" />
            </div>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

Dropdown內<li>之中的<a>項目則要套用「data-toggle="tab"」,這樣才可以在點選到超連結時,切換到正確分頁顯示,此範例執行的結果看起來如下圖所示:

clip_image012

圖 6:整合Dropdown與Tabs。

Toolbar工具列

Toolbar(工具列)通常不會拿來當做網站的導覽系統,而是拿來執行一些常用的命令。一般而言Toolbar都是由一到多個按鈕組成,有時也會包含下拉式清單方塊,其中包含多個選項,每個選項可以執行不同的命令。

我們來看以下範例,套用「btn-toolbar」樣式的<div>標籤就可以視為工具列,「role="toolbar"」是提供給螢幕助讀程式識別用的。工具列中可以包含多個群組,將相關操作的按鈕包裝在一起,例如範例使用到三個<div>標籤,套用了「btn-group」樣式,每個群組中包含不同個數的按鈕:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>

</head>
<body>
    <div class="container">
 
        <div class="btn-toolbar" role="toolbar" >
            <div class="btn-group">
                <button type="button" class="btn btn-default">Open</button>
                <button type="button" class="btn btn-default">Save</button>
                <button type="button" class="btn btn-default">Save All</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default">Comment</button>
                <button type="button" class="btn btn-default">Uncomment</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default">Find</button>
            </div>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

此範例執行的結果看起來如下圖所示:

clip_image014

圖 7:Toolbar工具列。

美化工具列

你可以利用Bootstrap提供的樣式來美化工具列,例如按鈕的顏色可以套用「btn-primary」、「btn-danger」等內建樣式;工具列上的按鈕可以套用「btn-lg」、「btn-sm」、「btn-xs」等樣式來決定大小。工具列上的按鈕分組也可以套用「btn-group-lg」、「btn-group-sm」與「btn-group-xs」三種尺寸。按鈕則可以加上內建的小圖示來顯示,例如以下程式碼範例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>

</head>
<body>
    <div class="container">
 
        <div class="btn-toolbar" role="toolbar" >
            <div class="btn-group">
                <button type="button" class="btn btn-primary">Open</button>
                <button type="button" class="btn btn-danger">Save</button>
                <button type="button" class="btn btn-info">Save All</button>
            </div>
            <div class=" btn-group btn-group-lg">
                <button type="button" class="btn btn-default btn-lg">Comment</button>
                <button type="button" class="btn btn-default btn-lg">Uncomment</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default glyphicon glyphicon-search">&nbsp;Find</button>
            </div>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

此範例執行的結果看起來如下圖所示:

clip_image016

圖 8:美化工具列。

工具列整合Dropdown

Toolbar工具列也可以整合Dropdown顯示下拉式清單資料,參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>

</head>
<body>
    <div class="container">
 
        <div class="btn-toolbar" role="toolbar" >
            <div class="btn-group">
           
                <div class="btn-group">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                        myMenu
                        <span class="glyphicon glyphicon-arrow-down"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="#">
                                &nbsp;<span class="glyphicon glyphicon-thumbs-down"></span>
                                Open
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                &nbsp;<span class="glyphicon glyphicon-hand-right"></span>
                                Add
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                &nbsp;<span class="glyphicon glyphicon-hand-left"></span>
                                Save
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                &nbsp;<span class="glyphicon">&nbsp;</span>
                                Exit
                            </a>
                        </li>
                    </ul>
                </div>
 
                <button type="button" class="btn btn-primary">Open</button>
                <button type="button" class="btn btn-danger">Save</button>
            </div>
            <div class=" btn-group btn-group-lg">
                <button type="button" class="btn btn-default btn-lg">Comment</button>
                <button type="button" class="btn btn-default btn-lg">Uncomment</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default glyphicon glyphicon-search">&nbsp;Find</button>
            </div>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

此範例執行的結果看起來如下圖所示:

clip_image018

圖 9:整合Dropdown顯示下拉式清單資料。

Navbar導覽列

Navbar導覽列應用在選單系統,在Bootstrap中,基本的導覽列使用「navbar」樣式定義, 參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>

</head>
<body>
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">My Web</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

我們使用「navbar-default」預設樣式來設定導覽列前景、背景顏色。Role主要用來提供資訊給螢幕助讀程式資訊的。導覽列的<div>標籤中,包含一個<div>套用「navbar-header」,代表導覽列表頭,其中的<a>套用「navbar-brand」樣式,用來描述網站名稱。導覽列中的其他選項則使用<ul>定義,套用「nav navbar-nav」樣式。此範例執行的結果看起來如下圖所示:

clip_image020

圖 10:Navbar導覽列。

navbar-header中的<button>套用「navbar-toggle」樣式,只有在瀏覽器寬度太窄時<button>才會自動出現。<button>加上了「data-toggle="collapse"」,當瀏覽器寬度太窄,當使用者按下按鈕,便可以展開data-target所指定的「.navbar-collapse」項目。<button>中的「<span class="icon-bar"></span>」項目就會成為按鈕中的一條橫線,此範例執行的結果看起來如下圖所示:

clip_image022

圖 11:按下按鈕展開選單項目。

在Navbar使用表單

Navbar之中也可以加入表單(Form)、文字、連結或圖片…等等UI項目,例如以下範例程式碼使用簡單的<form>標籤加上搜尋的介面,<form>標籤套用了「navbar-form」樣式,可以和Navbar其它項目整合在一起;而「navbar-right」樣式則讓這個表單中的文字方塊和按鈕停駐在畫面的右方:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>

</head>
<body>
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">My Web</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="search" class="form-control " name="search" value=" " />
                            <button type="submit" class="btn btn-default glyphicon glyphicon-search"/>
                         
                        </div>
                    </form>
                </div><!-- /.navbar-collapse -->

            </div><!-- /.container-fluid -->
        </nav>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

此範例執行的結果看起來如下圖所示:clip_image024

圖 12:使用表單。

不使用RWD的導覽列

若不需要Navbar在瀏覽器寬度不夠時,自動出現按鈕來展開選單這個功能,你可以移除「data-toggle」、「collapse navbar-collapse」等定義與相關標籤,來簡化導覽列,例如以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }

        .navbar-form {
            border-bottom: none !important;
        }
    </style>

</head>
<body>
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">My Web</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="search" class="form-control " name="search" value=" " />
                        <button type="submit" class="btn btn-default glyphicon glyphicon-search" />
                    </div>
                </form>
            </div><!-- /.container-fluid -->
        </nav>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

此範例執行的結果看起來如下圖所示:

clip_image026

圖 13:導覽列。

在瀏覽器寬度不夠時,選單項目會自動堆疊顯示,參考下圖所示:

clip_image028

圖 14:選單項目會自動堆疊顯示。

Navbar項目

Navbar中的項目可以是前文提及的Dropdown項目,也可以是一個按鈕,或超連結,你也可以在Navbar之中顯示靜態文字。Bootstrap為按鈕定義了「navbar-btn」樣式;為超連結定義了「navbar-link」樣式;為靜態文字定義「navbar-text」樣式。例如以下的範例程式碼,在設定「nav navbar-nav」樣式的<ul>最後,加入一個<li>項目,設定為Dropdown:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }

        .navbar-form {
            border-bottom: none !important;
        }
    </style>

</head>
<body>
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">My Web</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            myMenu
                            <span class="glyphicon glyphicon-arrow-down"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a href="#">
                                    &nbsp;<span class="glyphicon glyphicon-thumbs-down"></span>
                                    Open
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    &nbsp;<span class="glyphicon glyphicon-hand-right"></span>
                                    Add
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    &nbsp;<span class="glyphicon glyphicon-hand-left"></span>
                                    Save
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    &nbsp;<span class="glyphicon">&nbsp;</span>
                                    Exit
                                </a>
                            </li>
                        </ul>

                    </li>
                </ul>
                <p class="navbar-text navbar-right">
                    Your best choice.
                </p>
                <input type="button"
                        class="btn btn-primary navbar-btn" value="New"/>
                   
             
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="search" class="form-control " name="search" value=" " />
                        <button type="submit" class="btn btn-default glyphicon glyphicon-search" />
                    </div>
                </form>

            </div><!-- /.container-fluid -->
        </nav>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

範例中的<p>標籤套用「navbar-text」樣式,顯示靜態文字。而Input(type=button)按鈕則套用「navbar-btn」樣式,此範例執行的結果看起來如下圖所示:

clip_image030

圖 15:整合Dropdown、靜態文字與按鈕。

Navbar位置

Navbar位置可以固定出現在網頁的最上方,或網頁的最下方。若要固定出現在網頁的最上方可以套用「navbar-fixed-top」樣式:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

此範例執行的結果看起來如下圖所示:

clip_image032

圖 16:Navbar位置固定出現在網頁的最上方。

若要固定出現在網頁的最上方可以套用「navbar-fixed-bottom」樣式:

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">

此範例執行的結果看起來如下圖所示:

clip_image034

圖 17:Navbar位置固定出現在網頁的最下方。

Breadcrumb網站地圖

Breadcrumb通常用來設定網站地圖功能,讓使用者得知目前所在的網頁位置。參考以下範例程式碼,在Bootstrap之中可以使用<ul>與<li>來設計網站地圖,在<ul>項目中套用「breadcrumb」樣式,目前所在的位置就套用「active」樣式。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="active">Contact</li>
        </ul>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

此範例執行的結果看起來如下圖所示:

clip_image036

圖 18:使用Breadcrumb。

Pagination分頁

在網頁顯示資料時,若資料太多,應該分頁(page)來顯示,Pagination用於顯示page的超連結,Pagination可以使用<ul>與<li>標籤定義,只要在<ul>標籤上套用「pagination」樣式。「active」樣式套用到目前看到的頁面;「disabled」樣式表示此連結不可點選。「&laquo;」符號表示向左的箭頭;「&raquo;」符號表示向右的箭頭:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="pagination">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

此範例執行的結果看起來如下圖所示:

clip_image038

圖 19:使用Pagination。

Pager分頁

若想要顯示上一頁、下一頁的按鈕,可以使用Pager元件。在<ul>項目套用「pager」樣式。此外<li>也可以套用「previous」代表上一頁;套用「previous」代表上一頁,參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">

        <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>

        <ul class="pager">
            <li class="previous"><a href="#">&laquo; Previous</a></li>
            <li class="next"><a href="#">Next  &raquo;</a></li>
        </ul>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

此範例第一個pager執行的結果看起來如下圖所示,「Previous」與「next」按鈕緊臨呈現:

clip_image040

圖 20:使用Pager。

此範例第二個pager執行的結果看起來如下圖所示,「Previous」與「next」按鈕會分別出現在瀏覽器的左側與右側:

clip_image042

圖 21:使用Pager。

Tags:

.NET Magazine國際中文電子雜誌 | Bootstrap | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List