全面接觸神奇的Bootstrap導(dǎo)航條實(shí)戰(zhàn)篇
更新時(shí)間：2016年08月01日 10:07:25 作者：smartbetter
導(dǎo)航條（navbar）在Bootstrap中是一個(gè)獨(dú)立組件，導(dǎo)航條（navbar）和導(dǎo)航（nav）在Bootstrap中是有明顯區(qū)別的，本文全面接觸神奇的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)題通過“navbar-header”和“navbar-brand”來實(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)航條
效果圖如下：
有的時(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>
效果圖如下：
5.實(shí)戰(zhàn)五-標(biāo)簽
在一些Web頁(yè)面中常常會(huì)添加一個(gè)標(biāo)簽用來告訴用戶一些額外的信息，例如：
Bootstrap中將這樣的效果提取出來成為一個(gè)標(biāo)簽組件，并且以“.label”樣式來實(shí)現(xiàn)高亮顯示。和按鈕元素button類似，label樣式也提供了多種顏色，主要是通過這幾個(gè)類名來修改背景顏色和文本顏色：
效果圖如下：
6.實(shí)戰(zhàn)六-徽章
徽章多用于提醒有多少未讀消息這樣的需求，在Bootstrap中，使用“badge”樣式來實(shí)現(xiàn)徽章效果。
<!--navbar-default導(dǎo)航條勛章--> <div class="navbar navbar-default" 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="##">論壇<span class="badge">10</span></a></li> <li><a href="##">反饋</a></li> </ul> </div>
效果圖如下：
7.實(shí)戰(zhàn)七-帶動(dòng)畫過渡的彈出框
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>帶動(dòng)畫過的渡彈出框</title>
<link rel="stylesheet" >
<!--css樣式-->
<style >
body{margin:30px;padding:30px;}
</style>
</head>
<body>
<button class="btn btn-primary" type="button">點(diǎn)擊我</button>
<div class="modal fade" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">彈出窗標(biāo)題</h4>
</div>
<div class="modal-body">
<p>彈出窗主體內(nèi)容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 放置在文檔的結(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>
<script>
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
});
</script>
</body>
</html>
效果圖如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
您可能感興趣的文章:
- 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每天必學(xué)之導(dǎo)航條(二)
- 一系列Bootstrap導(dǎo)航條使用方法分享
- BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹
- BootStrap制作導(dǎo)航條實(shí)例代碼
- 基于bootstrap實(shí)現(xiàn)收縮導(dǎo)航條
相關(guān)文章
JavaScript立即執(zhí)行函數(shù)與函數(shù)劫持的作用
IIFE全拼Imdiately Invoked Function Expression,是一個(gè)在定義的時(shí)候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
JavaScript iframe數(shù)據(jù)共享接口實(shí)現(xiàn)方法
在iframe與父窗口或者與子窗口傳遞數(shù)據(jù)是一個(gè)麻煩的事情，如果我們能夠?qū)懸粋€(gè)一勞永逸的接口那就再方便不過了，下面就來簡(jiǎn)答介紹一下如何實(shí)現(xiàn)此功能，對(duì)js iframe相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法分析
這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法,簡(jiǎn)單講述了串的概念、功能并結(jié)合實(shí)例形式分析了基于javascript實(shí)現(xiàn)串的遍歷、比較、查找等相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
在項(xiàng)目開發(fā)階段很多項(xiàng)目都會(huì)用到表情插件，接下來通過本文給大家介紹了JavaScript從0開始構(gòu)思表情插件 的相關(guān)資料,需要的朋友可以參考下2016-07-07
JS獲取下拉列表所選中的TEXT和Value的實(shí)現(xiàn)代碼
本篇文章主要是對(duì)JS獲取下拉列表所選中的TEXT和Value的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
javascript中動(dòng)態(tài)函數(shù)用法實(shí)例分析
這篇文章主要介紹了javascript中動(dòng)態(tài)函數(shù)用法,實(shí)例分析了動(dòng)態(tài)函數(shù)的定義方法與使用技巧,需要的朋友可以參考下2015-05-05
Js查找字符串中出現(xiàn)次數(shù)最多的字符及個(gè)數(shù)實(shí)例解析
這篇文章主要介紹了Js查找字符串中出現(xiàn)次數(shù)最多的字符及個(gè)數(shù) ,本文分為傳統(tǒng)寫法和正則寫法兩種方法給大家介紹了js查找字符串出現(xiàn)次數(shù)最多的字符及個(gè)數(shù)，非常不錯(cuò)，感興趣的朋友參考下吧2016-09-09
JS co 函數(shù)庫(kù)的含義和用法實(shí)例總結(jié)
這篇文章主要介紹了JS co 函數(shù)庫(kù)的含義和用法,結(jié)合實(shí)例形式總結(jié)分析了JS co 函數(shù)庫(kù)的基本含義、功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
本文主要介紹了DOM事件的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
基于Javascript實(shí)現(xiàn)倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了基于Javascript實(shí)現(xiàn)倒計(jì)時(shí)功能的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-02-02