第一次接觸神奇的Bootstrap菜單和導(dǎo)航
本篇將主要介紹Bootstrap的菜單、導(dǎo)航。
本篇開(kāi)始將引入javascript相關(guān)文件，如下：
<!-- 放置在body標(biāo)簽結(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>
在Bootstrap中，下拉菜單組件是一個(gè)獨(dú)立的組件。Bootstrap的組件交互效果都是依賴于jquery庫(kù)寫的插件，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會(huì)生效。
1.下拉菜單-基本用法
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜單基本用法</title>
<link rel="stylesheet" >
<!--css樣式-->
<style >
body{margin:50px;padding:50px;}
</style>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜單1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜單2</a></li>
<!--設(shè)置菜單項(xiàng)狀態(tài)為當(dāng)前狀態(tài)（.active）-->
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">菜單3</a></li>
<!--設(shè)置菜單項(xiàng)狀態(tài)為禁用狀態(tài)（.disabled）-->
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">菜單4</a></li>
<!--下拉分隔線-->
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜單4</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">菜單標(biāo)題</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜單5</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜單6</a></li>
</ul>
</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>
注意：有時(shí)候會(huì)有向上彈起的需求，那么只需要在“dropdown”類名基礎(chǔ)上追加“dropup”類名即可。
效果圖如下：
2.下拉菜單-對(duì)齊方式
Bootstrap中下拉菜單默認(rèn)是左對(duì)齊，如果想讓下拉菜單相對(duì)于父容器右對(duì)齊時(shí)，可以在“dropdown-menu”上添加一個(gè)“pull-right”或者“dropdown-menu-right”類名，如下所示：
<!--省略部分如1中代碼-->
...
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
</ul>
</div>
...
效果圖如下：
3.按鈕-按鈕組
按鈕組也是一個(gè)獨(dú)立的組件。需要依賴于button.js插件才能正常運(yùn)行。而bootstrap.js已集成了button.js插件功能。
用法：使用“btn-group”容器，把多個(gè)按鈕放到這個(gè)容器中。如下所示：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>按鈕組</title>
<link rel="stylesheet" >
<!--css樣式-->
<style >
body{ margin:30px;padding:30px; }
</style>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-download"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-upload"></span></button>
</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>
效果圖如下：
4.按鈕-嵌套分組
很多時(shí)候，我們常把下拉菜單和普通的按鈕組排列在一起，實(shí)現(xiàn)類似于導(dǎo)航菜單的效果。使用Bootstrap按鈕的嵌套分組的時(shí)候，只需要把當(dāng)初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級(jí)。如下所示：
<!--省略部分如3中代碼-->
...
<div class="btn-group">
<button class="btn btn-default" type="button">首頁(yè)</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">移動(dòng)開(kāi)發(fā)<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">Android</a></li>
<li><a href="##">IOS</a></li>
</ul>
</div>
<button class="btn btn-default" type="button">Java Web開(kāi)發(fā)</button>
<button class="btn btn-default" type="button">PHP開(kāi)發(fā)</button>
<button class="btn btn-default" type="button">大數(shù)據(jù)</button>
</div>
...
效果圖如下：
在實(shí)際運(yùn)用當(dāng)中，總會(huì)碰到垂直顯示的效果。在Bootstrap中也提供了這樣的風(fēng)格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可實(shí)現(xiàn)按鈕的垂直分組。
5.按鈕-等分按鈕
等分按鈕（自適應(yīng)分組按鈕）實(shí)現(xiàn)方法也非常的簡(jiǎn)單，只需要在按鈕組“btn-group”上追加一個(gè)“btn-group-justified”類名，如下所示：
<div class="btn-group btn-group-justified"> <a class="btn btn-default" href="#">三分之一</a> <a class="btn btn-default" href="#">三分之一</a> <a class="btn btn-default" href="#">三分之一</a> </div>
效果圖如下：
6.導(dǎo)航-基本用法
Bootstrap中制作導(dǎo)航條主要通過(guò)“.nav”樣式。.nav”必須附加另外一個(gè)樣式才會(huì)有效，比如“nav-tabs”、“nav-pills”之類。
<!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>
<ul class="nav nav-tabs">
<li><a href="##">首頁(yè)</a></li>
<li><a href="##">新聞</a></li>
<li><a href="##">博客</a></li>
<!--標(biāo)簽形tab導(dǎo)航-->
<li class="active"><a href="##">論壇</a></li>
<!--禁用狀態(tài)-->
<li class="disabled"><a href="##">反饋</a></li>
</ul>
<!-- 放置在文檔的結(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>
效果圖如下：
7.導(dǎo)航-膠囊形(pills)導(dǎo)航
膠囊形（pills）導(dǎo)航，當(dāng)前項(xiàng)高亮顯示，并帶有圓角效果。只需要把類名“nav-tabs”換成“nav-pills”即可：
<ul class="nav nav-pills">
<!--當(dāng)前狀態(tài)-->
<li class="active"><a href="##">首頁(yè)</a></li>
<!--懸浮狀態(tài)-->
<li><a href="##">新聞</a></li>
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">博客<span class="caret"></span></a>
<ul class="dropdown-menu">
<!--二級(jí)菜單-->
<li><a href="##">前端博客</a></li>
<li><a href="##">Java博客</a></li>
</ul>
</li>
<li><a href="##">論壇</a></li>
<!--禁用狀態(tài)-->
<li class="disabled"><a href="##">反饋</a></li>
</ul>
效果圖如下：
8.導(dǎo)航-垂直堆疊的導(dǎo)航
制作垂直堆疊導(dǎo)航只需要在“nav-pills”的基礎(chǔ)上添加一個(gè)“nav-stacked”類名即可：
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">首頁(yè)</a></li> <li><a href="##">新聞</a></li> <li><a href="##">博客</a></li> <li><a href="##">論壇</a></li> <!--禁用狀態(tài)--> <li class="disabled"><a href="##">反饋</a></li> </ul>
效果圖如下：
9.導(dǎo)航-自適應(yīng)導(dǎo)航
自適應(yīng)導(dǎo)航“nav-justified”（源碼請(qǐng)查閱bootstrap.css文件第3585行～第3607行）需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：
<ul class="nav nav-tabs nav-justified"> <li class="active"><a href="##">首頁(yè)</a></li> <li><a href="##">新聞</a></li> <li><a href="##">博客</a></li> <li><a href="##">論壇</a></li> <!--禁用狀態(tài)--> <li class="disabled"><a href="##">反饋</a></li> </ul>
效果圖如下：
10.導(dǎo)航-面包屑式
面包屑（Breadcrumb）也是一個(gè)獨(dú)立模塊組件，一般用于導(dǎo)航，主要是起的作用是告訴用戶現(xiàn)在所處頁(yè)面的位置（當(dāng)前位置）。使用方式很簡(jiǎn)單，為ol加入breadcrumb類：
<ol class="breadcrumb"> <li><a href="#">首頁(yè)</a></li> <li><a href="#">中國(guó)</a></li> <li class="active">北京</li> </ol>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- Bootstrap每天必學(xué)之導(dǎo)航條
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果
- Bootstrap每天必學(xué)之導(dǎo)航
- Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件
- 第一次接觸神奇的Bootstrap導(dǎo)航條
- Bootstrap多級(jí)導(dǎo)航欄(級(jí)聯(lián)導(dǎo)航)的實(shí)現(xiàn)代碼
- Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
- Bootstrap導(dǎo)航中表單簡(jiǎn)單實(shí)現(xiàn)代碼
相關(guān)文章
JavaScript實(shí)現(xiàn)Iterator模式實(shí)例分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Iterator模式,實(shí)例分析了Iterator模式的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06![淺談javascript函數(shù)劫持[轉(zhuǎn)自xfocus]](http://img.jbzj.com/images/xgimg/bcimg1.png)
淺談javascript函數(shù)劫持[轉(zhuǎn)自xfocus]
javascript函數(shù)劫持，也就是老外提到的javascript hijacking技術(shù)。最早還是和劍心同學(xué)討論問(wèn)題時(shí)偶然看到的一段代碼2008-02-02
本篇文章是小編日常收集整理些javascript保留關(guān)鍵字相關(guān)知識(shí)匯總，需要的朋友參考下2015-12-12
JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽(tīng)使用方法以及實(shí)例效果演示
最近工作中遇到了鼠標(biāo)拖動(dòng)事件監(jiān)聽(tīng)的相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽(tīng)使用方法以及實(shí)例效果演示的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
js模仿html5 placeholder適應(yīng)于不支持的瀏覽器
html5原生支持placeholder，對(duì)于不支持的瀏覽器（ie）可用js模擬實(shí)現(xiàn)，不要走開(kāi)，接下來(lái)為您詳細(xì)介紹實(shí)現(xiàn)方法2013-01-01
js實(shí)現(xiàn)注冊(cè)頁(yè)面校驗(yàn)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)注冊(cè)頁(yè)面校驗(yàn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
下面小編就為大家?guī)?lái)一篇javascript的理解及經(jīng)典案例分析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
下拉菜單既可以選擇,又可以自己填寫...2006-07-07
這篇文章主要介紹了JS模擬鍵盤打字效果的方法,涉及javascript鼠標(biāo)事件及字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04