BootStrap制作導(dǎo)航條實例代碼
更新時間：2016年05月06日 13:00:32 作者：七葉林
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。本文給大家介紹BootStrap制作導(dǎo)航條實例代碼，感興趣的朋友一起學(xué)習(xí)吧
什么是 Bootstrap？
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
bootstrap 導(dǎ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="#">首頁 <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)航條實例代碼，希望對大家有所幫助！
您可能感興趣的文章:
- Bootstrap每天必學(xué)之導(dǎo)航條
- 第一次接觸神奇的Bootstrap導(dǎo)航條
- BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實例代碼
- Bootstrap導(dǎo)航條可點擊和鼠標(biāo)懸停顯示下拉菜單的實現(xiàn)代碼
- JS組件Bootstrap導(dǎo)航條使用方法詳解
- 全面接觸神奇的Bootstrap導(dǎo)航條實戰(zhàn)篇
- Bootstrap每天必學(xué)之導(dǎo)航條(二)
- 一系列Bootstrap導(dǎo)航條使用方法分享
- BootStrap響應(yīng)式導(dǎo)航條實例介紹
- 基于bootstrap實現(xiàn)收縮導(dǎo)航條
相關(guān)文章
再最近的一次實際項目開發(fā)中,又遇到了需要對兩個數(shù)組內(nèi)容進(jìn)行比較的需求,索性整理下,這篇文章主要給大家介紹了關(guān)于js判斷兩個數(shù)組相等的5種方法,需要的朋友可以參考下2022-05-05![Javascript驗證上傳圖片大小[前臺處理]](http://img.jbzj.com/images/xgimg/bcimg1.png)
在做上傳圖片的時候，如果不限制上傳圖片大小，后果非常的嚴(yán)重。解決這個問題有兩種方式：后臺處理、前臺處理2014-07-07
這篇文章主要介紹了基于mpvue小程序使用echarts畫折線圖的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
本篇文章主要介紹了js里面的==和===，== 判斷如果兩邊變量的類型不同，而 === 則不做類型轉(zhuǎn)換，有興趣的可以了解一下2017-07-07
下面小編就為大家?guī)硪黄猨avascript 動態(tài)腳本添加的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
bootstrap監(jiān)聽滾動實現(xiàn)頭部跟隨滾動
這篇文章主要為大家詳細(xì)介紹了bootstrap監(jiān)聽滾動實現(xiàn)頭部跟隨滾動,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
很神奇！js實現(xiàn)顏色漸變效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
JS數(shù)據(jù)結(jié)構(gòu)與算法中的隊列結(jié)構(gòu)詳解
隊列指的是一種受限的線性表，先進(jìn)先出，今天通過本文帶領(lǐng)大家認(rèn)識隊列及隊列的應(yīng)用，對JS數(shù)據(jù)結(jié)構(gòu)與算法-隊列結(jié)構(gòu)相關(guān)知識感興趣的朋友一起看看吧2022-11-11
這篇文章主要介紹了基于JavaScript實現(xiàn)表格隔行換色,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
JS 獲取HTML標(biāo)簽內(nèi)的子節(jié)點的方法
下面小編就為大家?guī)硪黄狫S 獲取HTML標(biāo)簽內(nèi)的子節(jié)點的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09