Bootstrap實現導航欄的2種方式
更新時間：2016年11月28日 10:36:16 作者：塞上江南果
這篇文章主要為大家詳細介紹了Bootstrap實現導航欄的2種方式，一是利用按鈕組實現、二是Bootstrap專門做了相應的css類,具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言：導航是一個網站重要的元素組件之一，可以便于用戶查找網站所提供的各項功能服務。導航的制作方法也是千奇百怪，五花八門。在下面的內容中，介紹兩種制作導航欄的方式。
一、用按鈕組實現，代碼如下：
<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">產品展示</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">關于我們<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">公司簡介</a></li> <li><a href="#">企業(yè)文化</a></li> <li><a href="#">組織結構</a></li> <li><a href="#">客服服務</a></li> </ul> </div> </div> </div>
二、Bootstrap為導航專門做了相應的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="##">產品展示</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="#">公司簡介</a></li> <li><a href="#">企業(yè)文化</a></li> <li><a href="#">組織結構</a></li> <li><a href="#">客服服務</a></li> </ul> </li> </ul> </div>
如果想要將導航欄設為垂直顯示，第一中方法在div.btn-group后追加.btn-group-vertical就可以，第二種在div.nav后追加.nav-stacked即可。
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS實現頁面滾動到關閉時的位置與不滾動效果,滾動有兩種方案，其一，利用路由中的meta，在離開頁面時緩存 top 信息，其二，利用keep-alive緩存整個頁面。但是僅限于沒有實時數據變動的頁面，需要的朋友可以參考下本文2022-06-06
這篇文章主要介紹了JS實現的簡單拖拽購物車功能,涉及javascript事件響應及頁面元素動態(tài)操作相關實現技巧,并附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下2018-01-01
這篇文章主要給大家分享的是JavaScript算法面試題匯總，文章舉例清晰內容詳細，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
今天看了一下msdn文檔，發(fā)現IE8打算增加 XDomainRequest （http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx） 跨站數據獲取的接口2008-07-07
這篇文章主要介紹了微信小程序的tab選項卡的實現效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要給大家介紹了Array對象去除重復項的相關資料，文中通過示例代碼詳細介紹了在ES5和ES6中Array對象去除重復項的方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04
下面小編就為大家?guī)硪黄獪\談js函數的多種定義方法與區(qū)別。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
Bootstrap編寫一個兼容主流瀏覽器的受眾巨幕式風格頁面
這篇文章主要介紹了Bootstrap編寫一個兼容IE8、谷歌等主流瀏覽器的受眾巨幕式風格頁面，感興趣的小伙伴們可以參考一下2016-07-07
從多次測試結果看來，使用StringBuffer 可以節(jié)省50%以上的時間2008-12-12
這篇文章主要為大家詳細介紹了基于canvas實現超炫酷的流水燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05