BootStrap制作導(dǎo)航條實(shí)例代碼
什么是 Bootstrap?
Bootstrap 是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
bootstrap 導(dǎo)航條摸索了好久,要不就是左邊和右邊不會(huì)水平對(duì)齊,要不就是顏色不一樣,菜鳥(niǎo)最后終于搞定,直接把代碼放這里,以后直接用
代碼如下所示:
<!DOCTYPE html> <html lang="zh-cn"> <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></title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default" role = "navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">KKK</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">首頁(yè) <span class="sr-only"></span></a></li> </ul> <div class="navbar-right"> <ul class="nav navbar-nav"> <li><a href="#">haha<span class="sr-only"></span></a></li> <li><a href="#">haha<span class="sr-only"></span></a></li> </ul> </div> </div> </div> </nav> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
看一下結(jié)果
以上所述是小編給大家介紹的BootStrap制作導(dǎo)航條實(shí)例代碼,希望對(duì)大家有所幫助!
- Bootstrap每天必學(xué)之導(dǎo)航條
- 第一次接觸神奇的Bootstrap導(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實(shí)現(xiàn)收縮導(dǎo)航條
相關(guān)文章
js判斷兩個(gè)數(shù)組相等的5種方法實(shí)例
再最近的一次實(shí)際項(xiàng)目開(kāi)發(fā)中,又遇到了需要對(duì)兩個(gè)數(shù)組內(nèi)容進(jìn)行比較的需求,索性整理下,這篇文章主要給大家介紹了關(guān)于js判斷兩個(gè)數(shù)組相等的5種方法,需要的朋友可以參考下2022-05-05Javascript驗(yàn)證上傳圖片大小[前臺(tái)處理]
在做上傳圖片的時(shí)候,如果不限制上傳圖片大小,后果非常的嚴(yán)重。解決這個(gè)問(wèn)題有兩種方式:后臺(tái)處理、前臺(tái)處理2014-07-07基于mpvue小程序使用echarts畫(huà)折線(xiàn)圖的方法示例
這篇文章主要介紹了基于mpvue小程序使用echarts畫(huà)折線(xiàn)圖的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04JavaScript中三個(gè)等號(hào)和兩個(gè)等號(hào)你了解多少
本篇文章主要介紹了js里面的==和===,== 判斷如果兩邊變量的類(lèi)型不同,而 === 則不做類(lèi)型轉(zhuǎn)換,有興趣的可以了解一下2017-07-07javascript 動(dòng)態(tài)腳本添加的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇javascript 動(dòng)態(tài)腳本添加的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10bootstrap監(jiān)聽(tīng)滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了bootstrap監(jiān)聽(tīng)滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11JS數(shù)據(jù)結(jié)構(gòu)與算法中的隊(duì)列結(jié)構(gòu)詳解
隊(duì)列指的是一種受限的線(xiàn)性表,先進(jìn)先出,今天通過(guò)本文帶領(lǐng)大家認(rèn)識(shí)隊(duì)列及隊(duì)列的應(yīng)用,對(duì)JS數(shù)據(jù)結(jié)構(gòu)與算法-隊(duì)列結(jié)構(gòu)相關(guān)知識(shí)感興趣的朋友一起看看吧2022-11-11基于JavaScript實(shí)現(xiàn)表格隔行換色
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)表格隔行換色,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05JS 獲取HTML標(biāo)簽內(nèi)的子節(jié)點(diǎn)的方法
下面小編就為大家?guī)?lái)一篇JS 獲取HTML標(biāo)簽內(nèi)的子節(jié)點(diǎn)的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09