Bootstrap navbar使用

bootstrap 導航主要有三種:

1. 膠囊式導航
2. 面包屑導航
3. 頭部導航

膠囊式和面包屑的本質是列表.

膠囊式導航使用時在列表的基礎上添加.nav .nav-pill類 若想使用縱向導航再加.nav-stacked

 例如:

<ul class="nav nav-pills nav-stacked">...</ul>

 

面包屑導航使用時在列表的基礎上添加.breadcrumb類即可

 例如:

<ol class="breadcrumb">...</ol>

 

這兒主要記錄一下頭部導航 先上一個demo

先看一下效果

這個是折疊后的:

然后是完整代碼:

<div class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <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="#">SKYPE</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home</a> </li>
                <li><a href="about.html">About</a> </li>
                <li><a href="service.html">Service</a> </li>
                <li><a href="blog.html">Blog</a> </li>
                <li><a href="contact.html">Contact</a> </li>

            </ul>
            <ul class="nav navbar-nav navbar-sub  pull-right">
                <li><a href="#">Register</a> </li>
                <li><a href="#">Login</a> </li>
            </ul>
        </div>
    </div>
</div>

使用到的類的說明:

首先最外層

• .navbar 生成一個長條
• .navbar-inverse 設置長條的顏色為暗色 
• .navbar-default  設置長條的顏色為白色
• .nav-static-top 設置長條在頂部 並會隨着翻頁消失
• .nav-fixed-top 設置長條固定在頂部 翻頁並不會消失 (這樣可能會遮擋部分頁面內容 需要設置body{padding-top:70px 具體數值根據實際情況而定})
• .nav-fixed-bottom 設置長條固定在底部 翻頁不會消失

 然后是導航欄的頭部:

• .navbar-header 負責包裹brand和折疊按鈕
• .navbar-brand 一般指網頁的名稱 比如'博客園'
• .navbar-toggle 負責按鈕的樣式
• .data-toggle 指事件觸發的類型
• .data-target 指事件作用的對象
• .sr-only 指屏幕閱讀器讀到的內容
• .icon-bar 就是折疊按鈕中的一條橫線 (這兒有三個所以按鈕有三條橫線

　　說明:這兒雖然button寫在brand上面 但還是button在右邊 brand在左邊 這是由於類navbar-brand和navbar-toggle實現的.

最后就剩主體內容了:

• .collapse 負責折疊時的隱藏和顯示(小窗口)
• .navbar-collapse 負責未折疊時的顯示(大窗口)
• .nav 負責設置垂直導航的樣式(小窗口)
• .navbar-nav 負責設置橫版導航的樣式大窗口)
• .pull-right 設置導航條內元素向右對齊
• .pull-left設置導航條內元素向左對齊

.　　注意:pull-right和pull-left可以被navbar-right和navbar-left替代  后者也是推薦的用法,但是我在實驗的時候沒有成功 所以我使用的前者.

參考博客:https://www.cnblogs.com/LiveWithIt/p/5925194.html