按钮
通过按钮（Button）插件，可以添加一些交互，如下：
控制按钮状态，比如禁用状态、正在加载状态、正常状态等；
按钮切换状态
按钮模仿单选按钮
按钮模仿复选按钮
单个切换/加载状态
单个切换
使用data-toggle属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。
<button class="btn btn-primary" data-toggle="button" >单个切换</button>
加载状态
通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态。
如下，点击“加载”按钮，会触发按钮的加载的状态，1s 后重置按钮状态，文本内容恢复为最初的内容：
<button id="myButton" type="button" data-loading-text="Loading..."class="btn btn-primary"> 加载 </button>
<script>
$('#myButton').on('click', function() {
var btn = $(this).button('loading');
setTimeout(function() {
btn.button('reset');
}, 1000);
});
</script>
Button 插件中的 button 方法中有三个参数：
toggle：切换按压状态
reset：重置按钮状态
string：使用该方法，重置按钮状态，并添加新的内容(比如 loading、complete)
折叠
折叠（Collapse）插件：通过点击可以折叠内容
基本实例
以下实例通过自定义的 data-toggle 属性来触发折叠插件，其中 data-toggle 值设置为 collapse，data-target="#折叠区标识符"。除此之外，需确保向可折叠元素添加 .collapse 类。
<button class="btn btn-primary" data-toggle="collapse" data-target="#content"> w3cschool </button>
<div class="collapse" id="content">
<div class="well">
w3cschool.cn - 随时随地学编程！w3cschool主要为初学者技术的人员提供在线学习教程和日常技术资料查询服务。
</div>
</div>
如果希望折叠区在默认情况下是打开的，请添加 .in 类：
<div class="collapse in" id="content">
轮播
轮播插件就是将几张同等大小的图按照顺序依次播放。如下图所示：
上面的轮播效果是5张图从左向右播放，鼠标悬停在图片时会暂停播放，如果鼠标悬停或单击正下角圆点时，会显示对应的图片。
设计轮播图
一个轮播图片主要包括三个部分：
轮播的图片
轮播图片的计数器
轮播图片的控制器
实现轮播需以下几个步骤：
- 设计轮播图片的容器
添加 .carousel 类，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。
<div id="myCarousel" class="carousel slide"></div>
添加 .slide 类，使图片切换具有平滑感。
- 设计轮播图片计数器
在容器 div .carousel 的内部添加轮播图片计数器，使用 .carousel-indicators 类，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个 li )，一般采用有序列表来制作：
<div id="myCarousel" class="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
...
</ol>
轮播图片计数器，都是以圆点形式呈现
3. 设计轮播图片播放区
用来放置需要轮播图片的区域。该区域使用 .carousel-inner 类来控制，其同样放置在 carousel 容器内，且通过 item 容器来放置每张轮播的图片：
<div class="carousel-inner">
<div class="item active">
<img src="img/1.png" alt="第一张">
</div>
...
</div>
- 设计轮播图片控制器
控制器同样放在 carousel 容器内，在 Carousel 中通过 .carousel-control 类配合 left 和 right 来实现向前播放和向后播放：
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
left表示向前播放，right表示向后播放。
触发轮播图的播放
触发轮播图的播放方法有两种，一种是声明式，另外一种是 JavaScript 方式。
声明式
声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置。
其主要包括以下几种：
data-slide： 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；
data-slide-to：来向轮播底部创建一个原始滑动索引， data-slide-to="2"表示将把滑动块移动到一个特定的索引，索引从 0 开始计数。
data-ride="carousel" ：属性用户标记轮播在页面加载时开始动画播放。
JavaScript 触发方式
如果在 JavaScript 调用就直接使用键值对方法，并去掉 data- 。
设置自定义属性
$('#myCarousel').carousel({
interval : 2000, //秒轮播时间间隔为2秒
pause : 'hover', //设置暂停按钮的事件
wrap : false,//只播一次
});
方法和事件
方法
轮播插件还提供了一些方法，如下：
点击按钮执行：
$('button').on('click', function() { //点击后，自动播放
$('#myCarousel').carousel('cycle'); //其他雷同
});
事件
事件实例：
$('#myCarousel').on('slide.bs.carousel', function() {
alert('当调用 slide 实例方式时立即触发');
});
$('#myCarousel').on('slid.bs.carousel', function() {
alert('当轮播完成一个幻灯片触发');
});
附加导航
附加导航：粘贴在屏幕某处实现锚点功能。
Affix 效果常见的有以下三种：
顶部固定
侧边栏固定
底部固定
声明式触发附加导航（Affix）插件
Affix 插件可以对任何元素进行固定定位，其中比较简单的方法，就是通过自定义属性 data 来触发。其主要包括两个参数：
1、data-spy：取值 affix，表示元素固定不变的。
2、data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：
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>
注意：在 body 要声明滚动监控。
<body data-spy="scroll" data-target="#myScrollspy">
使用声明式，就算设置了 data-offset-top 的值也会失效，需要在样式中给 affix 设置一个top值，与 data-offset-top 值相等。
data-offset-bottom一样。
导航的 CSS 部分
ul.nav-pills {
width: 200px;
}
ul.nav-pills.affix {
top: 40px;
}
JavaScript 代替 data-spy="affix" data-offset-top="150"
$('#myAffix').affix({
offset : {
top : 150 }
})
我们默认使用的是 top，当然也可以默认居底 bottom。这个定位方式是直接通过 CSS定位的。
设置成 bottom
ul.nav-tabs.affix-bottom {
bottom: 30px;
}
通过 JavaScript 设置成 bottom
$('#myAffix').affix({
offset : {
bottom : 150 }
})
Affix 包含几个事件，如下：
事件实例（其他类似）：
$('#myAffix').on('affixed-top.bs.affix', function() {
alert('触发！');
});
