Bootstrap插件_data-toggle="collapse

模态框（Modal）

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

点击前

点击后

滚动监听

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

插件-工具提示

按钮

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

轮播图效果

<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>
1
2
3
4
5
6
7
8
9
10
11