自适应导航（使用）

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

<ul class=      <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>

运行效果如下：(可单击全屏查看)

实现原理并不难，列表（<ul>）上设置宽度为“100%”，然后每个菜单项(<li>)设置了“display:table-cell”，让列表项以模拟表格单元格的形式显示：

这里有一个媒体查询条件：“@media (min-width:768px){…}”表示自适应导航仅在浏览器视窗宽度大于768px才能按上图风格显示。当你的浏览器视窗宽度小于768px的时候，将会按下图的风格展示：

注：在最右侧代码窗口中设置全屏可以切换效果。

从上图效果可以得知，“nav-tabs”和“nav-justified”配合在一起使用，也就是自适应选项卡导航，浏览器视窗宽度小于768px时，在样式上做了另外的处理。

导航（垂直堆叠的导航）

在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可：

<ul class="nav nav-pills nav-stacked">      <li class="active"><a href="##">Home</a></li>      <li><a href="##">CSS3</a></li>

大家是否还记得，在下拉菜单一节中，下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加“<li class=”nav-divider”></li>”即可：

<ul class="nav nav-pills nav-stacked">
    <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="nav-divider"></li>
    <li class="disabled"><a href="##">Responsive</a></li>
</ul>

导航（胶囊形(pills)导航）

胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”即可：

<ul class="nav nav-pills">       <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>

导航（标签形tab导航）

标签形导航，也称为选项卡导航。特别是在很多内容分块显示的时，使用这种选项卡来分组十分适合。

标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名，如：

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

运行的效果如下所示：

实现原理非常的简单，将菜单项（li）按块显示，并且让他们在同一水平上排列，然后定义非高亮菜单的样式和鼠标悬浮效果。

其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下，选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名“class="active"”即可：

<ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li>
    …
</ul>

运行效果如下：

除了当前项之外，有的选项卡还带有禁用状态，实现这样的效果，只需要在标签项上添加“class="disabled"”即可：

<ul class="nav nav-tabs">
     <li class="active"><a href="##">Home</a></li>
     …
     <li class="disabled"><a href="##">Responsive</a></li>
</ul>

运行效果如下：

导航（基础样式）

导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。

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

菜单底部有长横线怎么形成的？

tabs带一根线，pills不带

向上弹起的下拉菜单

有些菜单是需要向上弹出的，比如说你的菜单在页面最底部，而这个菜单正好有一个下拉菜单，为了让用户有更好的体验，不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示，只需要在“btn-group”上添加这个类名（当然，如果是普通向上弹出下拉菜单，你只需要在“dropdown”类名基础上追加“dropup”类名即可）。

<div class="btn-group dropup">     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>     <ul class="dropdown-menu">

运行的效果如下：

按钮的向下向上三角形

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

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

有的时候我们的下拉菜单会向上弹起（接下来一个小节会介绍），这个时候我们的三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名）。

<div class=>
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

按钮下拉菜单

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。

按钮下拉菜单其实就是普通的下拉菜单，只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。如下所示：

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

运行的效果如下：

按钮（等分按钮）

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

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

<div class="btn-wrap"> <div class="btn-group btn-group-justified">   <a class="btnbtn-default" href="#">首页</a>   <a class="btnbtn-default" href="#">产品展示</a>   <a class="btnbtn-default" href="#">案例分析</a>   <a class="btnbtn-default" href="#">联系我们</a> </div> </div>

运行效果如下：

实现原理非常简单，把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）。具体样式代码如下：

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

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

按钮（垂直分组）

前面看到的示例，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。如下所示：

<div class="btn-group-vertical"> <button class="btnbtn-default" type="button">首页</button> <button class="btnbtn-default" type="button">产品展示</button>

按钮（嵌套分组）

很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。如下所示：

使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。如下所示：

<div class="btn-group"> <button class="btnbtn-default" type="button">首页</button> <button class="btnbtn-default" type="button">产品展示</button> <button class="btnbtn-default" type="button">案例分析</button> <button class="btnbtn-default" type="button">联系我们</button>  </div>

不是button里面加div，而是增加div里面再加button

dropdown-toggle是下拉菜单样式，data-toggle是js属性，而dropdown是属性值。data-toggle="dropdown"表示引用js给外层添加一个open类,<div class="dropdown">默认没有open,点击一次为<div class="dropdown open">，再点击一次为<div class="dropdown">

按钮（按钮工具栏）btn-toolbar是 btn-group的集合

在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组，如下图所示：

那么Bootstrap框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，如下所示：

<div class="btn-toolbar">   <div class="btn-group">     …   </div>   <div class="btn-group">     …   </div>

实现原理主要是让容器的多个分组“btn-group”元素进行浮动，并且组与组之前保持5px的左外距。

按钮组大小设置

在介绍按钮一节中，我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小，我们也可以通过类似的方法：

    .btn-group-lg:大按钮组

    .btn-group-sm:小按钮组

    .btn-group-xs:超小按钮组

只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组。如下所示：

<div class="btn-toolbar">
  <div class="btn-group btn-group-lg">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group btn-group-sm">
    …
  </div>
  <div class="btn-group btn-group-xs">
   …
  </div>
</div>

按钮（按钮组）

单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。那么在这一节中，我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。

源码查询：

按钮组也是一个独立的组件，所以可以找到对应的源码文件：

    LESS版本：对应的源文件为buttons.less

    Sass版本：对应的源文件为_buttons.scss

    CSS版本：对应bootstrap.css文件第3131行～第3291行

使用方法：

按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。

对于结构方面，非常的简单。使用一个名为“btn-group”的容器，把多个按钮放到这个容器中。如下所示：

<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-step-forward"></span>   </button> </div>

运行效果如下所示：

除了可以使用<button>元素之外，还可以使用其他标签元素，比如<a>标签。唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”。

从效果图上我们可以看出，按钮组四个角都是圆角（支持CSS3的浏览器），但有的小伙伴会问，我们平常制作网页时每个按钮都是带有圆角，而在按钮组中的按钮，除了第一个和最后一个具有边上的圆角之外，其他的按钮没有圆角，它是怎么实现的呢？其实实现方法非常简单：

  1、默认所有按钮都有圆角

  2、除第一个按钮和最后一个按钮（下拉按钮除外），其他的按钮都取消圆角效果

  3、第一个按钮只留左上角和左下角是圆角

  4、最后一个按钮只留右上角和右下角是圆角

tr属性变色悬浮样式

  table：基础表格

  table-striped：斑马线表格

  table-bordered：带边框的表格

  table-hover：鼠标悬停高亮的表格

  table-condensed：紧凑型表格

  table-responsive：响应式表格