abstract：前言：導(dǎo)航是一個(gè)網(wǎng)站重要的元素組件之一，可以便于用戶查找網(wǎng)站所提供的各項(xiàng)功能服務(wù)。導(dǎo)航的制作方法也是千奇百怪，五花八門。在下面的內(nèi)容中，介紹兩種制作導(dǎo)航欄的方式。一、用按鈕組實(shí)現(xiàn)，代碼如下：<div style="width:100%; background:#ff0">  <div class="btn-gr

前言：導(dǎo)航是一個(gè)網(wǎng)站重要的元素組件之一，可以便于用戶查找網(wǎng)站所提供的各項(xiàng)功能服務(wù)。導(dǎo)航的制作方法也是千奇百怪，五花八門。在下面的內(nèi)容中，介紹兩種制作導(dǎo)航欄的方式。

一、用按鈕組實(shí)現(xiàn)，代碼如下：

<div style="width:100%; background:#ff0">
 <div class="btn-group">
 <button class="btn btn-default" type="button">首頁(yè)</button>
 <button class="btn btn-default" type="button">產(chǎn)品展示</button>
 <button class="btn btn-default" type="button">案例分析</button>
 <button class="btn btn-default" type="button">聯(lián)系我們</button>
 <div class="btn-group">
 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關(guān)于我們<span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="#">公司簡(jiǎn)介</a></li>
 <li><a href="#">企業(yè)文化</a></li>
 <li><a href="#">組織結(jié)構(gòu)</a></li>
 <li><a href="#">客服服務(wù)</a></li>
 </ul>
 </div>
 </div>
</div>

二、Bootstrap為導(dǎo)航專門做了相應(yīng)的css類，代碼如下：

<div style="width:100%; background:#ff0">
<ul class="nav nav-pills nav-justified">
 <li><a href="##">首頁(yè)</a></li>
 <li><a href="##">聯(lián)系我們</a></li>
 <li><a href="##">產(chǎn)品展示</a></li>
 <li class="dropdown">
 <a href="##" class="dropdown-toggle" data-toggle="dropdown">關(guān)于我們<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">公司簡(jiǎn)介</a></li>
 <li><a href="#">企業(yè)文化</a></li>
 <li><a href="#">組織結(jié)構(gòu)</a></li>
 <li><a href="#">客服服務(wù)</a></li>
 </ul>
 </li>
</ul>
</div>

如果想要將導(dǎo)航欄設(shè)為垂直顯示，第一中方法在div.btn-group后追加.btn-group-vertical就可以，第二種在div.nav后追加.nav-stacked即可。

更多關(guān)于Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）其他文章！