Bootstrap插件

模态框（Modal）

理解
通俗的说就是在父窗体上弹出的一个子窗体。
注意：因为 Bootstrap.js 需要依赖 jquery 所以需要引入 jquery.js 文件
不支持同时打开多个模态框
尽量作为 body 标签的直接子元素，以避免其他组件影响模态框的展现和/或功能

类名	定义
.modal	用来把 < div> 的内容识别为模态框
fade	当模态框被切换时，它会引起内容淡入淡出
aria-labelledby=“myModalLabel”	该属性引用模态框的标题
aria-hidden=“true”	用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）
modal-header	模态窗口的头部定义样式的类
close	模态窗口的关闭按钮设置样式
data-dismiss=“modal”	它被用于关闭模态窗口
modal-body	模态窗口的主体设置样式
modal-footer	模态窗口的底部设置样式
data-toggle=“modal”	data-toggle 用于打开模态窗口，一般绑定在按钮上
modal-dialog modal-lg	调整模态框大小
data-toggle=“dropdown”

点击前

点击后

滚动监听

无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。大多数时候是监听 < body> 元素。

插件-工具提示

类名	定义
data-placement=“bottom”	提示内容的位置
data-toggle=“tooltip”	定义为带有提示信息
data-toggle=“popover”	弹出/隐藏弹出框
data-content=“”	弹出框内容
title=""	弹出内容的头
data-trigger=“focus”	失焦时弹框消失，必须使用 < a> 标签，不能使用 < button> 标签，并且，还必须包含 role=“button” 和 tabindex 属性。
data-toggle=“collapse”	定义为折叠菜单按钮
class=“collapse”	弹出的内容

按钮

类名	定义
data-toggle=“collapse”	定义为折叠菜单按钮
class=“collapse”	包裹着弹出的内容
data-target=	锚点

例子：
点击按钮，弹出内容

<div class="container">
			<a href="#Mytarget" data-toggle="collapse">展开和收起</a>
			<button data-toggle="collapse" data-target="#Mytarget">展开/收起</button>

			<div class="collapse" id="Mytarget">
				<div class="well">
					<p>HTML是承载内容</p>
					<p>css是承载样式</p>
					<p>JavaScript是网页交互</p>
				</div>
			</div>
		</div>

面板组件+收放插件 = 手风琴

类名	定义
panel	定义为面板，基类
panel-success	面板颜色
panel-group	面板组件容器
panel-heading	面板头部
data-parent="	锚点
data-toggle=“collapse”	定义为折叠菜单按钮
in	展开
panel-collapse	收缩面板
panel-body	展开面板的内容

<h3 class="container">手风琴=收放插件+面板组件</h3>
		<div class="container">
			<div class="panel-group" id="sfq">
				<div class="panel panel-success">
					<div class="panel-heading">
						<a href="#xyj" data-toggle="collapse" data-parent="#sfq">西游记</a>
					</div>
					<div id="xyj" class="collapse in panel-collapse">
						<div class="panel-body">猪八戒+孙悟空</div>
					</div>
				</div>
				<div class="panel panel-success">
					<div class="panel-heading">
					 	<a href="#sgyy" data-toggle="collapse" data-parent="#sfq">三国演义</a>
					</div>
					<div id="sgyy" class="collapse panel-collapse">
						<div class="panel-body">
							曹操<br>
							刘备<br>
							孙权
						</div>
					</div>
				</div>
			</div>
		</div>

轮播图效果

carousel	定义为 轮播
slide	动画轮播
data-ride=“carousel”
data-interval=“100”	轮播的间隔时间
carousel-inner	轮播内容
item	轮播内容中的子项目
active

<div class="container">
			<h3>最基本的轮播图</h3>
			<div class="carousel slide" data-ride="carousel" data-interval="100">
				<div class="carousel-inner">
					<div class="item active"><img src="images/1.jpg" alt=""></div>
					<div class="item"><img src="images/2.jpg" alt=""></div>
					<div class="item"><img src="images/3.jpg" alt=""></div>
					<div class="item"><img src="images/4.jpg" alt=""></div>
				</div>
			</div>
		</div>