Bootstrap--组件
1.插件——概述
Bootstrap基于jQuery提供了十几个插件函数（类似于jQueryUI插件库），每个插件对应一个.js文件，可以单独引用，也可以整体引用(bootstrap.js)。
调用上述十几个插件可以用两种格式：
(1)传统的JS方式调用： $(...).dropdown(); $().tab(...);
(2)使用data-*扩展属性方式调用： <a data-toggle="dropdown">
2.插件——下拉菜单
(1)$().dropdown( );
(2)<a data-toggle="dropdown">
3.插件——标签页(tab)
(1) $().tab();
(2) <a data-toggle="tab">
4.插件——Bootstrap提供的弹出框
(1)工具提示框(tooltip) data-toggle="tooltip"
(2)弹出框(popover) data-toggle="popover"
(3)警告框(alert) —— 小重点
<div class="alert alert-四种颜色 alert-dismissible">
<span class="close" data-dismiss="alert">×</span>
xxxx
</div>
(4)模态对话框(modal) —— 小重点
模态框定义：在父窗体中弹出一个子窗体，子窗体若不关闭，父窗体就无法获得焦点，同时父子窗体间还可以传递数据。window.alert()/confirm()/prompt()就是典型例子。模态框必需的结构：
<div class="modal"> <!--半透明的黑色遮罩层-->
<div class="modal-dialog"> <!--宽/定位-->
<div class="modal-content"> <!--边框/背景色/阴影-->
<div class="modal-header">头部</div>
<div class="modal-body">主体</div>
<div class="modal-footer">尾部</div>
</div>
</div>
</div>
显示一个模态框：
1) <a href="#模态框ID" data-toggle="modal">
2) <button data-toggle="modal" data-target="#模态框ID">
5.插件——折叠效果(collapse)
触发一个折叠效果：
1) <a href="#折叠元素ID" data-toggle="collapse">
2) <button data-toggle="collapse" data-target="#折叠元素ID">
------------------------------------------------------------------------------
<div id="折叠元素ID" class="collapse in">
</div>
折叠组件的两个扩展用途：
(1)Accordion（手风琴）
(2)响应式导航条在手机屏幕中的效果
6.插件——轮播广告(carousel)——小重点
本身结构较复杂，编写时只需要记住根class: .carousel
<div class="carousel">
<div class="carousel-inner">
<div class="item active">
<img>
</div>
</div>
</div>
7.插件——附加导航（Affix）
<div data-spy="affix" data-offset-top="100">
<ul class="nav nav-pills">
</div>
9.插件——滚动监听（scrollspy）——了解
随着页面内容的滚动，某个导航中的项目，会自动的更改.active位置。
实现思路：
(1)页面中必须首先有一个导航菜单(.nav)——其中可以定义一个菜单项为.active
(2)导航菜单中的超链接的href属性值必须和页面中的某个锚点名一样
(3)为页面添加滚动事件的监听函数
body.onscroll= function(){
if(body滚动的距离 === 某个锚点距离顶端的距离){
此锚点对应的超链接的父元素li添加.active；
}
}
