Bootstrap實現(xiàn)導航欄的2種方式
前言:導航是一個網(wǎng)站重要的元素組件之一,可以便于用戶查找網(wǎng)站所提供的各項功能服務。導航的制作方法也是千奇百怪,五花八門。在下面的內(nèi)容中,介紹兩種制作導航欄的方式。
一、用按鈕組實現(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">關于我們<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="#">客服服務</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="##">產(chǎn)品展示</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="#">組織結(jié)構(gòu)</a></li> <li><a href="#">客服服務</a></li> </ul> </li> </ul> </div>
如果想要將導航欄設為垂直顯示,第一中方法在div.btn-group后追加.btn-group-vertical就可以,第二種在div.nav后追加.nav-stacked即可。
如果大家還想深入學習,可以點擊這里進行學習,再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
移動端(微信等使用vConsole調(diào)試console的方法
這篇文章主要介紹了移動端(微信等使用vConsole調(diào)試console的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-03-03同一個網(wǎng)頁中實現(xiàn)多個JavaScript特效的方法
這篇文章主要介紹了同一個網(wǎng)頁中實現(xiàn)多個JavaScript特效的方法,實例分析了多個特效的實現(xiàn)原理與相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02使用javascript實現(xiàn)Iframe自適應高度
這篇文章主要介紹了使用javascript實現(xiàn)Iframe自適應高度,需要的朋友可以參考下2014-12-12Bootstrap富文本組件wysiwyg數(shù)據(jù)保存到mysql的方法
這篇文章主要為大家詳細介紹了Bootstrap富文本組件wysiwyg數(shù)據(jù)保存到mysql的方法,感興趣的小伙伴們可以參考一下2016-05-05