導航條

1、基本信息

關鍵詞：navbar

寫法：

一、給導航加class="navbar"

二、給導航加默認樣式class="navbar-default"

三、菜單： 給菜單的<ul>加class="nav navbar-nav"

四、選中狀態：給選中的菜單項的<li>加class="active"

五、容器位置：最好寫在<nav>裏面

（1）固定

<nav class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
        </ul>
    </div>
</nav>

（2）自適應

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
        </ul>
    </div>
</nav>

六、導航的logo

<div class="navbar-header">
      <a href="#" class="navbar-brand">logo</a>
</div>

 

2、其餘效果

一、黑色色調

寫法：給導航加class="navbar-inverse"

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
        </ul>
    </div>
</nav>

二、導航變爲直角

寫法：class="navbar-static-top"

<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
        </ul>
    </div>
</nav>

三、固定的導航條

寫法：

（1）固定在頭部給導航加class="navbar-fixed-top"

（2）固定在底部給導航加class="navbar-fixed-bottom"

解決導航遮蓋的問題：給body加一個top值，body{ margin-top:50px;}

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
        </ul>
    </div>
</nav>

四、帶下拉菜單的導航

寫法：

（1）給須要加下拉菜單的選項加箭頭：導航選項<li>的<a>的文字後面加<span class="caret"></span>

（2）下拉菜單：有下拉菜單的<li>加class="dropdown"

（3）有下拉菜單的導航有點擊交互： 導航選項<li>的<a>加class="dropdown-toggle" data-toggle="dropdown"

（4）下拉菜單的<ul>加 class="dropdown-menu"

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">logo</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">three <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">child1</a></li>
                    <li><a href="#">child2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

五、響應式

寫法：

（1）在頭部logo的區域里加按鈕，由於按鈕和logo同樣顯示不隱藏，按鈕加class="navbar-toggle"

<div class="navbar-header">
    <button class="navbar-toggle">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">logo</a>
</div>

（2）給下拉菜單加一個父級，給父級加 class="collapse navbar-collapse"，讓菜單在手機端不顯示

（3）給按鈕加交互：按鈕加data-toggle="collapse" data-target="#本身起的id名"，下拉菜單的id爲data-target的值

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">logo</a>
        </div>
        <div id="myCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">one</a></li>
                <li><a href="#">two</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">three <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">child1</a></li>
                        <li><a href="#">child2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

六、滾動監聽

描述：點擊導航按鈕滑動到頁面的指定位置，當滑動的頁面的時候，導航的按鈕也發生響應的變化

寫法：

（1）給須要監聽的元素加滾動監聽data-spy="scroll" ，且須要加上position:relative;，通常爲body元素

（2）給須要監聽的導航加id，給須要監聽的元素加 data-target="#本身寫的id名" 

（3）給指定的區域加上不一樣的id，利用錨點的方式

（4）距離頂端某像素的時候觸發事件：data-offset="像素值"（距離頂部某像素以後就變導航項2了，沒必要非要到達頂部才變化，以後的選項同理）

（5）錨點的時候若是導航條擋住部份內容，能夠去掉監聽元素（body）的margin-top：50px，能夠給跳轉的內容加padding-top:50px;

body{ position:relative;}
.pos{ margin-bottom:500px; padding-top:50px;}

<body style="height:2000px;" data-spy="scroll" data-target="#myNavbar" data-offset ="200">
<nav id="myNavbar" class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">logo</a>
        </div>
        <div id="myCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#a">one</a></li>
                <li><a href="#b">two</a></li>
                <li><a href="#c">three</a></li>
            </ul>
        </div>
    </div>
</nav>
<div id="a" class="pos">aaaaaaaaaaa</div>
<div id="b" class="pos">bbbbbbbbbbb</div>
<div id="c" class="pos">ccccccccccc</div>
</body>