前言：導(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í)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
