Bootstrap實現(xiàn)導(dǎo)航欄的2種方式

更新時間：2016年11月28日 10:36:16 作者：塞上江南果

這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)導(dǎo)航欄的2種方式，一是利用按鈕組實現(xiàn)、二是Bootstrap專門做了相應(yīng)的css類,具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

<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í)，可以點擊這里進行學(xué)習(xí)，再為大家附3個精彩的專題：

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

Bootstrap實戰(zhàn)教程

Bootstrap插件使用教程

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

您可能感興趣的文章:

相關(guān)文章

JS實現(xiàn)頁面滾動到關(guān)閉時的位置與不滾動效果
這篇文章主要介紹了JS實現(xiàn)頁面滾動到關(guān)閉時的位置與不滾動效果,滾動有兩種方案，其一，利用路由中的meta，在離開頁面時緩存 top 信息，其二，利用keep-alive緩存整個頁面。但是僅限于沒有實時數(shù)據(jù)變動的頁面，需要的朋友可以參考下本文
2022-06-06
JS實現(xiàn)的簡單拖拽購物車功能示例【附源碼下載】
這篇文章主要介紹了JS實現(xiàn)的簡單拖拽購物車功能,涉及javascript事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,并附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下
2018-01-01
JavaScript算法面試題
這篇文章主要給大家分享的是JavaScript算法面試題匯總，文章舉例清晰內(nèi)容詳細，具有一定的參考價值，需要的小伙伴可以參考一下
2022-04-04
IE8 引入跨站數(shù)據(jù)獲取功能說明
今天看了一下msdn文檔，發(fā)現(xiàn)IE8打算增加 XDomainRequest （http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx）跨站數(shù)據(jù)獲取的接口
2008-07-07
微信小程序的tab選項卡的實現(xiàn)效果
這篇文章主要介紹了微信小程序的tab選項卡的實現(xiàn)效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
ES5 ES6中Array對象去除重復(fù)項的方法總結(jié)
這篇文章主要給大家介紹了Array對象去除重復(fù)項的相關(guān)資料，文中通過示例代碼詳細介紹了在ES5和ES6中Array對象去除重復(fù)項的方法，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-04-04
淺談js函數(shù)的多種定義方法與區(qū)別
下面小編就為大家?guī)硪黄獪\談js函數(shù)的多種定義方法與區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
Bootstrap編寫一個兼容主流瀏覽器的受眾巨幕式風(fēng)格頁面
這篇文章主要介紹了Bootstrap編寫一個兼容IE8、谷歌等主流瀏覽器的受眾巨幕式風(fēng)格頁面，感興趣的小伙伴們可以參考一下
2016-07-07
JavaScript 字符串連接性能優(yōu)化
從多次測試結(jié)果看來，使用StringBuffer 可以節(jié)省50%以上的時間
2008-12-12
基于canvas實現(xiàn)超炫酷的流水燈效果
這篇文章主要為大家詳細介紹了基于canvas實現(xiàn)超炫酷的流水燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05