Bootstrap菜单、导航、按钮

1、下拉菜单：

在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。

当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。

你也可以调用这个js文件。不过在我们的教程中，我们统一调用压缩好的“bootstrap.min.js”文件：

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

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

<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" class="divider"></li>

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

</ul>

</div>

使用方法：

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

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

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

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

data-toggle="dropdown"

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

<ul class="dropdown-menu">

2、下拉菜单分割线：

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

3、为有分割线的下拉菜单添加分组名：

<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" class="dropdown-header">第一部分菜单头部</li>

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

…

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

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

…

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

</ul>

</div>

4、对齐方式：

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

与此同时，还有一个类名刚好与“dropdown-menu-right”相反的类名“dropdown-menu-left”，其效果就是让下拉菜单与父容器左边对齐，其实就是默认效果。

5、菜单项状态：

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

下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。

这两种状态使用方法只需要在对应的菜单项上添加对应的类名：

6、按钮组：

按钮组和下拉菜单组件一样，需要依赖于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>

7、按钮工具栏：

（1）Bootstrap框架按钮工具栏只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中。

（2）按钮组大小设置 ：按钮组的大小，我们也可以通过类似的方法：

  ☑  .btn-group-lg:大按钮组

  ☑  .btn-group-sm:小按钮组

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

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

8、按钮（嵌套分组）：

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

使用的时候，只需要把当初制作下拉菜单的“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 class="btn-group">

   <button class="btnbtn-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>

9、按钮垂直分组：

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

<button class="btnbtn-default" type="button">案例分析</button>

<button class="btnbtn-default" type="button">联系我们</button>

<div class="btn-group">

   <button class="btnbtn-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>

10、等分按钮：

等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“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>

11、按钮下拉菜单：

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。

不同的是在普通的下拉菜单的基础上封装了按钮（.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>

12、按钮的向上向下三角形：

按钮的向下三角形，我们是通过在<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="btn-group dropup">

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

13、导航：

（1）基础样式：

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类

（2）标签型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>

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

（3）胶囊型导航：

胶囊形（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>

（4）垂直堆叠的导航：

除了水平导航之外，还有垂直导航。制作垂直堆叠导航只需要在“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><a href="##">Sass</a></li>

     <li><a href="##">jQuery</a></li>

     <li class="disabled"><a href="##">Responsive</a></li>

</ul>

在垂直堆叠导航也可以添加分隔线，只需要添加在导航项之间添加“<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>

（5）自适应导航：

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。

自适应导航和前面使用“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>

（6）二级导航（导航+下拉菜单）：

在Bootstrap框架中制作二级导航就更容易了。

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

            …

       </ul>

     </li>

     <li><a href="##">关于我们</a></li>

</ul>

只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以添加分隔线。

（7）面包屑导航：

面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）

<ol class="breadcrumb">

  <li><a href="#">首页</a></li>

  <li><a href="#">我的书</a></li>

  <li class="active">《图解CSS3》</li>

</ol>