模式框:

<button class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">
</button>
div.modal fadediv.modal-dialogdiv.modal-contentdiv.modal-headerdiv.model-bodydiv.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'renot 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>