Bootstrap 導航

2018-11-08 16:29 更新

Bootstrap 導航

簡介

在本教程中，您將學習如何使用 Bootstrap 工具包來創(chuàng)建基于導航、標簽、膠囊式標簽的導航。

我們有演示實例及相關的解釋，包括：基本的基于標簽和膠囊式標簽的導航、堆疊的或垂直的基于標簽和膠囊式標簽的導航、基于標簽和膠囊式標簽的下拉菜單、使用導航列表創(chuàng)建堆疊導航、使用 JavaScript 創(chuàng)建可點擊導航（不同的方向）。

基本的標簽

兩個 CSS class .nav 和 .nav-tabs 用于創(chuàng)建基本的基于標簽的導航。在 Bootstrap 版本 v2.0.1 中，CSS class .nav 的樣式在行號 2176 到 2220（這里也包含一些相關樣式）中聲明。行號 2222 到 2267 包含 .nav-tabs 的樣式。下面的實例演示如何使用 Bootstrap 創(chuàng)建一個基本的基于標簽的導航。

Bootstrap 基本的基于標簽的導航實例

實例

<div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

輸出

Twitter-Bootstrap-Basic-Tab-Based-Navigation-Example

在線查看

在不同的瀏覽器窗口查看上面實例。

基本的膠囊式標簽

一旦您知道如何通過 Bootstrap 創(chuàng)建基本的基于標簽的導航，要想創(chuàng)建基本的基于膠囊式標簽的導航就顯得很容易了。在這里不是使用 .nav-tabs class，而是使用 .nav-pills class。.nav-pills 的樣式位于 bootstrap.css 中的行號 2222 到 2224，在 bootstrap.css 中的行號 2268 到 2280 再次重復（在最后一個實例中使用到）。

下面的實例演示如何創(chuàng)建一個基本的基于膠囊式標簽的導航。

Bootstrap 基本的基于膠囊式標簽的導航實例

實例

<div class="container">
    <div class="row">
        <div class="span8">
            <ul class="nav nav-pills">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

輸出

Twitter-Bootstrap-Basic-pills-Based-Navigation-Example

在線查看

在不同的瀏覽器窗口查看上面實例。

堆疊的或垂直的標簽

如需創(chuàng)建堆疊的或垂直的基于標簽的導航，您必須添加 .nav-stacked、.nav 和 .nav-tabs class 到您的標記中，默認是創(chuàng)建水平的基于標簽的導航。從行號 2281 到 2309 包含了 .nav-stacked 的樣式。下面是一個實例。

Bootstrap 堆疊的或垂直的基于標簽的導航實例

實例

<div class="container">
    <div class="row">
        <div class="span8">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

輸出

Twitter-Bootstrap-Stacked-or-vertical-Tab-Based-Navigation-Example

在線查看

在不同的瀏覽器窗口查看上面實例。

堆疊的或垂直的膠囊式標簽

與創(chuàng)建堆疊的或垂直的標簽類似，您需要一個額外的 CSS class 用來創(chuàng)建堆疊的或垂直的基于膠囊式標簽的導航。那就是 .nav-stacked class，位于行號 2281 到 2309，包含了 .nav-stacked 的樣式。下面是一個實例。

Bootstrap 堆疊的或垂直的基于膠囊式標簽的導航實例

實例

<div class="container">
    <div class="row">
        <div class="span2">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

輸出

Twitter-Bootstrap-Stacked-or-vertical-Pills-Based-Navigation-Example

在線查看

在不同的瀏覽器窗口查看上面實例。

基于標簽的下拉菜單

您可以使用 Bootstrap 創(chuàng)建基于標簽的下拉菜單導航。這里有四個 CSS class - .dropdown、.dropdown-toggle、.dropdown-menu 和 .caret，是您所需要的，另外還有 .nav 和 .nav-tabs class。在 bootstrap.css（版本 2.0.1）中，行號 1545 到 1547 包含了 .dropdown class 的樣式，行號 1548 到 1553 包含了 .dropdown-toggle 的樣式，行號 1576 到 1632 包含了 .dropdown-menu 的樣式，行號 1554 到 1575 包含了 .caret 的樣式。在演示實例中，也使用了另一個 CSS class .divider，但不是必需的。

當然，您需要在 HTML 文件中引用三個 JavaScript 文件 - jquery.js、bootstrap-dropdown.js 和 application.js。所有這些都位于 docs/assets/js/ 文件夾內。

下面是一個實例。

Bootstrap 基于標簽的下拉菜單的導航實例

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap 基于標簽的下拉菜單的導航實例</title>
    <meta name="description" content="Bootstrap 基于標簽的下拉菜單的導航實例">
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
    <style type="text/css">
        .container {
            margin-top: 200px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Twitter Bootstrap</a></li>
                        <li><a href="#">Google Plus API</a></li>
                        <li><a href="#">HTML5</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Examples</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
                    <ul class="dropdown-menu bottom-up pull-right">
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">PostgreSQL</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Live Demos</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>

注意：我們添加了一個單獨的樣式標簽，并在樣式的一個小集合中引用它，用來為容器創(chuàng)建一個200 像素的上邊距，這只是為了演示。data-toggle 是一個 Bootstrap 特定的屬性。設置它的值為 "dropdown" 可以創(chuàng)建一個下拉菜單導航。

輸出

基于標簽的下拉菜單：

dropdown-tabbased

基于標簽的上拉菜單：

dropup-tabbased

在線查看

在不同的瀏覽器窗口查看上面實例。

基于膠囊式標簽的下拉菜單

創(chuàng)建基于膠囊式標簽的下拉菜單的標記和 CSS，與創(chuàng)建基于標簽的下拉菜單的類似。唯一要做的事情就是，把 .nav-tabs 替換成 .nav-pills class。下面是一個實例。

Bootstrap 基于膠囊式標簽的下拉菜單的導航實例

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap 基于膠囊式標簽的下拉菜單的導航實例</title>
    <meta name="description" content="Bootstrap 基于膠囊式標簽的下拉菜單的導航實例">
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
    <style type="text/css">
        .container {
            margin-top: 200px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-pills">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Twitter Bootstrap</a></li>
                        <li><a href="#">Google Plus API</a></li>
                        <li><a href="#">HTML5</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Examples</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
                    <ul class="dropdown-menu bottom-up pull-right">
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">PostgreSQL</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Live Demos</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>

輸出

基于膠囊式標簽的下拉菜單：

pills-based-dropdown

基于膠囊式標簽的上拉菜單：

pills-based-dropup

在線查看

在不同的瀏覽器窗口查看上面實例。

使用導航列表創(chuàng)建帶可選標題的堆疊導航

.nav-class 可用于創(chuàng)建一個適合于側邊欄的堆疊的導航。您可以為一組鏈接添加標題，為位于 bootstrap.css 中行號 2201 到 2221 的 .nav-list 定義樣式（版本 2.0.1）。下面是一個實例。

帶導航列表的堆疊導航實例

實例

<div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-list">
                <li class="nav-header">List header</li>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li><a href="#">Applications</a></li>
                <li class="nav-header">Another list header</li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Settings</a></li>
                <li class="divider"></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
    </div>
</div>

輸出

nav-list

在線查看

在不同的瀏覽器窗口查看上面實例。

使用導航列表創(chuàng)建帶圖標的堆疊導航

實例

<div class="container">
    <div class="span6">
        <ul class="nav nav-list">
            <li class="nav-header">List header</li>
            <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
            <li><a href="#"><i class="icon-book"></i> Library</a></li>
            <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
            <li class="nav-header">Another list header</li>
            <li><a href="#"><i class="icon-user"></i> Profile</a></li>
            <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="icon-flag"></i> Help</a></li>
        </ul>
    </div>
</div>

輸出

nav-list-with-icons

在線查看

在不同的瀏覽器窗口查看上面實例。

使用 JavaScript 創(chuàng)建可點擊導航

您可以通過 Bootstrap 的輕量級的 Jquery 插件和簡單的標記創(chuàng)建標簽式導航。

如何創(chuàng)建可點擊導航？

您需要一個名為 "tabbable" 的 CSS class，充當包裝角色。在它內部，添加 "nav" 和 "nav-tabs" class 到一個 "ul" 元素。在它內部，使用 'data-toggle="tab"'（應用到相關的錨元素）創(chuàng)建可點擊區(qū)域。然后，通過 CSS class "tab-content" 創(chuàng)建一個 div，該 div 內有一些帶有 CSS class "tab-pane" 的 div 用來保存實際內容。

為了讓可點擊導航正常工作，您需要引用兩個 JS 文件 - jquery.js 和 bootstrap-tab.js。這兩個文件都位于 docs/assets/js 文件夾內。

下面是一個演示可點擊導航的實例。

實例

<div class="container">
    <div class="row">
        <div class="span4">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
                    <li class=""><a href="#2" data-toggle="tab">Section 2</a></li>
                    <li class=""><a href="#3" data-toggle="tab">Section 3</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="1">
                        <p>You are watching section 1.</p>
                    </div>
                    <div class="tab-pane" id="2">
                        <p>You are watching Section 2.</p>
                    </div>
                    <div class="tab-pane" id="3">
                        <p>You are watching Section 3.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

點擊這里，下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。

以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號