Bootstrap CSS組件之導(dǎo)航(nav)
本文實(shí)例為大家分享了Bootstrap導(dǎo)航的具體代碼,供大家參考,具體內(nèi)容如下
//源碼 .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav > li { position: relative; display: block; } .nav > li > a { position: relative; display: block; padding: 10px 15px; } .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #eee; } .nav > li.disabled > a { color: #777; } .nav > li.disabled > a:hover, .nav > li.disabled > a:focus { color: #777; text-decoration: none; cursor: not-allowed; background-color: transparent; }
和默認(rèn)的.btn樣式不同,默認(rèn)的.nav樣式不提供默認(rèn)的導(dǎo)航,必須通過(guò)附加另外一個(gè)樣式才行,比如.nav-tabs樣式表示選項(xiàng)卡導(dǎo)航。
nav nav-tabs nav-pills nav-stacked nav-justified navbar
1.選項(xiàng)卡導(dǎo)航(nav nav-tabs)
2.膠囊式選項(xiàng)卡導(dǎo)航(nav nav-pills)
3.堆疊式導(dǎo)航(nav nav-pills nav-stacked)
4.自適應(yīng)導(dǎo)航(nav nav-tabs/nav-pills nav-justified)
5.二級(jí)導(dǎo)航(nav nav-tabs dropdown dropdown-menu)
例子見(jiàn)導(dǎo)航.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Bootstrap從3.0版本開(kāi)始全面支持移動(dòng)平臺(tái),貫徹移動(dòng)先行宗旨 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!--選項(xiàng)卡導(dǎo)航nav nav-tabs: 菜單當(dāng)前高亮菜單項(xiàng).active 菜單項(xiàng)是禁用狀態(tài).disabled --> <ul class="nav nav-tabs"> <li class="active"><a href="#">主頁(yè)</a></li> <li><a href="#">個(gè)人信息</a></li> <li class="disabled"><a href="#">作品</a></li> </ul> <!-- 膠囊式選項(xiàng)卡導(dǎo)航nav nav-pills: .active的菜單會(huì)進(jìn)行背景色高亮顯示--> <ul class="nav nav-pills"> <li class="active"><a href="#">主頁(yè)</a></li> <li><a href="#">個(gè)人信息</a></li> <li class="disabled"><a href="#">作品</a></li> </ul> <!-- 堆疊式導(dǎo)航nav nav-pills nav-stacked: 堆疊式導(dǎo)航的原理是去除nav-pills樣式得浮動(dòng)顯示(默認(rèn)不設(shè)置浮動(dòng),讓其垂直擺放)--> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">主頁(yè)</a></li> <li><a href="#">個(gè)人信息</a></li> <li class="nav-divider"></li> <li class="disabled"><a href="#">作品</a></li> </ul> <!-- 自適應(yīng)導(dǎo)航nav nav-pills/nav-tabs nav-justified: 可以將li元素充滿整個(gè)父元素,在寬度為100%的基礎(chǔ)上,設(shè)置每個(gè)元素的display風(fēng)格是table-cell--> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">主頁(yè)</a></li> <li><a href="#">個(gè)人信息</a></li> <li class="disabled"><a href="#">作品</a></li> </ul> <!-- 二級(jí)導(dǎo)航nav nav-tabs: 普通導(dǎo)航里的li元素作為父元素容器,內(nèi)部包含dropdown下拉菜單的--> <ul class="nav nav-tabs"> <li class="active"><a href="#">主頁(yè)</a></li> <li><a href="#">個(gè)人信息</a></li> <li class="disabled"><a href="#">作品</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">二級(jí)菜單</a></li> <li><a href="#">二級(jí)菜單</a></li> <li><a href="#">二級(jí)菜單</a></li> </ul> </li> </ul> <!-- bootstrap是基于jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>
以上就是本文的全部?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導(dǎo)航條
- Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
- JS組件Bootstrap導(dǎo)航條使用方法詳解
相關(guān)文章
JavaScript數(shù)組操作學(xué)習(xí)之splice()函數(shù)入門(mén)與精通
這篇文章介紹了JavaScript數(shù)組操作中的splice()方法,詳細(xì)講解了其定義、語(yǔ)法和用法,并通過(guò)實(shí)例展示了如何使用該方法進(jìn)行數(shù)組元素的添加、刪除和替換,需要的朋友可以參考下2024-11-11Javascript將string類(lèi)型轉(zhuǎn)換int類(lèi)型
今天網(wǎng)站有個(gè)小功能要判斷用戶購(gòu)買(mǎi)商品數(shù)量是否大于庫(kù)存數(shù)據(jù),如果大于庫(kù)存數(shù)量,就給予提示。2010-12-12JavaScript實(shí)現(xiàn)翻頁(yè)功能(附效果圖)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)翻頁(yè)功能(附效果圖),在項(xiàng)目需求中經(jīng)常遇到,今天小編抽時(shí)間給大家分享JavaScript實(shí)現(xiàn)翻頁(yè)功能實(shí)例代碼,需要的朋友參考下吧2017-02-02基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果
這篇文章主要為大家詳細(xì)介紹了基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07基于Bootstrap的Metronic框架實(shí)現(xiàn)頁(yè)面鏈接收藏夾功能
本文給大家介紹基于Metronic的Bootstrap開(kāi)發(fā)框架實(shí)現(xiàn)頁(yè)面鏈接收藏夾功能,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-08-08js編寫(xiě)trim()函數(shù)及正則表達(dá)式的運(yùn)用
js中本身是沒(méi)有trim函數(shù)的,不過(guò)你可以自己寫(xiě)一個(gè),下面的實(shí)現(xiàn)方法是用到了正則表達(dá)式,效率不錯(cuò),并把這三個(gè)方法加入String對(duì)象的內(nèi)置方法中去2013-10-10