Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式
更新時(shí)間：2016年11月28日 10:36:16 作者：塞上江南果
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式，一是利用按鈕組實(shí)現(xiàn)、二是Bootstrap專門(mén)做了相應(yīng)的css類,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
前言：導(dǎo)航是一個(gè)網(wǎng)站重要的元素組件之一，可以便于用戶查找網(wǎng)站所提供的各項(xiàng)功能服務(wù)。導(dǎo)航的制作方法也是千奇百怪，五花八門(mén)。在下面的內(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)航專門(mén)做了相應(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即可。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap每天必學(xué)之導(dǎo)航條
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果
- Bootstrap每天必學(xué)之導(dǎo)航
- 第一次接觸神奇的Bootstrap菜單和導(dǎo)航
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件
- Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
- Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單的實(shí)現(xiàn)代碼
- 第一次接觸神奇的Bootstrap導(dǎo)航條
相關(guān)文章
JS實(shí)現(xiàn)頁(yè)面滾動(dòng)到關(guān)閉時(shí)的位置與不滾動(dòng)效果
這篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面滾動(dòng)到關(guān)閉時(shí)的位置與不滾動(dòng)效果,滾動(dòng)有兩種方案，其一，利用路由中的meta，在離開(kāi)頁(yè)面時(shí)緩存 top 信息，其二，利用keep-alive緩存整個(gè)頁(yè)面。但是僅限于沒(méi)有實(shí)時(shí)數(shù)據(jù)變動(dòng)的頁(yè)面，需要的朋友可以參考下本文2022-06-06
JS實(shí)現(xiàn)的簡(jiǎn)單拖拽購(gòu)物車功能示例【附源碼下載】
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單拖拽購(gòu)物車功能,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下2018-01-01
這篇文章主要給大家分享的是JavaScript算法面試題匯總，文章舉例清晰內(nèi)容詳細(xì)，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-04-04
IE8 引入跨站數(shù)據(jù)獲取功能說(shuō)明
今天看了一下msdn文檔，發(fā)現(xiàn)IE8打算增加 XDomainRequest （http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx） 跨站數(shù)據(jù)獲取的接口2008-07-07
微信小程序的tab選項(xiàng)卡的實(shí)現(xiàn)效果
這篇文章主要介紹了微信小程序的tab選項(xiàng)卡的實(shí)現(xiàn)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
ES5 ES6中Array對(duì)象去除重復(fù)項(xiàng)的方法總結(jié)
這篇文章主要給大家介紹了Array對(duì)象去除重復(fù)項(xiàng)的相關(guān)資料，文中通過(guò)示例代碼詳細(xì)介紹了在ES5和ES6中Array對(duì)象去除重復(fù)項(xiàng)的方法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-04-04
下面小編就為大家?guī)?lái)一篇淺談js函數(shù)的多種定義方法與區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
Bootstrap編寫(xiě)一個(gè)兼容主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面
這篇文章主要介紹了Bootstrap編寫(xiě)一個(gè)兼容IE8、谷歌等主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面，感興趣的小伙伴們可以參考一下2016-07-07
從多次測(cè)試結(jié)果看來(lái)，使用StringBuffer 可以節(jié)省50%以上的時(shí)間2008-12-12
基于canvas實(shí)現(xiàn)超炫酷的流水燈效果
這篇文章主要為大家詳細(xì)介紹了基于canvas實(shí)現(xiàn)超炫酷的流水燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05