<div style="width:100%; background:#ff0">
 <div class="btn-group">
 <button class="btn btn-default" type="button">首頁</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="#">公司簡介</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="##">首頁</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="#">公司簡介</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即可。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: