当前位置：首页 >前端技术 > Bootstrap-菜单，导航，按钮

Bootstrap-菜单，导航，按钮

1、下拉菜单（基本用法）

在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件：

☑ LESS版本：对应的源码文件为 dropdowns.less

☑ Sass版本：对应的源码文件为 _dropdowns.scss

☑ 编译后的Bootstrap版本：查看bootstrap.css文件第3004行～第3130行

在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中，我们统一调用压缩好的“bootstrap.min.js”文件

因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果

使用方法：

在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用。我们来简单的看看：

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

<div class="dropdown"></div>

2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle="dropdown"

3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

<ul class="dropdown-menu">

<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="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>  </ul></div>

2、下拉菜单（下拉分隔线、菜单标题）

在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能

<li role="presentation" class="divider"></li>

<li role="presentation" class="dropdown-header">第一部分菜单头部</li>

3、下拉菜单（对齐方式，菜单项状态）

Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名

 <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">

下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）

下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名

<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

4、按钮（按钮组）

<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></div>

5、按钮（按钮工具栏）

将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组

需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中

<div class="btn-toolbar">  <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>  </div>  <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>  </div>  <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>  </div>  <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>  </div></div>

6、按钮（嵌套分组,垂直分组,等分按钮）

我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果

<div class="btn-group">  <button class="btn btn-default" type="button">首页</button>  <button class="btn btn-default" type="button">产品展示</button>  <button class="btn btn-default" type="button">案例分析</button>  <button class="btn btn-default" type="button">联系我们</button>  <div class="btn-group">  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="##">公司简介</a></li><li><a href="##">企业文化</a></li><li><a href="##">组织结构</a></li><li><a href="##">客服服务</a></li></ul>  </div></div>

垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可

<div class="btn-group-vertical">

等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。

等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名

<div class="btn-wrap"><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><a class="btn btn-default" href="#">联系我们</a>  </div></div>

在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好

7、按钮的向下向上三角形

按钮的向下三角形，我们是通过在<button>标签中添加一个“<span>”标签元素，并且命名为“caret”:

这个三角形完全是通过CSS代码来实现的：

.caret {  display: inline-block;  width: 0;  height: 0;  margin-left: 2px;  vertical-align: middle;  border-top: 4px solid;  border-right: 4px solid transparent;  border-left: 4px solid transparent;}

三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名

.dropup .caret,.navbar-fixed-bottom .dropdown .caret {  content: "";  border-top: 0;  border-bottom: 4px solid;}

向上三角与向下三角的区别：其实就是改变了一个border-bottom的值

8、导航（基础样式）

在Bootstrap框架将导航独立出来成为一个导航组件，根据不同的版本，可以找到对应的源码：

☑ LESS版本：对应的源文件是navs.less

☑ Sass版本：对应的源文件是_navs.scss

☑ 编译后版本：对应源码是bootstrap.css文件第3450行～第3641行

导航基础样式

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子，他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式

<ul class="nav nav-tabs"><li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li></ul><br /><ul class="nav nav-tabs"><li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li></ul><br /> <ul class="nav nav-tabs"><li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>

9、胶囊形(pills)导航、垂直堆叠的导航、自适应导航

只需要把类名“nav-tabs”换成“nav-pills”即可

制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

<ul class="nav nav-tabs nav-justified">  <li class="active"><a href="##">Home</a></li>  <li><a href="##">CSS3</a></li>  <li><a href="##">Sass</a></li>  <li><a href="##">jQuery</a></li>  <li><a href="##">Responsive</a></li></ul>

10、导航加下拉菜单（二级导航）

只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul

<ul class="nav nav-pills">  <li class="active"><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="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li>  </ul>  </li> <li><a href="##">关于我们</a></li></ul>

11、面包屑式导航

面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。在Bootstrap框架中面包屑也是一个独立模块组件：

LESS版本：对应源文件breadcrumbs.less
Sass版本：对应源文件_breadcrumbs.scss
编译出来的版本：源码对应bootstrap.css文件第4112行～第4129行

使用方法：

使用方式就很简单，为ol加入breadcrumb类

<ol class="breadcrumb">  <li><a href="#">首页</a></li>  <li><a href="#">我的书</a></li>  <li class="active">《图解CSS3》</li></ol>

12、导航条

导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。

导航条和导航一样，在Bootstrap框架中是一个独立组件，所以你也可以根据自己的需求使用不同的版本：

LESS版本：对应的源文件navbar.less
Sass版本：对应的源文件_navbar.scss
编译后的版本：查看bootstrap.css文件第3642行～第4111行（注意这个所说的Bootstrap版本是3.1.1，其它版本位置是不一致的），这五百多行代码已从原文中节取出来，放在右侧代码顶部“bootstrap.css”文件中

<div class="navbar navbar-default" role="navigation">  　<div class="navbar-header">  　<a href="##" class="navbar-brand">慕课网</a>  　</div> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li>  <li class="dropdown"><a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="##">CSS3</a></li><li><a href="##">JavaScript</a></li><li class="disabled"><a href="##">PHP</a></li></ul> </li>  <li><a href="##">名师介绍</a></li>  <li><a href="##">成功案例</a></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="请输入关键词" /></div> <button type="submit" class="btn btn-default">搜索</button></form></div>

13、导航条中的按钮、文本和链接,固定导航条

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：

1、导航条中的按钮navbar-btn

2、导航条中的文本navbar-text

3、导航条中的普通链接navbar-link

但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题

<div class="navbar navbar-default" role="navigation">  　<div class="navbar-header">  　<a href="##" class="navbar-brand">慕课网</a>  　</div> <div class="nav navbar-nav"> <a href="##" class="navbar-text">Navbar Text</a> <a href="##" class="navbar-text">Navbar Text</a> <a href="##" class="navbar-text">Navbar Text</a> </div></div>

两种固定导航条的方式：

☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部

☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部

14、响应式导航条

实现的导航条仅能适配于大屏幕的浏览器，但当浏览器屏幕变小的时候，就不适合了。

使用方法：

1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

2、保证在窄屏时要显示的图标样式（固定写法）

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse

<div class="navbar navbar-default" role="navigation">  <div class="navbar-header"> 　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 --><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button><!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 --><a href="##" class="navbar-brand">慕课网</a>  </div>  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->  <div class="collapse navbar-collapse navbar-responsive-collapse"><ul class="nav navbar-nav">  <li class="active"><a href="##">网站首页</a></li>  <li><a href="##">系列教程</a></li>  <li><a href="##">名师介绍</a></li>  <li><a href="##">成功案例</a></li>  <li><a href="##">关于我们</a></li> </ul>  </div></div>

15、分页导航（带页码的分页导航）

在Bootstrap框架中提供了两种分页导航：

☑ 带页码的分页导航

☑ 带翻页的分页导航

带页码的分页导航

带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。在Bootstrap框架为开发者提供不同的版本：

☑ LESS版本：对应的源文件pagination.less

☑ Sass版本：对应的源文件_pagination.scss

☑ 编译后版本：对应bootstrap.css文件第4130行～第4222行

使用方法：

平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法

要禁用当前状态和禁用状态不能点击，我们还要依靠js来实现，或者将这两状态下的a标签换成span标签。

大小设置：

在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样：

1、通过“pagination-lg”让分页导航变大；

2、通过“pagination-sm”让分页导航变小、

<ul class="pagination pagination-lg">  <li><a href="#">&laquo;第一页</a></li>  <li><a href="#">11</a></li>  <li><a href="#">12</a></li>  <li class="active"><a href="#">13</a></li>  <li><a href="#">14</a></li>  <li><a href="#">15</a></li>  <li class="disabled"><a href="#">最后一页&raquo;</a></li></ul><ul class="pagination pagination">  <li><a href="#">&laquo;第一页</a></li>  <li><a href="#">11</a></li>  <li><a href="#">12</a></li>  <li class="active"><a href="#">13</a></li>  <li><a href="#">14</a></li>  <li><a href="#">15</a></li>  <li class="disabled"><a href="#">最后一页&raquo;</a></li></ul><ul class="pagination pagination-sm">  <li><a href="#">&laquo;第一页</a></li>  <li><a href="#">11</a></li>  <li><a href="#">12</a></li>  <li class="active"><a href="#">13</a></li>  <li><a href="#">14</a></li>  <li><a href="#">15</a></li>  <li class="disabled"><a href="#">最后一页&raquo;</a></li></ul>

<ul class="pager">  <li><a href="#">&laquo;上一页</a></li>  <li><a href="#">下一页&raquo;</a></li></ul>

16、标签、徽章

徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读

<a href="#">Inbox <span class="badge">42</span></a> <!--navbar-default导航条勋章--><div class="navbar navbar-default" role="navigation">  　<div class="navbar-header">  　<a href="##" class="navbar-brand">慕课网</a>  　</div><ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li><li><a href="##">系列教程</a></li><li><a href="##">名师介绍</a></li><li><a href="##">成功案例<span class="badge">23</span></a></li><li><a href="##">关于我们</a></li></ul></div><!--nav-pills导航条勋章--><ul class="nav nav-pills">  <li class="active"><a href="#">Home <span class="badge">42</span></a></li>  <li><a href="#">Profile</a></li>  <li><a href="#">Messages <span class="badge">3</span></a></li></ul><br /> <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">  <li class="active"><a href="#">  <span class="badge pull-right">42</span>  Home</a>  </li>  <li><a href="#">Profile</a></li>  <li><a href="#">  <span class="badge pull-right">3</span>  Messages</a>  </li></ul><br /><!--按钮勋章--><button class="btn btn-primary" type="button">  Messages <span class="badge">4</span></button>

<h3>Example heading <span class="label label-default">New</span></h3>  <!--代码--><span class="label label-default">默认标签</span><span class="label label-primary">主要标签</span><span class="label label-success">成功标签</span><span class="label label-info">信息标签</span><span class="label label-waing">警告标签</span><span class="label label-danger">错误标签</span>