Bootstrap学习笔记(4)-JS插件

模态弹出框(Modal)

导入JavaScript插件

Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。

Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。

一次性导入：
Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。
具体使用如下（或见右侧代码编辑器28-29行）：

<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>
特别声明：jQuery版本库也可以加载你本地的jQuery版本。

单独导入：
为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：
☑ 动画过渡（Transitions）:对应的插件文件“transition.js”
☑ 模态弹窗（Modal）:对应的插件文件“modal.js”
☑ 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”
☑ 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”
☑ 选项卡（Tab）：对应的插件文件“tab.js”
☑ 提示框（Tooltips）：对应的插件文件“tooltop.js”
☑ 弹出框（Popover）：对应的插件文件“popover.js”
☑ 警告框（Alert）：对应的插件文件“alert.js”
☑ 按钮（Buttons）：对应的插件文件“button.js”
☑ 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”
☑ 图片轮播Carousel：对应的插件文件“carousel.js”
☑ 自动定位浮标Affix：对应的插件文件“affix.js”
上述单独插件的下载可到github去下载（https://github.com/twbs/bootstrap）。

动画过渡(Transitions)

Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：
☑ 调用统一编译的bootstrap.js；
☑ 调用单一的过渡动画的JavaScript插件文件transition.js.

transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果。

默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：
☑ 模态弹出窗（Modal）的滑动和渐变效果；
☑ 选项卡（Tab）的渐变效果；
☑ 警告框（Alert）的渐变效果；
☑ 图片轮播（Carousel）的滑动效果。

模态弹出框(Modals)

在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。
单独引入 bootstrap 中发布出的“modal.js”文件

模态弹出框-结构分析

Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：
☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

模态弹出窗的结构如下：

<div class="modal show">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

弹出窗的主体样式实现：
对于一个模态弹出窗而言，modal-content才是样式的关键。其主要设置了弹出窗的边框、边距、背景色和阴影等样式。

.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

除此之外，modal-content中的modal-header、modal-body和modal-footer三个部分样式设置：

.modal-header {
  min-height: 16.42857143px;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

这三个部分主要控制一些间距的样式。而modal-footer都是用来放置按钮，所以底部还对包含的按钮做了一定的样式处理。

.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

模态弹出框-实现原理解析

bootstrap中的“模态弹出框”有以下几个特点：
1、模态弹出窗是固定在浏览器中的。
2、在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。
3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。

固定在浏览器(源代码)实现：

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

水平居中(源代码)实现：

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

当浏览器视窗大于768px时，模态弹出窗的宽度为600px（源代码）实现：

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}

蒙板样式实现：
在Bootstrap框架中为模态弹出窗也添加了一个蒙层样式“modal-backdrop”，只不过他默认情况下是全屏黑色的.这个是用js的dom操作实现的，当你点击按钮之后，通过js代码加上了一个div层，并给他加了一个class=”modal-backdrop”的样式，关闭之后又会删除这个div。

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

同样，给其添加了一个过渡动画，从fade到in，把opacity值从0变成了0.5。

.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

两种尺寸选择：
Bootstrap框架还为模态弹出窗提供了不同尺寸，一个是大尺寸样式“modal-lg”，另一个是小尺寸样式“modal-sm”。其结构上稍做调整：

<!-- 大尺寸模态弹出窗 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1"role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
       <div class="modal-content"> ... </div>
    </div>
</div>
<!-- 小尺寸模态弹出窗 -->
<div class="modal fade bs-example-modal-sm"tabindex="-1"role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
       <div class="modal-content"> ... </div>
    </div>
</div>

触发模态弹出窗2种方法

模态弹出窗在页面加载完成时，是被隐藏在页面中的，只有通过一定的动作（事件）才能触发模态弹出窗的显示。
在Bootstrap框架中实现方法有2种，接下来分别来介绍这2种触发模态弹出窗的使用方法。

声明式触发方法(data属性调用)：

方法一、模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle=”” 或者 data-dismiss=””）。例如：

<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

注意以下事项：
1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；
2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。

方法二：触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性，如：

<!-- 触发模态弹出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
<!-- 模态弹出窗 -->
<div class="modal fade"  id="mymodal" >
    <div class="modal-dialog" >
        <div class="modal-content" >
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

不过建议还是使用统一使用data-target的方式来触发。

JavaScript触发方法

见下文相关内容

为弹出框增加过渡动画效果

为模态弹出框增加过度动画效果：
可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。

<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
小的模态弹出窗
</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

模态弹出窗的使用(data-参数说明)

除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop，是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示：

模态弹出窗使用JavaScript触发

除了使用自定义属性触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件，来触发。比如说给一个按钮一个单击事件，然后触发模态弹出窗。如下面的一个简单示例：

<!-- 触发模态弹出窗元素 -->
<button class="btn btn-primary" type="button">点击我</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JavaScript触发的弹出窗代码：

$(function(){
  $(".btn").click(function(){
    $("#mymodal").modal();
  });
});

JavaScript触发时的参数设置

使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。

属性设置
模态弹出窗默认支持的自定义属性主要有：

比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({
            keyboard:false
        });
    });
});

参数设置：
在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下：

事件设置：
模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：

调用方法也非常简单：

$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})

下拉菜单（Dropdown）

插件对应的源文件：dropdown.js
和模态弹出窗一样，触发下拉菜单方式有两种，一种是属性声明式用法，另一种是JavaScript方法。

属性声明方法

用户只需要点击有向下三角形的按钮链接或者直接点击三角形就会弹出下拉菜单。实现这个效果，都是依赖于HTML相关元素自定义的属性完成。所以在编写HTML结构的时候必须满足下面的规则：
☑ 按照制作菜单的结构编写结构
☑ 被点击的菜单项链接或按钮需要添加自定义属性 data-toggle=”dropdown”

<div class="navbar navbar-default" id="navmenu">
    <a href="##" class="navbar-brand">W3cplus</a>
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
                <li role="presentation"><a href="##">CSS3</a></li>
                <li role="presentation"><a href="##">HTML5</a></li>
                <li role="presentation"><a href="##">Sass</a></li>
            </ul>
        </li>
        <li><a href="##">前端论坛</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</div>

实现下拉菜单原理：
Dropdown插件加载时，对所有带 有“data-toggle=dropdown”样式的元素绑定了事件，用户单击带有“data-toggle=dropdown”样式的链接或按钮时， 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时，下拉菜单的父容器（上面的示例是 <li class="dropdown">）会添加一个open类名，此时下拉菜单显示；再次单击时，JavaScript会删除刚添加的open类 名，此时下拉菜单将隐藏。

简单的说，要制作下拉菜单，其结构基本如下：

<div class="dropdown">
    <a data-toggle="dropdown" href="#">下拉菜单触发器</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul>
</div>

JavaScript方法

使用JavaScript触发下拉菜单和声明式原理是基本类似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者样式。同样用一个简单的示例来做演示：

<ul class="nav nav-pills">
    <li class="dropdown">
        <a href="##"  class="dropdown-toggle" data-toggle="dropdown" role="button" id="tutorial">教程<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
            <li role="presentation"><a href="##">CSS3</a></li>
            <li role="presentation"><a href="##">HTML5</a></li>
            <li role="presentation"><a href="##">Sass</a></li>
        </ul>
    </li>
    <li class="active"><a href="##">前端论坛</a></li>
    <li><a href="##">关于我们</a></li>
</ul>

使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单。

$(function(){
    $(".dropdown-toggle").dropdown();
})

还可以使用参数“toggle”。当下拉菜单隐藏时，调用dropdown(“toggle”)方法可以显示下拉菜单，反之，如果下拉菜单显示时，调用dropdown(“toggle”)方法可以让下拉菜单隐藏。

$(function(){
    $(".dropdown-toggle").dropdown("toggle");
})

不过使用该参数，每次单击都要两次toggle，就会一直是一个不变的状态。所以，一般情况下，使用示例中不带参数的方法。就算你需要使用参数“toggle”，也建议使用jQuery的one方法：

$(".dropdown-toggle").one("click",function(){
    $(this).dropdown("toggle");
})

使用js控制下拉菜单的显示与影藏不能删掉 data-toggle=”dropdown”属性。
如果删掉data-toggle属性，则下拉菜单会无法关闭或是无法打开，因此这里使用的js语法可有可无。

滚动监控器(Scrollspy)

插件源文件：scrollspy.js
滚动监控器是Bootstrap提供的非常实用的JavaScript插件，被广泛应用到Web开发中。其表现形式是：
1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。
2、用户拖动滚动条，当滚动到导航条相应导航项时，导航项就会高亮显示：
这是因为该插件可以自动检测滚动条到达哪个位置，然后在需要高亮的菜单元素上加了一个“active”样式。

滚动监控器的设计

在Web页面中实现Bootstrap滚动监控器其实非常简单，
第一步：使用滚动监控器，首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。
第二步：设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控。

第三步：设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，并且注意加入“data-target=”#navbar-menu””属性（这个属性值要与前面的nav标签的id名称保持一致）

<div class="scrollspy" data-target="#navbar-menu">
    <h4 id="blog">Blog</h4>
    <p>…</p>
    <h4 id="html">Html</h4>
    <p>…</p>
    <h4 id="css">CSS</h4>
    <p>…</p>
    <h4 id="sass">Sass</h4>
    <p>…</p>
    <h4 id="js">JavaScript</h4>
    <p>…</p>
    <p>…</p>
    <h4 id="php">PHP</h4>
    <p>…</p>
    <p>…</p>
    <h4 id="about">About</h4>
    <p>…</p>
    <p>…</p>
</div>

第四步： 声明属性触发滚动监控
为监控对象设置被监控的data属性：data-spy=”scroll”，指定监控的导航条：data-target=”#navbar-menu”。同时定义监控过程中滚动条偏移位置data-offset=”60”。代码如下：

<div class="scrollspy" data-spy="scroll" data-target="#navbar-menu" data-offset="60">
  …
</div>

第五步：为监控对象定义样式，设置容器scrollspy大小（设置高度目的是为了产生垂直滚动条）。无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。

.scrollspy{
    height:500px;
    font-size:20px;
    overflow:auto;
    position:relative;
}

注意事项：
经测试，滚动条时导航并不准确，需要加上position:relative,同时调整data-offset=”60”的值，这样比较准确。

在body中加监控

直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在body内部。如下所示：

<body data-spy="scroll" data-target="#navbar-menu">
    <div class="navbar navbar-default navbar-fixed-top" id="navbar-menu">
    </div>
    <h3 id="blog">Blog</h3>
    <p>…</p>
</body>

注意：导航条必须设置为顶部固定样式（navbar-fixed-top）。

JavaScript方法触发滚动监控器

在Bootstrap框架中，使用JavaScript方法触发滚动监控器相对来说较为简单，只需要指定两个容器的名称即可。比如下面的结构：

<nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation">
  …
</nav>
<div class="scrollspy" id="scrollspy">
  …
</div>

JavaScript触发可以这样写：

$(function(){
    $("#scrollspy").scrollspy({
        target: "#navbar-menu"
    });
})

Bootstrap的滚动监控还提供了一个方法scrollspy(“refresh”)。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法：

$(function(){
    $("[data-spy='scroll']").each(function(){
        var $spy=$(this).scrollspy("refresh");
    })
})

需要注意的是，这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外，还提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项。

选项卡(tab)

插件源文件：tab.js
选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容。
Bootstrap框架中的选项卡主要有两部分内容组成：

• 选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs）
• 底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示

选项卡的结构

一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。拿下面的示例来做演示。其HTML结构如下：

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab">公告</a></li>
    <li><a href="#rule" role="tab">规则</a></li>
    <li><a href="#forum" role="tab">论坛</a></li>
    <li><a href="#security" role="tab">安全</a></li>
    <li><a href="#welfare" role="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。

在Bootstrap框架中选项卡nav-tabs已带有样式，前面在介绍导航一节中有详细介绍。而对于面板内容tab-pane都是隐藏的，只有当前面板内容才是显示的：

.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
}

选项卡–触发切换效果

选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求：
1、选项卡导航链接中要设置 data-toggle=”tab”
2、并且设置 data-target=”对应内容面板的选择符(一般是ID)”;
如果是链接的话，还可以通过 href=”对应内容面板的选择符(一般是ID)”
主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。
3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。

代码如下所示：

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

为选择卡添加fade样式

为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。
在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。如下面的示例所示。

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
    <li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

胶囊式选项卡（nav-pills）

在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle=”tab”换成data-toggle=”pill”。

下面的示例是将上面的 nav-tabs 换成 nav-pills：

<!-- 选项卡组件（菜单项nav-pills）-->
<ul id="myTab" class="nav nav-pills" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="pill">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="pill">论坛</a></li>
    <li><a href="#security" role="tab" data-toggle="pill">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

选项卡–JavaScript触发方法

除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。

调用方法:
在每个链接的单击事件中调用tab(“show”)方法，显示对应的标签面板内容。
针对上面的示例，删除HTML中自定义的 data-toggle=”tab” 或 data-toggle=”pill” 的属性，然后通过下面的脚本来调用：

$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})

提示框(Tooltips)

插件源文件：tooltip.js

提示框的结构

在Bootstrap框架中的提示框，结构非常简单，常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框，他们都有一个共性：
1、通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。
2、通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。
3、还有一个最重要的参数不可缺少，data-toggle=”tooltip”。
如下所示：

<button type="button"         class="btnbtn-default"         data-toggle="tooltip"         data-placement="left"         data-original-title="提示框居左">
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="left" 
        data-original-title="提示框居左">
        提示框居左
</button>
<button type="button"         class="btnbtn-default"         data-toggle="tooltip"         data-placement="top"         data-original-title="提示框在顶部">
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="top" 
        data-original-title="提示框在顶部">
        提示框在顶部
</button>
<button type="button"         class="btnbtn-default"         data-toggle="tooltip"         data-placement="bottom"         data-original-title="提示框在底部">
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="bottom" 
        data-original-title="提示框在底部">
        提示框在底部
</button>
<button type="button"         class="btnbtn-default"         data-toggle="tooltip"         data-placement="right"         data-original-title="提示框居右">
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="right" 
        data-original-title="提示框居右">
        提示框居右
</button>

JS触发提示框方法

Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。

最简单的触发方式如下：

$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如：

$(function(){
    $('#myTooltip').tooltip({
       title:"我是一个提示框，我在顶部出现",
       placement:'top'
    });
});

提示框-其他的自定义属性

除此之外，提示框还有其他的自定义属性，每个自定义属性都具自身存在的意义，如下表所示：

JS设置参数方法

除了在 html 代码中使用 data- 设置提示框参数，还可以使用 JavaScript 来设置提示框参数，主要包括：

表格中的任何属性，在使用 JavaScript 触发提示框时，都可以被调用。
例子：

<script>  $(function(){    $('#myTooltip1').tooltip({      title:"我是一个提示框，我在顶部出现",      placement:"top"    });  });</script>
  $(function(){
    $('#myTooltip1').tooltip({
      title:"我是一个提示框，我在顶部出现",
      placement:"top"
    });
  });

弹出框(Popover)

插件源文件：popover.js
弹出框(Popover)仅从外表上看，和前面介绍的提示框（Tooltip）长得差不多
不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。

弹出框的结构

弹出框Popover和提示框tooltip相比，就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容。同样可以使用<button>或者<a>标签来制作，如下：

<button type="button"         class="btnbtn-default"         data-container="body"         data-placement="bottom"         data-toggle="popover"         data-original-title="Bootstrap弹出框标题"         data-content="Bootstrap弹出框的内容" >
        class="btnbtn-default" 
        data-container="body" 
        data-placement="bottom" 
        data-toggle="popover" 
        data-original-title="Bootstrap弹出框标题" 
        data-content="Bootstrap弹出框的内容" >
        猛击我吧
</button>
<a href="#" class="btnbtn-default"         data-container="body"         data-placement="right"         data-toggle="popover"         title="Bootstrap弹出框标题"         data-content="Bootstrap弹出框的内容">
        data-container="body" 
        data-placement="right" 
        data-toggle="popover" 
        title="Bootstrap弹出框标题" 
        data-content="Bootstrap弹出框的内容">
        猛击我吧
</a>

弹出框的制作结构和提示框并无太多差别，但样式风格上还是有蛮大的区别。其主要定义了弹出框边框、圆角、背景、阴影以及三角形等样式.

触发弹出框的方法

Bootstrap框架中触发弹出框和提示框一样不能直接通过HTML的自定义data属性来触发。需要依赖于JavaScript脚本。
最简单的触发方式如下：
html代码：

<button type="button"         class="btn btn-default"         data-toggle="popover"         data-placement="left"         title="提示框居左"         data-content="我是弹出框的内容">
        class="btn btn-default" 
        data-toggle="popover" 
        data-placement="left" 
        title="提示框居左" 
        data-content="我是弹出框的内容">
        猛击我吧
</button>

js代码：

$(function(){
    $('[data-toggle="popover"]').popover();
});

注意：上面这种方法注意要使用 data- 设置弹出框的属性。

使用JS设置参数：
除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些data属性，如：

<!-- html代码 -->
<button type="button"          class="btn btn-default"          id="myPopover">
          class="btn btn-default"
          id="myPopover">
          猛击我吧
</button>

<!-- javascript代码 -->
$(function(){
    $('#myPopover').popover({
        title:"我是弹出框的标题",
        content:"我是弹出框的内容",
        placement:"top"
    });
});

自定义结构属性

同样在弹出框制作时，可以在HTML中定义下表所列的自定义属性：

举例：

<button type="button"         class="btn btn-default"         data-toggle="popover"         data-placement="bottom"         title="提示框居左"         data-content="我是弹出框的内容"         data-trigger="hover"         data-dalay="600">
         class="btn btn-default"
         data-toggle="popover"
         data-placement="bottom"
         title="提示框居左"
         data-content="我是弹出框的内容"
         data-trigger="hover"
         data-dalay="600">
         猛击我吧
 </button>

提示框和弹出框的异同

弹出框中HTML自定义的 data 属性和提示框中的自定义的 data 属性基本相同，只不过在其基础上增加了一个 data-content 属性，用来设置弹出框的内容。其实两插件也有略微的不同：
1、提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框popover是click。
2、提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)
3、两个插件的显示模板不同：

<!-- 提示框tooltip的模板： -->
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>

<!-- 弹出框popover的模板： -->
<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
</div>

警告框(Alert)

插件源文件：alert.js

结构与样式

警告框插件就是在“警示框组件”基础上添加了一个关闭的按钮，外形上就是一个X。所以其结构只需要在警示框组件的基础上添加一个按钮即可：

<div class="alert " role="alert">
    <button class="close" type="button" >&times;</button>
    恭喜您操作成功！
</div>

使用声明式触发警告框

1、如果通过自定义的HTML属性（声明式）来触发警告框，需要在关闭按钮上设置自定义属性data-dismiss=”alert”，如下所示：

<div class="alert alert-success" role="alert">
    <button class="close"  data-dismiss="alert" type="button" >&times;</button>
    <p>恭喜您操作成功！</p>
</div>

点击X会关闭整个警告框。
2、其实关闭按钮，不一定非要用X号，也可以是普通的按钮元素或者链接元素，只需要保证关闭元素带有自定义属性data-dismiss=”alert”即可，如下面示例所示：

<div class="alert alert-warning" role="alert">
    <h4>谨防被骗</h4>
    <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
    <a href="#" class="btn btn-danger" data-dismiss="alert">关闭</a>
</div>

当用户点击“关闭”按钮就可以关闭整个警告框。
3、当关闭按钮不在 div.alert 容器内时，只要给关闭元素定义了data-target属性（如果是链接元素还可以通过href属性）,而且属性值与div.alert容器的id一致，关闭元素放在容器外也可以关闭警告框。来看一个简单的示例：

<div class="alert alert-warning" role="alert" id="myAlert">
    <h4>谨防被骗</h4>
    <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
</div>
<button type="button" data-target="#myAlert" class="btn btn-danger" data-dismiss="alert">关闭</button>

这种方式点击“关闭”按钮也可以关闭警告框，只不过“关闭”按钮自身没办法关闭，会一直显示在那。

JavaScript触发警告框

除了通过自定义data-dismiss=”alert”属性来触发警告框关闭之外，还可以通过JavaScript方法。只需要在关闭按钮上绑定一个事件。如下所示：

<!-- html部分代码 -->
<div class="alert alert-warning" role="alert" id="myAlert">
    <h4>谨防被骗</h4>
    <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
    <button type="button"  class="btn btn-danger" id="close">关闭</button>
</div>

<!-- javascript部分代码 -->
$(function(){
    $("#close").on("click",function(){
        $(this).alert("close");
    });
});

按钮插件(Button)

插件源文件：button.js
Bootstrap框架中的“按钮插件”适用情形：
☑ 点击按钮时，按钮文字变为“正在加载…”，一旦加载完之后又变回“获取数据”。简单点说就是控制按钮状态，比如禁用状态、正在加载状态、正常状态等；
☑ 按钮切换状态
☑ 按钮模仿单选按钮
☑ 按钮模仿复选按钮

按钮加载状态

通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息。例如，点击“加载”按钮，会触发按钮的加载的状态。如下所示：

<button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button>

通过data-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button(“loading”)方法来激活按钮的加载状态行为。如下所示：

$(function(){
    $("#loaddingBtn").click(function () {
        $(this).button("loading");
      });
});

模拟单选按钮

模拟单选择按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组，能够让设计更具个性化，可以定制出更美观的单选按钮组。
在Bootstrap框架中按钮插件中，可以通过给按钮组自定义属性data-toggle=”buttons”，如下所示：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options1">男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options2">女
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options3">未知
    </label>
</div>

运行效果如下：

注：使用这种效果的时候，无需借助JavaScript代码来触发，因为默认Bootstrap就已经为用户初始化好了。

模拟复选按钮

使用按钮组来模拟复选按钮和模拟单选按钮是一样的，具有同等效果，也是通过在按钮组上自定义data-toggle=”buttons”来实现。唯一不同的是，将input[type=”radio”]换成input[type=”checkbox”]，如下所示：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options1">电影
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options2">音乐
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options3">游戏
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options4">摄影
    </label>
</div>

运行效果如下：

按钮状态切换

使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。例如，下面代码可以激活按钮行为特性，单击时将按钮激活，再单击可以让按钮恢复到默认状态：
<button type="button" data-toggle="button" class="btn btn-primary">确认</button>
注意，这里自定义属性是 data-toggle=”button”，而不是 data-toggle=”buttons”。

按钮插件-JavaScript用法

除了上面介绍的属性声明使用方法之外，按钮插件还可以通过调用button函数，然后给button函数传入具体的参数，实现不同的效果。而其中有两个参数是固定不变的，即toggle和reset。其他的都可以随意定义：
1、切换按钮状态（得到焦点）：
$("#mybutton").button("toggle")
2、重新恢复按钮：
$("#mybutton").button("reset")
如下代码：

$(function() {
      $("#mybutton").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
         });        
      });
});

3、任意参数：
$("#mybutton").button("任意字符参数名")
上面代码作用：替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”。如下代码：

<!-- html部分 -->
<button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" >确认</button>

<!-- js部分代码： -->
 $(function() {
      $("#mybutton").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
         });        
      });
 });

jQuery知识点：
queue()函数用于获取或设置当前匹配元素上待执行的函数队列。
如果当前jQuery对象匹配多个元素：获取队列时，只获取第一个匹配元素上的队列；设置队列(替换队列、追加函数)时，则为每个匹配元素都分别进行设置。
如果需要移除并执行队列中的第一个函数，请使用dequeue()函数。你也可以使用clearQueue()函数清空指定的队列。
dequeue()函数用于移除每个匹配元素的指定队列中的第一个函数，并执行被移除的函数。

手风琴(Collapse)

插件源文件：collapse.js
Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。

手风琴结构

手风琴最关键的部分，就是每个标题对应有一个内容，在Bootstrap框架中将这两个部分组合起来称为一个panel页板，如右边效果所示，他就有三个panel面板，将这三个面板组合在一起，就是一个面板组合 panel-group，也就是手风琴的结构。如：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题一</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">标题一对应的内容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">标题二对应的内容</div>
        </div>
    </div>
</div>

简单点就是一个触发器和一个折叠区：

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button>
<div id="demo" class="collapse in">折叠区</div>

声明式触发手风琴

触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target=”#折叠区标识符”。接下来我们来看一个简单的示例：（六步）
第一步，设计一个面板组合，里面有三个折叠区：

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
</div>

第二步：给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式。

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">标题一</h4>
    </div>
    <div class="panel-collapse">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>
…

第三步，为了把标题和内容区捆绑在一起，可以通过锚链接的方法，把标题区域和面板区连在一起：

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
        </div>
        <div class="panel-collapse" id="panel1">
            <div class="panel-body">折叠区内容...</div>
        </div>
    </div>
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a href="#panel2">标题二</a></h4>
        </div>
        <div class="panel-collapse" id="panel2">
            <div class="panel-body">折叠区内容...</div>
        </div>
    </div>
    ......
</div>

第四步，控制面板内容区是否可视。在Bootstrap框架中，如果你想让内容区域不可视，只需要在 panel-collapse 样式上添加 collapse：

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
    </div>
    <div class="panel-collapse collapse" id="panel1">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

每个面板的内容区都被隐藏起来了，变成不可视，但有时候希望默认第一个面板内容是可视的，需要怎么办？其实Bootstrap作者早就为大家做了这方面的考虑，你只需要在collapse基础上再追加 in 样式：

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
    </div>
    <div class="panel-collapse collapse in" id="panel1">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

第五步，激活手风琴交互行为。要完成交互行为，需要在标题链接中自定义两个属性，一个是data-toggle，并且取值为collapse；另一个是data-target，取值为各个面板内容区的标识符，比如说ID，在这个例子分别是#panel1、#panel2和#panel3：

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4>
    </div>
    <div class="panel-collapse collapse in" id="panel1">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

到此，实现了单个面板的“显示/隐藏”的切换。但离手风琴效果还略有差距。
注意：在这个案例中不加入data-target=”#panel1”也可以，因为前面已经有了href=”#panel1”，但如是button按钮作为触发器就必须使用data-target=”#panel1”语句了。
(data-target和href一起使用时，会产生冲突，建议在有href时，不用data-target。或者将href写成”href=’javascript:;’”)

第六步，定义data-parent属性，实现点击一个其中一个元素时，关闭所有的折叠区，再打开所单击的区域（如果所单击区域是展示的，则会关闭）。这个data-parent取值与手风琴面板容器的标识符相匹配，比如这个例子是指 #myAccordion：

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>
            </h4>
        </div>
…

通过示例，我们可以看出以下几点：
☑ 使用 panel 的 panel-title 做为触元素，使用panel-body的父元素作为折叠区；
☑ 使用一个 panel-group 来包含多个 panel，从而实现手风琴效果；
☑ 每个 panel 里的触发元素都要指定data-parent属性；
☑ data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符；
☑ 触发元素需要指定 data-toggle，并且值为 collapse；
☑ 触发元素都要指定 data-target属性；
☑ data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。

图片轮播(Carousel)

插件对应的文件：carousel.js
图片轮播效果在Web中常常能看到，很多人也称之为幻灯片。其主要显示的效果就是多幅图片轮回播放.在Bootstrap框架中是通过Carousel插件来实现.

轮播图片的设计

一个轮播图片主要包括三个部分：
☑ 轮播的图片
☑ 轮播图片的计数器
☑ 轮播图片的控制器
复杂一点的轮播图片，每个轮播区会带有对应的标题和描述内容。

在 Bootstrap 框架中，轮播图设计：
第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。
<div id="slidershow" class="carousel"></div>

第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有顺列表来制作：

<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        ...
    </ol>
</div>

在 Bootstrap 框架中，轮播图片计数器，都是以圆点向大家呈现，其具体样式如下：

.carousel-indicators {
    position: absolute; /*整个计数区域绝对定位*/
    bottom: 10px; /*距容器carousel底部10px*/
    z-index: 15; /*设置其在Z轴的层级*/
    /*让整个计数区水平居中*/
    left: 50%;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
}
.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000 \9;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 10px;
}
/*设置当前状态样式*/
.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
}

第三步：设计轮播图片播放区。轮播图整个效果中，播放区是最关键的一个区域，这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片：

<div id="slidershow" class="carousel">
    <!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
        …
    </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="##"><img src="images/1.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="##"><img src="images/2.jpg" alt=""></a>
        </div>
        …
        <div class="item">
            <a href="##"><img src="images/3.jpg" alt=""></a>
        </div>
    </div>
</div>

其主要通过 carousel-inner 来控制其样式呈现。
很多轮播图片效果，在每个图片上还对应有自己的标题和描述内容。其实 Bootstrap 框架中的 Carousel 也提供类似的效果。只需要在 item 中图片底部添加对应的代码：

<div id="slidershow" class="carousel">
    <!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
    …
    </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="##"><img src="images/1.jpg" alt=""></a>
            <!-- 图片对应标题和描述内容 -->
            <div class="carousel-caption">
                <h3>图片标题</h3>
                <p>描述内容...</p>
            </div>
        </div>
    …
    </div>
</div>

第四步：设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 Carousel 中通过 carousel-control 样式配合 left 和 right 来实现。其中left表示向前播放，right表示向后播放。其同样放在carousel容器内：

<div id="slidershow" class="carousel">
    <!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators">
       …
    </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        …
    </div>
    <!-- 设置轮播图片控制器 -->
    <a class="left carousel-control" href="" >
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

通过两个 a 链接然后在内部定义要显示的小图标，一个是向前，一个是向后。
这两个图标都显示在图片容器的上面（z-index的值大于carousel-inner的）。

声明式触发轮播图的播放

触发轮播图的播放方法也有两种，一种是声明式，另外一种是JavaScript方式。首先来看声明式方法。

声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置。其主要包括以下几种：

• data-ride 属性：取值 carousel，并且将其定义在 carousel 上。
• data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个 li 上。
• data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。
• data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to=”2”，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。
  基于上例，设置了自定义的 data 属性之后如下：

  <div id="slidershow" class="carousel" data-ride="carousel">
  <!-- 设置图片轮播的顺序 -->
      <ol class="carousel-indicators">
          <li class="active" data-target="#slidershow" data-slide-to="0"></li>
          <li data-target="#slidershow" data-slide-to="1"></li>
          <li data-target="#slidershow" data-slide-to="2"></li>
          <li data-target="#slidershow" data-slide-to="3"></li>
          <li data-target="#slidershow" data-slide-to="4"></li>
          <li data-target="#slidershow" data-slide-to="5"></li>
      </ol>
      <!-- 设置轮播图片 -->
      <div class="carousel-inner">
      …
      </div>
      <!-- 设置轮播图片控制器 -->
      <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
  </div>

在这里需要注意可以为 #slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感。

<div id="slidershow" class="carousel slide" data-ride="carousel">
  ...
</div>

除了data-ride=”carousel”、data-slide、data-slide-to 以外，轮播组件还支持其他三个自定义属性：

如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。

<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
   ......
</div>

上面三个属性可以在容器元素上定义，也可以在标示符（或左右控制链接）上定义，但是后者定义的优先级比较高。

JavaScript触发方法

默认情况之下，如果 carousel 容器上定义了 data-ride=”carousel” 属性，页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下：
$(".carousel").carousel();
也可以通过容器的 ID 来指定：
$("#slidershow").carousel();
在 carousel() 方法中可以设置具体的参数，如：

使用时，在初始化插件的时候可以传关相关的参数，如：

$("#slidershow").carousel({
       interval: 3000
});

实际上，当我们给carousel()方法配置参数之后，轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下：

.carousel("cycle")：从左向右循环播放；
.carousel("pause")：停止循环播放；
.carousel("number")：循环到指定的帧，下标从0开始，类似数组；
.carousel("prev")：返回到上一帧；
.carousel("next")：下一帧

例如，前面的调用方法，向前和向后两个按钮还无法正常工作，其实可以通过 .carousel(“prev”) 和 .carousel(“next”) 方法让他们能正常工作，代码如下：

$(function(){
    $("#slidershow").carousel({
        interval:2000
    });
    $("#slidershow a.left").click(function(){
        $(".carousel").carousel("prev");
    });
    $("#slidershow a.right").click(function(){
        $(".carousel").carousel("next");
    });
});

附加导航(固定定位)(Affix)

插件文件：源文件 affix.js
Affix 插件主要功能就是通过插件给某个元素（需要固定的元素）添加或删除 affix 类名，实现元素在浏览器窗口中固定（元素带有 affix 类名固定）和不固定（元素不带有 affix 类名）的效果。

Affix 效果常见的有以下三种：
☑ 顶部固定
☑ 侧边栏固定
☑ 底部固定

声明式触发Affix

Affix 插件可以对任何元素进行固定定位，其中比较简单的方法，就是通过自定义属性 data 来触发。其主要包括两个参数：
1、data-spy：取值 affix，表示元素固定不变的。
2、data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。

data-offset-top 用来设置元素距离顶部的距离。比如 90，表示元素距离顶部 90px，当用户从顶部向下拖动滚动条，当滚动的距离大于 90px 时，affix 元素不再滚动，就会固定在浏览器窗口顶部。
data-offset-bottom 刚好与 data-offset-top 相反。
具体使用如下：
<div data-spy="affix" data-offset="90">affix元素</div>
分开设置 data-offset 值方式：
<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
简单的示例：

<nav class="navbar navbar-default" role="navigation">
    …
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-3" id="sidebarMenu">
            <ul class="navnav-pills nav-stacked" data-spy="affix" data-offset-top="20">
                     …
            </ul>
        </div>
        <div class="col-md-9">
                …
        </div>
    </div>
</div>

注意，在 body 要声明滚动监控。
<body data-spy="scroll" data-target="sidebarMenu">
使用声明式，就算设置了 data-offset-top 的值也会失效，需要在样式中给 affix 设置一个top值，与 data-offset-top 值相等。data-offset-bottom一样。

通过JavaScript触发

您可以通过 JavaScript 手动为某个元素添加附加导航（Affix），如下所示：

$('#myAffix').affix({
   offset: {
      top: 100, bottom: function () {
         return (this.bottom = 
            $('.bs-footer').outerHeight(true))
         }
      }
})

自定义Bootstrap

使用 Bootstrap 框架的不方便：
很多时候在创建 Web 页面或应用的时，需要自己独立的 UI 界面效果，此时仅仅使用 Bootstrap 框架并不能满足我们自身 UI 的需求，也造成要写很多的样式代码来覆盖 Bootstrap 框架提供的样式代码。如此一来，这也失去使用 Bootstrap 框架的意义。

问题：要使用Bootstrap框架，而且还要让其出来的 UI 界面效果能和满足自己的UI设计效果。

解决方法：
在 Bootstrap 框架中提供多种方式来自定义 Bootstrap，让 Bootstrap 框架适合自己的需求。
自定义Bootstrap框架主要有两种方式来实现：
—— 使用 CSS 预处理器语言
—— 使用在线自定义设置

1.使用 CSS 预处理器语言
在学习 Bootstrap 框架的使用时，可以看到 Bootstrap 框架中很多组件的 UI 效果都有对应的 LESS 版本和 Sass 版本源码。其实需要自定义 Bootstrap 框架，完全可以在这些组件的 LESS 或 Sass 源码文件上进行修改，然后将修改好的源码重新编译出 bootstrap.css 文件，从而实现适合自己的 UI 界面风格。

使用 CSS 预处理器语言来重新定义 Bootstrap 框架有一个前提条件，那就是开发人员会使用 LESS 或 Sass 预处理器语言，否则要在此基础上实现 Bootstrap 框架自定义不是一件容易的事情。不过大家不用担心，就算你不懂 LESS 或 Sass 也不用怕，可以通过在线自定义设置来实现自定义 Bootstrap 框架。

2.使用在线自定义设置
在Bootstrap框架的官网为大家提供了一个在线自定义 Bootstrap 框架的配置页面 http://getbootstrap.com/customize/　，可以通过这里进行配置。

在线自定义设置主要包括三个部分：

• Bootstrap 组件
• Bootstrap 插件
• Bootstrap 的 LESS 版本变量设置
  我们只需要根据自己的需求设置完成之后，点击最底部的下载按钮就可以得到自定义后的 Bootstrap 框架。