第一次接觸神奇的Bootstrap菜單和導(dǎo)航

更新時(shí)間：2016年08月01日 10:04:10 作者：smartbetter

第一次接觸神奇的Bootstrap菜單和Bootstrap導(dǎo)航，Bootstrap讓W(xué)eb開發(fā)更迅速、更簡單，感興趣的小伙伴們可以參考一下

本篇將主要介紹Bootstrap的菜單、導(dǎo)航。

本篇開始將引入javascript相關(guān)文件，如下：

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

在Bootstrap中，下拉菜單組件是一個(gè)獨(dú)立的組件。Bootstrap的組件交互效果都是依賴于jquery庫寫的插件，所以在使用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é)尾，使頁面加載速度更快 -->
<!-- 如果要使用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> 
...

效果圖如下：

下拉菜單的對(duì)齊方式效果圖

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é)尾，使頁面加載速度更快 -->
<!-- 如果要使用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">首頁</button>
  <div class="btn-group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">移動(dòng)開發(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>
...

效果圖如下：

按鈕-嵌套分組

在實(shí)際運(yùn)用當(dāng)中，總會(huì)碰到垂直顯示的效果。在Bootstrap中也提供了這樣的風(fēng)格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可實(shí)現(xiàn)按鈕的垂直分組。

5.按鈕-等分按鈕

等分按鈕（自適應(yīng)分組按鈕）實(shí)現(xià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)航條主要通過“.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="##">首頁</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é)尾，使頁面加載速度更快 -->
<!-- 如果要使用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>

效果圖如下：

導(dǎo)航-基本用法

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="##">首頁</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>

效果圖如下：

膠囊形(pills)導(dǎo)航

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="##">首頁</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>

效果圖如下：

垂直堆疊的導(dǎo)航

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="##">首頁</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>

效果圖如下：

自適應(yīng)導(dǎo)航

10.導(dǎo)航-面包屑式

面包屑（Breadcrumb）也是一個(gè)獨(dú)立模塊組件，一般用于導(dǎo)航，主要是起的作用是告訴用戶現(xiàn)在所處頁面的位置（當(dāng)前位置）。使用方式很簡單，為ol加入breadcrumb類：

<ol class="breadcrumb">
  <li><a href="#">首頁</a></li>
  <li><a href="#">中國</a></li>
  <li class="active">北京</li>
</ol>

面包屑式導(dǎo)航

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

第一次接觸神奇的Bootstrap菜單和導(dǎo)航

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具