bootstrap組件——導航條

bootstrap提供了導航條組件，效果是這樣的（也可以是黑底白字的樣式）：

這是在pc端下的樣子，在移動端中間的導航會摺疊起來，最右邊多一個控制摺疊的按鈕，像下面這樣：

具體實現代碼如下：

<div class="navbar navbar-default">    //.navbar-inverse爲黑底白字的樣式，如有需要可以自主更改。
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">TARENA</a>    //導航條中放logo的地方，可以改成圖片，直接在a中放img標籤就可以了，需手動設置圖片的上邊距
            <a class="navbar-toggle" data-toggle="collapse" href="#collapse">    //也可以是button標籤，span標籤等；href屬性值對應下面摺疊導航的id屬性值，data-toggle屬性是實現按鈕點擊摺疊導航的必要屬性
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
        </div>
        <div class="navbar-collapse collapse" id="collapse">    //id屬性和類collapse是實現按鈕點擊摺疊導航的必要屬性
            <ul class="nav navbar-nav">
                <li><a href="#" data-toggle="tab">首頁</a></li>
                <li class="active"><a href="#" data-toggle="tab">新聞</a></li>
                <li class="dropdown">    //這是一個下拉菜單，如果不需要可以不寫
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">產品大全
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" data-toggle="tab">產品1</a></li>
                        <li><a href="#" data-toggle="tab">產品2</a></li>
                        <li class="divider"></li>
                        <li><a href="#" data-toggle="tab">產品3</a></li>
                    </ul>
                </li>
            </ul>

            <a href="#" class="navbar-link navbar-text navbar-right">右側文字內容</a>    //靠右的內容，隨導航一起摺疊
        </div>
    </div>
</div>

上面代碼中所有的data-toggle=”tab”屬性都是我自己加上的，爲的是實現點擊切換導航的效果，如果不需要或以別的方式實現切換效果可以不加這個屬性。