幻灯片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">×</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>