三：Bootstrap-js插件

模式框:

<button class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">

</button>

div.modal fade

	div.modal-dialog

		div.modal-content

			div.modal-header

			div.model-body

			div.model-footer

模式框关闭:

<button class="btn btn-default" data-dismiss='modal'>Cancel</button>

下拉菜单：

<div class="dropdown">

	<a data-toggle="dropdown" href="#">Dropdown trigger</a>

	<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

	...

	</ul>

</div>

标签页:

<ul class="nav nav-tabs">

	<li><a href="#home" data-toggle="tab">Home</a></li>

	<li><a href="#profile" data-toggle="tab">Profile</a></li>

	<li><a href="#messages" data-toggle="tab">Messages</a></li>

	<li><a href="#settings" data-toggle="tab">Settings</a></li>

</ul>

<div class="tab-content">

	<div class="tab-pane active" id="home">...</div>

	<div class="tab-pane" id="profile">...</div>

	<div class="tab-pane" id="messages">...</div>

	<div class="tab-pane" id="settings">...</div>

</div>

工具提示:

<div class=”tooltip-demo”>

	<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

</div>

弹出框:

<a data-content="And here's some amazing content. It's very engaging.

right?"  title="A  Title"  data-toggle="popover"  class="btn  btn-lg

btn-danger" href="#">Click to toggle popover</a>

警告框:

<div class="alert alert-warning fade in">

	<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>

	<strong>Holy guacamole!</strong> Best check yo self, you're

	not looking too good.

</div>

按钮:

<div class="btn-group" data-toggle="buttons">

	<label class="btn btn-primary">

		<input type="checkbox"> Option 1

	</label>

	<label class="btn btn-primary">

		<input type="checkbox"> Option 2

	</label>

	<label class="btn btn-primary">

		<input type="checkbox"> Option 3

	</label>

</div>

折叠:

<div class="panel-group" id="accordion">

	<div class="panel panel-default">

		<div class="panel-heading">

			<h4 class="panel-title">

				<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1</a>

			</h4>

		</div>

		<div id="collapseOne" class="panel-collapse collapse in">

			<div class="panel-body">

				Anim pariatur cliche reprehenderit

			</div>

		</div>

	</div>

</div>

轮播:

<div  id="carousel-example-generic" class="carousel  slide" data-ride="carousel">

	<ol class="carousel-indicators">

		<li  data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

		<li data-target="#carousel-example-generic" data-slide-to="1"></li>

		<li data-target="#carousel-example-generic" data-slide-to="2"></li>

	</ol>

	<div class="carousel-inner">

		<div class="item active">

			<img src="..." alt="...">

			<div class="carousel-caption">

			...

			</div>

		</div>

	...

	</div>

	<a  class="left  carousel-control"  href="#carousel-example-generic" data-slide="prev">

		<span class="glyphicon glyphicon-chevron-left"></span>

	</a>

	<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

		<span class="glyphicon glyphicon-chevron-right"></span>

	</a>

</div>