Bootstrap入門（十三）組件7：導航條

Bootstrap入門（十三）組件7：導航條

1.默認樣式的導航條

2.嵌入表單和按鈕

3.嵌入文本和非導航的鏈接

4.組件排列和下拉菜單

5.固定在頂部/底部

6.反色的導航條

7.路徑導航

首先先了解一些內容（原話）：

①.導航條內所包含元素溢出

由於 Bootstrap 並不知道你在導航條內放置的元素需要占據多寬的空間，你可能會遇到導航條中的內容折行的情況（也就是導航條占據兩行）。解決辦法如下：

1. 減少導航條內所有元素所占據的寬度。
2. 在某些尺寸的屏幕上（利用 響應式工具類）隱藏導航條內的一些元素。
3. 修改導航條在水平排列和折疊排列互相轉化時，觸發這個轉化的最小屏幕寬度值。可以通過修改 @grid-float-breakpoint 變量實現，或者自己重寫相關的媒體查詢代碼，覆蓋 Bootstrap 的默認值。

②.依賴 JavaScript

如果 JavaScript 被禁用，並且視口（viewport）足夠窄，致使導航條折疊起來，導航條將不能被打開，.navbar-collapse 內所包含的內容也將不可見。

③.修改視口的閾值，從而影響導航條的排列模式

當瀏覽器視口（viewport）的寬度小於 @grid-float-breakpoint 值時，導航條內部的元素變為折疊排列，也就是變現為移動設備展現模式；當瀏覽器視口（viewport）的寬度大於 @grid-float-breakpoint 值時，導航條內部的元素變為水平排列，也就是變現為非移動設備展現模式。通過調整源碼中的這個值，就可以控制導航條何時堆疊排列，何時水平排列。默認值是 768px （小屏幕 -- 或者說是平板 --的最小值，或者說是平板）。

 

1.默認樣式的導航條

我們先來創建一個默認樣式的導航條

先引入CSS文件

<link href="bootstrap.min.css" rel="stylesheet">

我們直接使用<nav>標簽，使class為navbar，指定一個顏色，這里使用默認的navbar-default

　　　　 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
　　　　　　　...
        </nav>

一般導航條開始都是網站的名字，先 創建它，然后承載另一個div，class為collapse，樣式為navbar-collapse，使用<ul><li>標簽來顯示內容

　　　　　　 <div class="container-fluid">
                <div class='navbar-header'>
                    <a class='navbar-brand' href='#'>名字名字</a>
                </div>

                <div class="collapse navbar-collapse">
                    <ul class='nav navbar-nav' id='mytab'>
                        <li class='active'><a href="">LINK1</a></li>
                        <li><a href="">LINK2</a></li>
                        <li><a href="">LINK3</a></li>
                    </ul>                    
                </div>
            </div>

效果：

但是直接點擊其他是不會有變化的，要運用到之前說的，添加具體的JavaScript內容：

　　　　 <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
        <script src="bootstrap.min.js" type="text/javascript"></script>
        <script>
            $("#mytab a").click(function (e) {
                e.preventDefault();
                $(this).tab("show");
            })
        </script>

效果，點擊LINK2，切換過去了：

 

2.嵌入表單和按鈕

我們可以為他添加一個表單，在class="collapse navbar-collapse"的div下，我們新建一個表單

class為navbar-form，navbar-left是為了讓居左

我們就假設做的是一個“搜索”的文本框以及按鈕，新建一個class為form-group的div

　　　　　　　　　　　 <form class="navbar-form navbar-left" role='search'>
                        <div class='form-group'>
                            <input type='text' class='form-control' placeholder="搜索">
                        </div>
                        <button type='submit' class="btn btn-default">搜索</button>
                    </form>

效果：

3.嵌入文本和非導航的鏈接

這個很簡單，直接在class="collapse navbar-collapse"的div下添加內容

<p class="navbar-text">文本文本</p>
<p class="navbar-text">點擊 <a href="#" class="navbar-link">鏈接</a></p>

效果

4.組件排列和下拉菜單

現在我們看到的內容都是居左的，我們可以修改到右邊，添加居右的內容

只需要在相應內容的class：navbar-right

下拉菜單也是同理直接引入

　　　　　　　　　　 <ul class='nav navbar-nav navbar-right'>
                        <li><a href="#">LINK</a></li>
                        <li class='dropdown'>
                            <a href="#" class='dropdown-toggle' data-toggle="dropdown">123<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">LINK1</a></li>
                                <li><a href="#">LINK2</a></li>
                                <li><a href="#">LINK3</a></li>
                            </ul>
                        </li>
                    </ul>

效果：居右的內容和下拉菜單

5.固定在頂部/底部

添加 .navbar-fixed-top 類可以讓導航條固定在頂部（也就是導航條一直在瀏覽器的頂端）

添加 .navbar-fixed-bottom 類可以讓導航條固定在底部

新建一個固定在底部的導航條

　　　　<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
            <ol class="breadcrumb">
                <li><a href="">HOME2</a></li>
                <li><a href="">ASD2</a></li>
                <li><a href="">SDF2</a></li>
            </ol>
        </nav>

也為頂端的導航條添加.navbar-fixed-top 類

填充一些內容，為方便，我是放很多個換行，效果前

效果后（注意旁邊滾動條的位置），依然固定在頂部/底部

6.反色的導航條

通過添加 .navbar-inverse 類可以改變導航條的外觀

我們給頂部的導航條添加這個類

　　　　<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
            ...
        </nav>

效果

7.路徑導航

其實剛剛已經使用，關鍵就是ol的class是"breadcrumb"

　　　　<nav class="navbar navbar-default  navbar-fixed-bottom " role="navigation">
            <ol class="breadcrumb">
                <li><a href="">HOME2</a></li>
                <li><a href="">ASD2</a></li>
                <li><a href="">SDF2</a></li>
            </ol>
        </nav>

效果