Bootstrap 常用插件

幻灯片carousel 由三部分组成: 控制器(carousel-control) 内容部分(carousel-inner) 标识符(carousel-indicators)

    标识符(carousel-indicators)是一个列表 用来标识页码 例如

    <ul class="carousel-indicators">
        <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example" data-slide-to="1"></li>
        <li data-target="#carousel-example" data-slide-to="2"></li>
    </ul>

data-target用来指定要作用的幻灯片 data-slide-to用来标识页

内容部分(carousel-inner)负责展现的内容 例如

    <div class="carousel-inner">
        <div class="item active">
            <img src="images/11.jpg">
        </div>
        <div class="item">
            <img src="images/12.jpg">
        </div>
        <div class="item">
            <img src="images/13.jpg">
        </div>
    </div>

    控制器(carousel-control)控制幻灯片的翻页

    <a class="left carousel-control" href="#carousel-example" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

    .left指明向左翻页 .right指明向右翻页

    .glyphicon .glyphicon-chevron-left .glyphicon-chevron-right 是Bootstrap内置的图标

    最后将标识符 内容部分和控制器放在类carousel里面 就可以了

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

 data-ride="carousel"指定自动轮播


折叠 用于内容的展开/收起 类似于标签页 不同之处在于标题上下排列 还可以同时展开多个项目内容

折叠要放在类.panel里面,用.panel-default指定默认格式
.panel-heading是折叠的头部 里面包含折叠的标题 .panel-title
折叠的标题里面有一个链接<a> 连接到折叠内容 用.data-toggle指明触发类型
.panel-body为折叠内容 他要被.panel-collpse collapse包裹 包裹层同样指定内容的id 例如

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#collapseOne" data-toggle="collapse">折叠标题部分1</a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            折叠内容1
        </div>
    </div>
</div>

而更经常用到的是折叠组 只需要把多个折叠包裹在.panel-group中 并在最外层指定id 然后在折叠头部的链接指定.data-parent

标签页与折叠类似 但同时只能显示一页的内容 并且是左右排列

标签页的头部本质是无序列表 在其基础上加上.nav .nav-tabs的修饰

然后每个<li>元素的href与内容部分对应 还要加上data-toggle="tab"触发器 例如

<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">首页</a> </li>
    <li><a href="#profile"  data-toggle="tab">概述</a> </li>
    <li><a href="#messages" data-toggle="tab">信息</a> </li>
    <li><a href="#settings" data-toggle="tab">设置</a> </li>
</ul>

内容需要包裹在类.tab-content 然后每项要在类.tab-pane中 并同时指定id 例如

<div class="tab-content">
    <div class="tab-pane active" id="home">
        <h3>欢迎来到Bootstrap3</h3>
    </div>
...

 模态对话框让用户完成当前交互内容才可以离开当前窗口

模态对话框有三层包裹 第一层.modal模态 二层.modal-dialog对话框 三层.modal-content内容

内容里面又分三层.modal-header头部 .modal-body主体 .modal-footer尾部

头部里面一般包括.modal-title标题 和关闭按钮  主体里面就是要显示的内容 尾部里面一般包括几个按钮.data-dismiss让目标消失 例如

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="myModalLabel">对话框标题</h4>
            </div>
            <div class="modal-body">模态对话框示例</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>  <!--modal-content-->
    </div>  <!--modal-dialog-->
</div>  <!--modal-->

这里可以通过一个按钮触发模态 用data-toggle="modal"触发器 用data-target指定作用目标 例如

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击触发模态窗口</button>

工具提示条就是鼠标悬停在上面时会在旁边出现提示信息 实现简单

使用 data-toggle="tooltip"这个触发器 data-placement指定显示位置 用title指定显示内容 例如

<a href="#" data-toggle="tooltip" data-placement="right" title="在右侧显示提示内容" class="btn btn-primary">工具提示</a>

弹出框与工具提示条类似 工具提示条是通过鼠标悬停 而弹出框是通过点击

使用data-toggle="popover"触发器 title指定显示标题 data-content指定显示框内容

href=”javascript:void(0);”意为让超链接去执行一个js函数，void(0)表示一个空的方法 例如

<a href="javascript:void(0);" class="btn btn-lg btn-danger" data-toggle="popover"
   title="弹出框框的应用"data-content="采用了点击事件触发 相比tooltip可以显示更多，更正式的内容 并且可以配置更多样式">点击了解更多...</a>

按钮Loading实现 当按钮被点击出现loading字样 通过js代码实现

用data-loading-text指定loading时的字样 然后通过js代码实现点击效果

<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">提交</button>

<script>
    $('#loading-example-btn').click(function () {
        const btn = $(this);
        btn.button('loading')
    });
</script>