关于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>