第一次接觸神奇的Bootstrap導(dǎo)航條
導(dǎo)航條(navbar)在Bootstrap中是一個(gè)獨(dú)立組件,導(dǎo)航條(navbar)和導(dǎo)航(nav)在Bootstrap中是有明顯的區(qū)別的。在導(dǎo)航條(navbar)中有一個(gè)背景色、而且導(dǎo)航條可以是純鏈接、表單、表單和導(dǎo)航一起結(jié)合等多種形式。
1.實(shí)戰(zhàn)一-帶二級(jí)菜單和表單的導(dǎo)航條
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>導(dǎo)航條</title> <link rel="stylesheet" > <!--css樣式--> <style > body{margin:30px;padding:30px;} </style> </head> <body> <div class="navbar navbar-default" role="navigation"> <!--標(biāo)題通過(guò)“navbar-header”和“navbar-brand”來(lái)實(shí)現(xiàn)--> <div class="navbar-header"> <a href="##" class="navbar-brand">標(biāo)題</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">首頁(yè)</a></li> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">博客<span class="caret"></span></a> <!--二級(jí)菜單--> <ul class="dropdown-menu"> <li><a href="##">二級(jí)菜單</a></li> </ul> </li> <li><a href="##">論壇</a></li> </ul> <!--表單--> <form action="##" class="navbar-form navbar-left" rol="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="請(qǐng)輸入關(guān)鍵詞" /> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div> <!-- 放置在文檔的結(jié)尾,使頁(yè)面加載速度更快 --> <!-- 如果要使用Bootstrap的js插件,必須先調(diào)入jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <!-- 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用 --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
效果圖如下:
Bootstrap的導(dǎo)航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,還可以使用其他元素:
1)導(dǎo)航條中的按鈕navbar-btn
2)導(dǎo)航條中的文本navbar-text
3)導(dǎo)航條中的普通鏈接navbar-link
2.實(shí)戰(zhàn)二-固定導(dǎo)航條
<!--頂部導(dǎo)航條--> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">標(biāo)題</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">首頁(yè)</a></li> <li><a href="##">博客</a></li> <li><a href="##">論壇</a></li> </ul> </div> <!--底部導(dǎo)航條--> <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">標(biāo)題</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">首頁(yè)</a></li> <li><a href="##">博客</a></li> <li><a href="##">論壇</a></li> </ul> </div> <!--正文內(nèi)容--> <div class="content">網(wǎng)頁(yè)正文內(nèi)容</div>
效果圖如下:
3.實(shí)戰(zhàn)三-響應(yīng)式導(dǎo)航條
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!-- .navbar-toggle樣式用于toggle收縮的內(nèi)容,即nav-collapse collapse樣式所在元素 --> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 確保無(wú)論是寬屏還是窄屏,navbar-brand都顯示 --> <a href="##" class="navbar-brand">標(biāo)題</a> </div> <!-- 屏幕寬度小于768px時(shí),div.navbar-responsive-collapse容器里的內(nèi)容都會(huì)隱藏, 顯示icon-bar圖標(biāo),當(dāng)點(diǎn)擊icon-bar圖標(biāo)時(shí),再展開(kāi)。屏幕大于768px時(shí),默認(rèn)顯示。 --> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="##">首頁(yè)</a></li> <li><a href="##">博客</a></li> <li><a href="##">論壇</a></li> </ul> </div> </div>
效果圖如下:
有的時(shí)候會(huì)有需要反色的情況,Bootstrap為此提供了反色導(dǎo)航條,只是將navbar-deafult類名換成navbar-inverse,然后導(dǎo)航條的背景色和文本的顏色就會(huì)修改。
4.實(shí)戰(zhàn)四-分頁(yè)導(dǎo)航
1)帶頁(yè)碼的分頁(yè)導(dǎo)航
<!-- pagination:正常大小 pagination-lg:讓分頁(yè)導(dǎo)航變大 pagination-sm:讓分頁(yè)導(dǎo)航變小--> <ul class="pagination pagination"> <li><a href="#">«首頁(yè)</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <!--當(dāng)前狀態(tài)--> <li class="active"><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <!--禁用狀態(tài)--> <li class="disabled"><a href="#">尾頁(yè)»</a></li> </ul>
效果圖如下:
2)翻頁(yè)分頁(yè)導(dǎo)航
<ul class="pager"> <li><a href="#">«上一頁(yè)</a></li> <!--禁用狀態(tài)--> <li class="disabled"><a href="#">下一頁(yè)»</a></li> </ul> <!--左右對(duì)齊--> <ul class="pager"> <li class="previous"><a href="#">«上一頁(yè)</a></li> <li class="next"><a href="#">下一頁(yè)»</a></li> </ul>
效果圖如下:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap每天必學(xué)之導(dǎo)航條
- BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實(shí)例代碼
- Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單的實(shí)現(xiàn)代碼
- JS組件Bootstrap導(dǎo)航條使用方法詳解
- 全面接觸神奇的Bootstrap導(dǎo)航條實(shí)戰(zhàn)篇
- Bootstrap每天必學(xué)之導(dǎo)航條(二)
- 一系列Bootstrap導(dǎo)航條使用方法分享
- BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹
- BootStrap制作導(dǎo)航條實(shí)例代碼
- 基于bootstrap實(shí)現(xiàn)收縮導(dǎo)航條
相關(guān)文章
JS使用window.requestAnimationFrame()對(duì)列表切片進(jìn)行渲染
這篇文章主要為大家介紹了JS使用requestAnimationFrame對(duì)列表切片進(jìn)行渲染,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05JS創(chuàng)建自定義表格具體實(shí)現(xiàn)
創(chuàng)建自定義表格的方法有很多,本文為大家介紹下使用js是如何創(chuàng)建的,感興趣的朋友可以參考下2014-02-02最簡(jiǎn)單純JavaScript實(shí)現(xiàn)Tab標(biāo)簽頁(yè)切換的方式(推薦)
這篇文章主要介紹了最簡(jiǎn)單純JavaScript實(shí)現(xiàn)Tab標(biāo)簽頁(yè)切換的方式(推薦)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07JS實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)特效代碼
這篇文章主要為大家詳細(xì)介紹了一款轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)的JS特效代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-08-08js監(jiān)控IE火狐瀏覽器關(guān)閉、刷新、回退、前進(jìn)事件
本節(jié)主要介紹了js監(jiān)控IE火狐瀏覽器關(guān)閉、刷新、回退、前進(jìn)事件的方法2014-07-07js中將多個(gè)語(yǔ)句寫成一個(gè)語(yǔ)句的兩種方法小結(jié)
js中將多個(gè)語(yǔ)句寫成一個(gè)語(yǔ)句的兩種方法講述了逗號(hào)運(yùn)算符將多個(gè)語(yǔ)句寫成一個(gè)語(yǔ)句以及花括號(hào)寫成一個(gè)語(yǔ)句的實(shí)現(xiàn)方法,需要的朋友可以參考一下2007-12-12