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)航條可點擊和鼠標懸停顯示下拉菜單的實現(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)文章
JavaScript時間戳與時間相互轉(zhuǎn)換的常用方法
這篇文章主要介紹了JavaScript時間戳與時間相互轉(zhuǎn)換的常用方法,包括獲取當前時間戳、時間戳轉(zhuǎn)時間對象、時間戳轉(zhuǎn)格式化字符串、時間字符串轉(zhuǎn)時間戳等,還討論了常見應(yīng)用場景如計算時間差、倒計時和UTC與本地時間互轉(zhuǎn),需要的朋友可以參考下2025-04-04
uni-app是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到 iOS、Android、Web（響應(yīng)式）、以及各種 小程序,下面我們就來看看uni-app實現(xiàn)全局變量有哪些方法吧2024-12-12
這篇文章主要介紹了如何通過原生js實現(xiàn)設(shè)為首頁并兼容ie、火狐和谷歌,需要的朋友可以參考下2014-06-06
每天一篇javascript學(xué)習(xí)小結(jié)（基礎(chǔ)知識）
這篇文章主要介紹了javascript基本的知識點，包括字符串、特殊字符運算、變量轉(zhuǎn)字符串等，對javascript的基礎(chǔ)知識講解的很全面，為了更好地幫助大家學(xué)習(xí)javascript，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了js實現(xiàn)全選反選不選功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript獲取select的當前值示例代碼(兼容IE/Firefox/Opera/Chrome)
本篇文章主要介紹了javascript獲取select的當前值示例代碼(兼容IE/Firefox/Opera/Chrome) 需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
頁面中body onload 和 window.onload 沖突的問題的解決
關(guān)于頁面中body onload 和 window.onload 沖突的問題的解決2009-07-07
這篇文章主要給大家愛介紹了關(guān)于WebSocket的通信過程與實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧2018-04-04
javascript:json數(shù)據(jù)的頁面綁定示例代碼
本篇文章主要是對javascript:json數(shù)據(jù)的頁面綁定示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
javascript 網(wǎng)站常用的iframe分割
就是一個頁面使用兩個iframe來調(diào)用內(nèi)容，實現(xiàn)頁面導(dǎo)航，更容易控制，可控制性好2008-06-06