幻灯片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>