三：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>