第一次接觸神奇的Bootstrap菜單和導航
更新時間：2016年08月01日 10:04:10 作者：smartbetter
第一次接觸神奇的Bootstrap菜單和Bootstrap導航，Bootstrap讓Web開發(fā)更迅速、更簡單，感興趣的小伙伴們可以參考一下
本篇將主要介紹Bootstrap的菜單、導航。
本篇開始將引入javascript相關(guān)文件，如下：
<!-- 放置在body標簽結(jié)尾處，使頁面加載速度更快 -->
<!-- 如果要使用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中，下拉菜單組件是一個獨立的組件。Bootstrap的組件交互效果都是依賴于jquery庫寫的插件，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會生效。
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è)置菜單項狀態(tài)為當前狀態(tài)（.active）-->
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">菜單3</a></li>
<!--設(shè)置菜單項狀態(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">菜單標題</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é)尾，使頁面加載速度更快 -->
<!-- 如果要使用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>
注意：有時候會有向上彈起的需求，那么只需要在“dropdown”類名基礎(chǔ)上追加“dropup”類名即可。
效果圖如下：
2.下拉菜單-對齊方式
Bootstrap中下拉菜單默認是左對齊，如果想讓下拉菜單相對于父容器右對齊時，可以在“dropdown-menu”上添加一個“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="#">下拉菜單項</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
</ul>
</div>
...
效果圖如下：
3.按鈕-按鈕組
按鈕組也是一個獨立的組件。需要依賴于button.js插件才能正常運行。而bootstrap.js已集成了button.js插件功能。
用法：使用“btn-group”容器，把多個按鈕放到這個容器中。如下所示：
<!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é)尾，使頁面加載速度更快 -->
<!-- 如果要使用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.按鈕-嵌套分組
很多時候，我們常把下拉菜單和普通的按鈕組排列在一起，實現(xiàn)類似于導航菜單的效果。使用Bootstrap按鈕的嵌套分組的時候，只需要把當初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級。如下所示：
<!--省略部分如3中代碼-->
...
<div class="btn-group">
<button class="btn btn-default" type="button">首頁</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">移動開發(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開發(fā)</button>
<button class="btn btn-default" type="button">PHP開發(fā)</button>
<button class="btn btn-default" type="button">大數(shù)據(jù)</button>
</div>
...
效果圖如下：
在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap中也提供了這樣的風格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可實現(xiàn)按鈕的垂直分組。
5.按鈕-等分按鈕
等分按鈕（自適應(yīng)分組按鈕）實現(xiàn)方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“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.導航-基本用法
Bootstrap中制作導航條主要通過“.nav”樣式。.nav”必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>導航-基本用法</title>
<link rel="stylesheet" >
<!--css樣式-->
<style >
body{margin:30px;padding:30px;}
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li><a href="##">首頁</a></li>
<li><a href="##">新聞</a></li>
<li><a href="##">博客</a></li>
<!--標簽形tab導航-->
<li class="active"><a href="##">論壇</a></li>
<!--禁用狀態(tài)-->
<li class="disabled"><a href="##">反饋</a></li>
</ul>
<!-- 放置在文檔的結(jié)尾，使頁面加載速度更快 -->
<!-- 如果要使用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.導航-膠囊形(pills)導航
膠囊形（pills）導航，當前項高亮顯示，并帶有圓角效果。只需要把類名“nav-tabs”換成“nav-pills”即可：
<ul class="nav nav-pills">
<!--當前狀態(tài)-->
<li class="active"><a href="##">首頁</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">
<!--二級菜單-->
<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.導航-垂直堆疊的導航
制作垂直堆疊導航只需要在“nav-pills”的基礎(chǔ)上添加一個“nav-stacked”類名即可：
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">首頁</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.導航-自適應(yīng)導航
自適應(yīng)導航“nav-justified”（源碼請查閱bootstrap.css文件第3585行～第3607行）需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：
<ul class="nav nav-tabs nav-justified"> <li class="active"><a href="##">首頁</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.導航-面包屑式
面包屑（Breadcrumb）也是一個獨立模塊組件，一般用于導航，主要是起的作用是告訴用戶現(xiàn)在所處頁面的位置（當前位置）。使用方式很簡單，為ol加入breadcrumb類：
<ol class="breadcrumb"> <li><a href="#">首頁</a></li> <li><a href="#">中國</a></li> <li class="active">北京</li> </ol>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ES6知識點整理之數(shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用示例
這篇文章主要介紹了ES6知識點整理之數(shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用,結(jié)合實例形式分析了ES6數(shù)組解構(gòu)和字符串解構(gòu)的實現(xiàn)方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-04-04
JavaScript大數(shù)相加相乘的實現(xiàn)方法實例
這篇文章主要給大家介紹了關(guān)于JavaScript大數(shù)相加相乘的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
小程序跳轉(zhuǎn)到的H5頁面再跳轉(zhuǎn)回跳小程序的方法
這篇文章主要介紹了小程序跳轉(zhuǎn)到的H5頁面再跳轉(zhuǎn)回跳小程序的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
JavaScript中函數(shù)（Function）的apply與call理解
這篇文章主要介紹了JavaScript中函數(shù)（Function）的apply與call理解,本文講解了JavaScript函數(shù)調(diào)用分為4中模式以及通過apply和call實現(xiàn)擴展和繼承兩方面,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)拼圖游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript調(diào)用COM傳遞數(shù)組時，在COM接口端，接收到的是VARIANT類型對象，如array，該對象的vt類型VT_DISPATCH，因此其值表示的是一個IDispatch類型的指針。2009-11-11
javascript和jQuery中的AJAX技術(shù)詳解【包含AJAX各種跨域技術(shù)】
這篇文章主要介紹了javascript和jQuery中的AJAX技術(shù),結(jié)合實例形式分析了javascript與jQuery中ajax的實現(xiàn)方法以及AJAX各種跨域技術(shù)的原理與操作技巧,需要的朋友可以參考下2016-12-12
本篇文章主要介紹了webpack的配置文件entry與output，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
關(guān)于BootStrap modal 在IOS9中不能彈出的解決方法(IOS 9 bootstrap modal ios
本文給大家介紹BootStrap modal 在IOS9中不能彈出的問題以及bootstrap datepicker 在bootstrap modal中不顯示問題的解決方案，非常不錯，需要的朋友參考下2016-12-12
使用javascript技術(shù)驗真實姓名，要用到unicode字符來匹配，由于中國人的姓名長度一般是在2-4這個范圍內(nèi)，所以重復匹配{2,4}次。接下來，通過本文給大家分享js驗證省份證號與真實姓名是否匹配，需要的朋友可以參考下2015-10-10