Bootstrap-菜单，导航，按钮

时间 2019-11-25

原文原文链接

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

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

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

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

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

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

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

使用方法：编辑器

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

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

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

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

data-toggle="dropdown"

三、下拉菜单项使用一个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>

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

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

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

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

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

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>

四、按钮（按钮组）

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

五、按钮（按钮工具栏）

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

须要将按钮组“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>

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

咱们常把下拉菜单和普通的按钮组排列在一块儿，实现相似于导航菜单的效果

<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在部分浏览器下支持并不友好

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

按钮的向下三角形，咱们是经过在<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的值

八、导航（基础样式）

在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>

九、胶囊形(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>

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

只须要将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>

十一、面包屑式导航

面包屑(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>

十二、导航条

导航条（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>

1三、导航条中的按钮、文本和连接,固定导航条

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

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

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

三、导航条中的普通连接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：导航条固定在浏览器窗口底部

1四、响应式导航条

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

使用方法：

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

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

反色导航条实际上是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>

1五、分页导航（带页码的分页导航）

在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框架中，也能够经过几个不一样的状况来设置其大小。相似于按钮同样：

一、经过“pagination-lg”让分页导航变大；

二、经过“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>

1六、标签、徽章

徽章效果和前面介绍的标签效果是极其的类似。也是用来作一些提示信息使用。常出现的是一些系统发出的信息，好比你登陆你的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-warning">警告标签</span>
<span class="label label-danger">错误标签</span>