Bootstrap導(dǎo)航條學(xué)習(xí)使用(二)
更新時(shí)間：2017年02月08日 15:16:47 作者：輕擾時(shí)光
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條的使用方法第二篇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Bootstrap導(dǎo)航條實(shí)現(xiàn)的具體代碼，供大家參考，具體內(nèi)容如下
navbar-header：導(dǎo)航的頭部，一般情況下用來(lái)放置logo
navbar-brand ：用來(lái)放置logo，需要配合navbar-header使用
具體代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" /> </head> <body> <!--有鏈接和文字的導(dǎo)航條--> <nav class="navbar navbar-default"> <div class="container"><!--將外圍的div放在nav標(biāo)簽里面--> <div class="navbar-header"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">logo</a><!--navbar-brand 用來(lái)放置logo的--> </div> <ul class="nav navbar-nav"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >蘋(píng)果</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li> </ul> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-link navbar-text">鏈接</a><!--navbar-link為導(dǎo)航里的鏈接--> <p class="navbar-text">這里是一段文字</p><!--navbar-text為導(dǎo)航里的文字--> <ul class="nav navbar-nav navbar-right"><!--右對(duì)齊，而navbar-left為左對(duì)齊--> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登錄</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注冊(cè)</a></li> </ul> </div> </nav> <!--有表單的導(dǎo)航條--> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">logo</a> </div> <ul class="nav navbar-nav"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >蘋(píng)果</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li> </ul> <button class="btn btn-default navbar-btn navbar-left">搜索</button> <form action="URL" class="navbar-form navbar-left"><!--navbar-form是在導(dǎo)航條里添加表單，navbar-left使表單左浮動(dòng)，使其與其他內(nèi)容在一行顯示--> <input type="text" class="form-control"/> <button class="btn btn-default">搜索</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登錄</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注冊(cè)</a></li> </ul> </div> </nav> <script src="js/jquery-2.1.0.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap導(dǎo)航條鼠標(biāo)懸停下拉菜單
- bootstrap導(dǎo)航條實(shí)現(xiàn)代碼
- Bootstrap源碼解讀導(dǎo)航條（7）
- Bootstrap CSS組件之導(dǎo)航條(navbar)
- Bootstrap導(dǎo)航條的使用和理解3
- JS組件Bootstrap導(dǎo)航條使用方法詳解
- Bootstrap入門(mén)書(shū)籍之（五）導(dǎo)航條、分頁(yè)導(dǎo)航
- Bootstrap每天必學(xué)之導(dǎo)航條
- 第一次接觸神奇的Bootstrap導(dǎo)航條
- 全面接觸神奇的Bootstrap導(dǎo)航條實(shí)戰(zhàn)篇
相關(guān)文章
js為快捷鍵綁定事件，當(dāng)按這個(gè)快捷鍵時(shí)就會(huì)觸發(fā)事先綁定處理函數(shù)，下面以ctrl+k為例與大家分享下具體的實(shí)現(xiàn)代碼2014-09-09
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)手寫(xiě)簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
到現(xiàn)在，我們就有討論 JavaScript 中的原型和繼承問(wèn)題的基礎(chǔ)了。它雖然并不像你在 C++、Java 或 C# 中了解的經(jīng)典繼承模式一樣，但這種方式同樣強(qiáng)大，并且有可能會(huì)更加靈活2014-07-07
JS實(shí)現(xiàn)根據(jù)密碼長(zhǎng)度顯示安全條功能
這篇文章主要介紹了基于JS實(shí)現(xiàn)根據(jù)密碼長(zhǎng)度顯示安全條功能，非常不錯(cuò)，在一些網(wǎng)站上經(jīng)常會(huì)遇到此功能，需要的的朋友參考下實(shí)現(xiàn)代碼吧2017-03-03
這篇文章介紹了JS實(shí)現(xiàn)QQ圖片一閃一閃的效果小例子，有需要的朋友可以參考一下2013-07-07
JavaScript數(shù)據(jù)可視化:ECharts制作地圖
這篇文章主要介紹了Echarts實(shí)現(xiàn)可視化地圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-08-08
基于JavaScript實(shí)現(xiàn)的順序查找算法示例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)的順序查找算法,結(jié)合實(shí)例形式分析了javascript順序查找的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
經(jīng)常用到的javascript驗(yàn)證函數(shù)收集
經(jīng)常用到的javascript驗(yàn)證函數(shù)收集...2007-11-11
本文主要介紹了原生js實(shí)現(xiàn)可拖拽效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
js中實(shí)現(xiàn)字符串和數(shù)組的相互轉(zhuǎn)化詳解
這篇文章主要介紹了js中實(shí)現(xiàn)字符串和數(shù)組的相互轉(zhuǎn)化，感興趣的小伙伴們可以參考一下2016-01-01