[TOC]
0x00 BS 布局组件 1.字体图标(Glyphicons) 什么是字体图标？
在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件 (相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上 )：
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
字体图标列表:https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm https://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
weiyigeek.top-
glyphicon 的 CSS 规则构成:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 @font-face { font-family : 'Glyphicons Halflings' ; src : url ('../fonts/glyphicons-halflings-regular.eot' ); src : url ('../fonts/glyphicons-halflings-regular.eot?#iefix' ) format ('embedded-opentype' ), url ('../fonts/glyphicons-halflings-regular.woff' ) format ('woff' ), url ('../fonts/glyphicons-halflings-regular.ttf' ) format ('truetype' ), url ('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular' ) format ('svg' ); } .glyphicon { position : relative; top : 1px ; display : inline-block; font-family : 'Glyphicons Halflings' ; font-style : normal; font-weight : normal; line-height : 1 ; -webkit-font-smoothing : antialiased; -moz-osx-font-smoothing : grayscale; } .glyphicon :empty { width : 1em ; } .glyphicon-keyword :before { content : "hexvalue" ; } .glyphicon-user :before { content : "\e008" ; }
我们可以直接采用 span 标签 加上 字体类即可，例如 <span class="glyphicon glyphicon-asterisk" style="color: rgb(50, 54, 170); text-shadow: rgb(0, 0, 0) 1px 1px 1px;"> Asterik</span>, 当然我们也可以进行自定义大小以及图标演示何阴影效果；
基础示例:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 <div class ="container" > <p > 使用字体图-并且利用button按钮进行设置图标大小</p > <div class ="row" > <div class ="col-md-3" > <input type ="search" name ="search" id ="input" class ="form-control" value ="" required ="required" title ="" placeholder ="请输入搜索信息" > </div > <button class ="btn" > <span class ="glyphicon glyphicon-search" > </span > </button > </div > <br > <button type ="button" class ="btn btn-default btn-lg" > <span class ="glyphicon glyphicon-user" > </span > User </button > <button type ="button" class ="btn btn-default btn-sm" > <span class ="glyphicon glyphicon-user" > </span > User </button > <button type ="button" class ="btn btn-default btn-xs" > <span class ="glyphicon glyphicon-user" > </span > User </button > <hr > <p > 定制字体图标</p > <p > 定制字体尺寸/颜色/文本阴影</p > <button type ="button" class ="btn btn-primary btn-lg" > <span class ="glyphicon glyphicon-user" > </span > User </button > <button type ="button" class ="btn btn-primary btn-lg" style ="color: rgb(248, 104, 21);" > <span class ="glyphicon glyphicon-user" > </span > User </button > <button class ="btn btn-warning btn-lg" type ="button" > <span class ="glyphicon glyphicon-user" style ="color: rgb(255,255,255); text-shadow: rgb(0, 0, 0) 1px 1px px;" > </span > <span > User</span > </button > <hr > <hr > <p > 带有字体图标的导航栏</p > <nav class ="navbar navbar-inverse" role ="navigation" > <div class ="navbar-header" > <button type ="button" class ="navbar-toggle" data-toggle ="collapse" data-target =".navbar-collapse" > <span class ="sr-only" > Toggle navigation</span > <span class ="icon-bar" > </span > <span class ="icon-bar" > </span > <span class ="icon-bar" > </span > </button > <a class ="navbar-brand" href ="#" > Project name</a > </div > <div class ="collapse navbar-collapse" > <ul class ="nav navbar-nav" > <li class ="active" > <a href ="#" > <span class ="glyphicon glyphicon-home" > </span > Home</a > </li > <li > <a href ="#shop" > <span class ="glyphicon glyphicon-shopping-cart" > </span > Shop</a > </li > <li > <a href ="#support" > <span class ="glyphicon glyphicon-headphones" > </span > Support <span class ="caret" > </span > </a > </li > </ul > </div > </nav > </div >
weiyigeek.top-
注意事项:由于字体图标样式太多这里不一一进行显示，直接点击上面的网址生成即可；
2.导航栏 描述:一个网站基本都有一个导航栏，所以BS也为我们提供这个组件，并且还可以设置下拉菜单是可切换的，是以列表格式显示链接的上下文菜单；
下拉菜单 1 2 3 4 5 6 7 8 #Bootstrap .class 样式解释.dropdown 指定下拉菜单都包裹在div 标签或者ul 标签下.dropup 指定向上弹出的下拉菜单.dropdown-menu 创建下拉菜单.dropdown-menu-right 下拉菜单右对齐.dropdown-header 向下拉菜单的标签区域添加标题提示.disabled 下拉菜单中的禁用项.divider 下拉菜单中的分割线
基础示例：1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <div class ="container" > <hr > <p > 下拉菜单</p > <div class ="dropdown" > <button type ="button" class ="btn btn-primary dropdown-toggle" id ="menu" data-toggle ="dropdown" > 下拉菜单 <span class ="caret" > </span > </button > <ul class ="dropdown-menu" role ="menubar" aria-labelledby ="menu" > <li role ="presentation" class ="dropdown-header" > 分类1</li > <li role ="presentation" > <a href ="#" role ="menuitem" > HTML</a > </li > <li role ="presentation" > <a href ="#" role ="menuitem" > CSS</a > </li > <li role ="presentation" > <a href ="#" role ="menuitem" > JavaScript</a > </li > <li role ="presentation" > <a href ="#" role ="menuitem" > jQuery</a > </li > <li role ="presentation" > <a href ="#" role ="menuitem" > Bootstrap</a > </li > <li class ="divider" > </li > <li role ="presentation" class ="dropdown-header" > 分类2</li > <li role ="presentation" > <a href ="#" role ="menuitem" > PHP</a > </li > <li role ="presentation" > <a href ="#" role ="menuitem" > C</a > </li > <li role ="presentation" class ="disabled" > <a href ="#" role ="menuitem" > C++</a > </li > <li role ="presentation" class ="disabled" > <a href ="#" role ="menuitem" > Java</a > </li > </ul > </div > </div >
weiyigeek.top-
补充知识点:1 2 3 aria-label aria-labelledby
按钮下拉菜单
基础示例:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <p > 按钮下拉分离</p > <div class ="btn-group" > <button type ="button" class ="btn btn-primary btn-lg btn-toggle" > 下拉分离</button > <button type ="button" class ="btn btn-primary btn-lg btn-toggle active" data-toggle ="dropdown" > <span class ="caret" > </span > </button > <span class ="sr-only" > 切换下拉菜单</span > <ul class ="dropdown-menu" role ="menubar" > <li class ="dropdown-header" > 分类</li > <li > <a href ="#" role ="menuitem" > 功能</a > </li > <li > <a href ="#" role ="menuitem" > 选择</a > </li > <li > <a href ="#" role ="menuitem" > 选项</a > </li > <li class ="divider" > </li > <li class ="dropdown-header" > 分类</li > <li > <a href ="#" role ="menuitem" > 案例</a > </li > <li > <a href ="#" role ="menuitem" > 安全</a > </li > <li class ="disabled" > <a href ="#" role ="menuitem" > 禁用</a > </li > </ul > </div >
weiyigeek.top-
导航元素 .dropdown-menu class的无序列表。1 2 3 4 5 6 7 8 9 10 11 12 13 .nav .nav-tabs .nav-pills .nav-stacked .nav-justified .disabled .tab-content .tab-pane .fade .in .active
基础示例:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <p > 导航菜单动态</p > <ul class ="nav nav-pills nav-justified" > <li class ="active" > <a data-toggle ="tab" href ="#home" > <span class ="glyphicon glyphicon-home" > </span > 首页</a > </li > <li > <a data-toggle ="tab" href ="#user" > <span class ="glyphicon glyphicon-user" > </span > 用户中心</a > </li > <li > <a data-toggle ="tab" href ="#email" > <span class ="glyphicon glyphicon-envelope" > </span > 用户邮箱</a > </li > <li class ="dropdown" > <a class ="dropdown-toggle" data-toggle ="dropdown" href ="#" > <span class ="glyphicon glyphicon-bookmark" > </span > 书签 <span class ="caret" > </span > </a > <ul class ="dropdown-menu pull-right" role ="menubar" > <li class ="dropdown-header" > 分类书签</li > <li class ="active" > <a href ="#home" role ="menuitem" tabindex ="-1" > 首页</a > </li > <li > <a href ="#user" data-toggle ="tab" role ="menuitem" tabindex ="-1" > 用户中心</a > </li > <li class ="disabled" > <a href ="#email" role ="menuitem" tabindex ="-1" > 邮箱</a > </li > </ul > </li > </ul > <div class ="tab-content" > <div id ="home" class ="tab-pane fade in active" > <h3 > 首页</h3 > <p > 学的不仅是技术，更是梦想！！！</p > </div > <div id ="user" class ="tab-pane fade" > <h3 > 用户中心</h3 > <p > 这用户中心显示的内容。</p > </div > <div id ="email" class ="tab-pane fade" > <h3 > 用户邮箱</h3 > <p > 这是用户邮箱显示的内容。</p > </div > </div >
weiyigeek.top-
导航栏
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 .navbar .navbar-default .navbar-inverse .navbar-fixed-top .navbar-fixed-bottom .navbar-static-top .navbar-header .navbar-brand .collapse .navbar-collapse .nav .navbar-nav .navbar-text .navbar-form .navbar-right .navbar-btn
基础示例:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 <nav class ="navbar navbar-inverse navbar-static-top" role ="navigation" > <div class ="contaniner-fluid" > <div class ="navbar-header" > <button type ="button" class ="navbar-toggle" data-toggle ="collapse" data-target =".navbar-ex1-collapse" > <span class ="sr-only" > 切换导航</span > <span class ="icon-bar" > </span > <span class ="icon-bar" > </span > <span class ="icon-bar" > </span > </button > <a class ="navbar-brand" href ="#" > 极客Geek</a > <p class ="navbar-text" > 导航栏文本</p > </div > </div > <div class ="collapse navbar-collapse navbar-ex1-collapse" > <ul class ="nav navbar-nav" > <li class ="active" > <a href ="#" > 导航1</a > </li > <li > <a href ="#" > 导航2</a > </li > <li class ="dropdown" > <a href ="#support" class ="dropdown-toggle" data-toggle ="dropdown" role ="button" > <span class ="glyphicon glyphicon-headphones" > </span > 导航三 <span class ="caret" > </span > </a > <ul class ="dropdown-menu pull-left" role ="menu" > <li class ="text-left" > <a href ="#" tabindex ="-1" > 网络安全设备</a > </li > <li class ="text-center" > <a href ="#" > 网络通信设备</a > </li > <li class ="text-right" > <a href ="#" > 物联网设备</a > </li > <li class ="divider" > </li > <li class ="dropdown-header" > 云计算</li > <li > <a href ="#" > 云计算可信设备</a > </li > <li class ="divider" > </li > <li class ="dropdown-header" > 虚拟化</li > <li class ="disable" > <a href ="#" > 虚拟化数据存储设备</a > </li > </ul > </li > </ul > <ul class ="nav navbar-nav navbar-right" > <li > <a href ="#" > 导航4</a > </li > <li class ="dropdown" > <a href ="#" class ="dropdown-toggle" data-toggle ="dropdown" > 下拉菜单 <b class ="caret" > </b > </a > <ul class ="dropdown-menu" > <li > <a href ="#" > 导航链接</a > </li > <li > <a href ="#" > 导航链接</a > </li > </ul > </li > </ul > <form class ="navbar-form navbar-left" role ="search" action ="search.php" method ="POST" > <div class ="form-group" > <input type ="search" class ="form-control" placeholder ="Search" > </div > <button type ="submit" class ="btn btn-primary" > Submit</button > </form > <button type ="button" class ="btn btn-warning navbar-btn navbar-left" > navbar-btn</button > </div > </nav >
weiyigeek.top-
注意事项:
.navbar-btn 可被使用在<a> 和 <input>元素上, 不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，因为它不是标准的 button class。
面包屑导航（Breadcrumbs） 1 2 3 4 5 6 7 8 .breadcrumb .breadcrumb > li + li :before { color : #CCCCCC ; content : "/ " ; padding : 0 5px ; }
weiyigeek.top-
基础示例:1 2 3 4 5 <ul class ="breadcrumb" > <li > <a href ="#" > Home</a > </li > <li > <a href ="#" > 2013</a > </li > <li class ="active" > 十一月</li > </ul >
weiyigeek.top-
徽章（Badges） <span class="badge"> 到链接、Bootstrap 导航等这些元素上即可。
注意事项:当没有新的或未读的项时，通过 CSS 的 :empty 选择器，徽章会折叠起来，表示里边没有内容。
基础示例:1 2 3 4 5 6 7 8 9 10 <p > Bootstrap 徽章（Badges）</p > <span > 示例1:</span > <a href ="#" > 收件箱 <span class ="badge" > 50</span > </a > <br > <p > 示例2:</p > <ul class ="nav nav-pills nav-stacked" style ="max-width: 160px;" > <li class ="active" > <a href ="#" > <span class ="glyphicon glyphicon-home" > </span > 首页 <span class ="badge" > 180</span > </a > </li > <li class ="active" > <a href ="#" > <span class ="glyphicon glyphicon-user" > </span > 用户中心</a > </li > <li class ="active" > <a href ="#" > <span class ="glyphicon glyphicon-envelope" > </span > 邮箱信息 <span class ="badge" > 20</span > </a > </li > </ul >
weiyigeek.top-
列表组（list-group）
Class类说明:1 2 3 4 5 6 .list-group .list-group-item .list-group-item-heading .list-group-item-text .list-group-horizontal .active
基础示例:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 <style > .list-group-horizontal .list-group-item { display: inline-block; } .list-group-horizontal .list-group-item { margin-bottom: 0; margin-left :-4px ; margin-right: 0; } .list-group-horizontal .list-group-item :first-child { border-top-right-radius :0 ; border-bottom-left-radius :4px ; } .list-group-horizontal .list-group-item :last-child { border-top-right-radius :4px ; border-bottom-left-radius :0 ; } </style > <ul class ="list-group" > <li class ="list-group-item" > li标签列表组项示例1</li > <li class ="list-group-item" > li标签列表组项示例1</li > <li class ="list-group-item" > 我的信息<span class ="badge" > 新</span > </li > <li class ="list-group-item" > 我的邮箱<span class ="badge" > 123</span > </li > <a href ="#" class ="list-group-item active" > a标签实现列表组项</a > </ul > <br > <div class ="list-group" > <a href ="#" class ="list-group-item active" > <h4 class ="list-group-item-heading" > 入门网站包 </h4 > </a > <a href ="#" class ="list-group-item" > <h4 class ="list-group-item-heading" > 免费域名注册 </h4 > <p class ="list-group-item-text" > 您将通过网页进行免费域名注册。 </p > </a > <a href ="#" class ="list-group-item" > <h4 class ="list-group-item-heading" > 24*7 支持 </h4 > <p class ="list-group-item-text" > 我们提供 24*7 支持。 </p > </a > </div > <br > <div class ="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center" > <div class ="list-group list-group-horizontal" > <a href ="#" class ="list-group-item" > Google</a > <a href ="#" class ="list-group-item active" > Runoob</a > <a href ="#" class ="list-group-item" > Taobao</a > <a href ="#" class ="list-group-item" > Github</a > </div > </div >
weiyigeek.top-
3.分页 描述:分页(Pagination) 是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。
分页的Class1 2 3 4 5 6 7 8 9 10 11 12 13 .pagination .pagination-lg .pagination-sm .pager .previous .next .disabled .active
基础示例:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <div class ="container" > <div class ="page-header" > <h1 > 文档标题<small > 子内容显示</small > </h1 > </div > <p > 分页</p > <ul class ="pagination pagination-lg" > <li > <a href ="#" > «</a > </li > <li class ="active" > <a href ="#" > 1</a > </li > <li > <a href ="#" > 2</a > </li > <li > <a href ="#" > 3</a > </li > <li > <a href ="#" > 4</a > </li > <li class ="disabled" > <a href ="#" > 5</a > </li > <li > <a href ="#" > 6</a > </li > <li > <a href ="#" > 7</a > </li > <li > <a href ="#" > 8</a > </li > <li > <a href ="#" > 9</a > </li > <li > <a href ="#" > »</a > </li > </ul > <br > <p > 翻页</p > <ul class ="pager pager-lg" > <li class ="previous" > <a href ="" > ← Previous</a > </li > <li class ="next" > <a href ="" > Next →</a > </li > </ul > </div >
weiyigeek.top-
4.标签(Label) 描述:标签可用于计数、提示或页面上其他的标记显示1 2 3 4 5 6 7 .label .label label-default .label label-primary .label label-success .label label-info .label label-warning .label label-danger
基础示例:1 2 3 4 5 6 7 8 <p > Boostrap 标签案例</p > <h3 > 常规标签: <span class ="label label-default" > BS标签</span > </h3 > <span class ="label label-default" > 默认标签</span > <span class ="label label-primary" > 主要标签</span > <span class ="label label-success" > 成功标签</span > <span class ="label label-info" > 信息标签</span > <span class ="label label-warning" > 警告标签</span > <span class ="label label-danger" > 危险标签</span >
weiyigeek.top-
5.提示与进度条 描述:警告（Alerts）向用户提供了一种定义消息样式的方式,它们为典型的用户操作提供了上下文信息反馈。
BS的类说明:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .alert .alert-success、.alert-info、.alert-warning、.alert-danger .alert-dismissable .alert-link .alert() .alert('close' ) close.bs.alert $('#myalert' ).bind ('close.bs.alert' , function // 执行一些动作... }) closed.bs.alert $('#myalert' ).bind ('closed.bs.alert' , function // 执行一些动作... })
基础示例:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <div class ="container" > <div class ="page-header" > <h1 > Bootstrap 实例 - <small > 警告（Alerts）</small > </h1 > </div > <p class ="help-block" > 可取消的警告（Dismissal Alerts）</p > <p > 方式1：创建一个内联的可取消的警告框</p > <div class ="alert alert-success" > 成功！很好地完成了提交。<a href ="#" name ="closealert" > <span style ="padding-top: 2px;" class ="glyphicon glyphicon-remove pull-right" > </span > </a > </div > <div class ="alert alert-info" > 信息！请注意这个信息。<a href ="#" name ="closealert" > <span style ="padding-top: 2px;" class ="glyphicon glyphicon-remove pull-right" > </span > </a > </div > <p > 方式2：</p > <div class ="alert alert-success alert-dismissable" > <button type ="button" class ="close" data-dismiss ="alert" aria-hidden ="true" > × </button > 成功！很好地完成了提交。 </div > <div class ="alert alert-info alert-dismissable" > <button type ="button" class ="close" data-dismiss ="alert" aria-hidden ="true" > ×</button > 信息！请注意这个信息。 </div > <div class ="alert alert-danger alert-dismissable" > <a href ="#" class ="alert-link" > 错误！请进行一些更改</a > <button type ="button" class ="close" data-dismiss ="alert" aria-hidden ="true" > ×</button > </div > <p > 方式3:</p > <div id ="myAlert" class ="alert alert-warning" > <a href ="#" class ="close" data-dismiss ="alert" > ×</a > <strong > 警告！</strong > 您的网络连接有问题。 </div > <p > 方式4:插件触发事件</p > <div id ="myAlert1" class ="alert alert-info" > <a href ="#" class ="close" data-dismiss ="alert" > ×</a > 信息！请注意这个信息。 </div > </div > <script > $(function ( $("a[name='closealert']" ).click(function ( $(this ).parent().slideUp(200 ); }); $(".close" ).click(function ( $("#myAlert" ).alert(); $("#myAlert" ).alert('close' ); }); $("#myAlert1" ).bind('closed.bs.alert' , function ( alert('特性完成已经关闭' ) }); }); </script >
weiyigeek.top-
进度条(progress) : 创建加载、重定向或动作状态的进度条。
Class类:1 2 3 4 5 6 .progress .progress-striped .active .progress-bar .progress-bar-*
基础示例:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <p > 各类进度条</p > <div class ="progress progress-striped" > <div class ="progress-bar progress-bar-success" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0" aria-valuemax ="100" style ="width: 60%;" > <span class ="sr-only" > 90% 完成（成功）</span > </div > </div > <div class ="progress progress-striped active" > <div class ="progress-bar progress-bar-danger" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0" aria-valuemax ="100" style ="width: 60%;" > <span class ="sr-only" > 90% 完成（成功）</span > </div > </div > <p > 堆叠的进度条</p > <div class ="progress progress-striped active" > <div class ="progress-bar progress-bar-success" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0" aria-valuemax ="100" style ="width: 40%;" > <span class ="sr-only" > 40% 完成</span > </div > <div class ="progress-bar progress-bar-info" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0" aria-valuemax ="100" style ="width: 30%;" > <span class ="sr-only" > 30% 完成（信息）</span > </div > <div class ="progress-bar progress-bar-warning" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0" aria-valuemax ="100" style ="width: 20%;" > <span class ="sr-only" > 20% 完成（警告）</span > </div > </div > <p > 增长的进度条示例</p > <div class ="progress progress-striped active" > <span id ="progress" class ="pull-right pull-fluid" > 0%</span > <div id ="progress-bar" class ="progress-bar progress-bar-success" role ="progressbar" aria-valuenow ="0" aria-valuemin ="0" aria-valuemax ="100" style ="width: 0%;" > </div > </div > <button type ="button" class ="btn btn-primary" id ="start" > 开始</button >
weiyigeek.top-
描述:多媒体对象（Media Object）可以用更少的代码来实现媒体对象与文字的混排。
如：图像、视频、音频等。 多媒体对象的样式可用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。
Class类说明:1 2 3 4 5 6 7 8 9 10 .media .media-object .media-body .media-heading .media-left .media-right .media-top .media-middle .media-bottom
基础示例:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 <div class ="container" > <p > 媒体组示例:</p > <div class ="media" > <div class ="media-left" > <img src ="https://static.runoob.com/images/mix/img_avatar.png" class ="media-object" style ="width:45px" > </div > <div class ="media-body" > <h4 class ="media-heading" > 左对齐<small > Love</small > </h4 > <p > 这是一个示例文本，这是一个示例文本，这是一个示例文本</p > <div class ="media" > <div class ="media-left" > <img src ="https://static.runoob.com/images/mix/img_avatar.png" class ="media-object" style ="width:45px" > </div > <div class ="media-body" > <h4 class ="media-heading" > 内嵌对象<small > <i > Posted on February 21, 2016</i > </small > </h4 > <p > 这是一些示例文本。这是一些示例文本。这是一些示例文本。</p > </div > </div > </div > </div > <div class ="media" > <div class ="media-body" > <h4 class ="media-heading" > 右对齐<small > Love</small > </h4 > <p > 这是一个示例文本，这是一个示例文本，这是一个示例文本</p > </div > <div class ="media-right" > <img src ="https://static.runoob.com/images/mix/img_avatar.png" class ="media-object" style ="width:60px" > </div > </div > <div class ="media" > <div class ="media-body" > <h4 class ="media-heading" > 置底</h4 > <p > 这是一些示例文本...这是一些示例文本..这是一些示例文本..</p > </div > <div class ="media-bottom" > <img src ="https://static.runoob.com/images/mix/img_avatar.png" class ="media-object" style ="width:60px" > </div > </div > <div class ="media" > <div class ="media-left media-middle" > <img src ="https://static.runoob.com/images/mix/img_avatar.png" class ="media-object" style ="width:60px" > </div > <div class ="media-body" > <h4 class ="media-heading" > 居中对齐 <small > Test</small > </h4 > <p > 这是一些示例文本...这是一些示例文本..这是一些示例文本..这是一些示例文本...这是一些示例文本..这是一些示例文本..这是一些示例文本...这是一些示例文本..这是一些示例文本..</p > </div > </div > </div >
weiyigeek.top-
7.面板(Panels) 描述:面板组件用于把 DOM 组件插入到一个盒子中
Class类说明:1 2 3 4 5 6 7 8 9 10 11 12 13 14 .panel .panel-default .panel-heading .panel-title .panel-body .panel-footer .table panel-primary、panel-success、panel-info、panel-warning、panel-danger .well .well-*
注意事项:
面版脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。
基础示例:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 <div class ="container" > <p > #面板 Panels 基本样式演示:</p > <div class ="panel panel-default" > <div class ="panel-heading" > <h3 class ="panel-title" > 带有Title的面板标题</h3 > </div > <div class ="panel-body" > 基本面板内容 </div > <div class ="panel-footer" > 面板脚注</div > </div > <br > <p > #带语境色彩的面板与表格面板</p > <div class ="panel panel-primary" > <div class ="panel-heading" > <h3 class ="panel-title" > 面板标题-panel-primary</h3 > </div > <div class ="panel-body" > 设置带语境色彩的面板 </div > <table class ="table table-hover table-striped table-bordered" > <th > 产品</th > <th > 价格</th > <tr > <td > iPhone 11</td > <td > 11972</td > </tr > <tr > <td > 红米note pro 8 </td > <td > 1299</td > </tr > </table > </div > <br > <p > #带列表组的面板</p > <div class ="panel panel-danger" > <div class ="panel-heading" > <h3 class ="panel-title" > 列表组面板</h3 > </div > <div class ="panel-body" > 测试的列表组面板文本主体; </div > <div class ="list-group" > <a href ="#" class ="list-group-item active" > <span class ="badge" > <span class ="glyphicon glyphicon-remove" > </span > </span > 面板列表项1</a > <a href ="#" class ="list-group-item" > 面板列表项2</a > </div > </div > <p > Well </p > <div class ="well well-lg" > 您好，我在大的 Well 中！</div > <div class ="well well-sm" > 您好，我在小的 Well 中！</div > </div >
weiyigeek.top-
0x01 BS 插件 描述:Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动;利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况下被触发。
站点引用 Bootstrap 插件的方式有两种：
Bootstrap 为大多数插件的独特行为提供了自定义事件。事件有两种形式：
动词不定式 ：这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。
1 2 3 4 $('#myModal').on('show.bs.modal', function (e) { // 阻止模态框的显示 if (!data) return e.preventDefault() })
过去分词形式 ：这会在动作执行完毕之后被触发。例如 ex: shown。
注意事项:
通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码 （首选方式），如果需要关闭请采用下列方式：
1 2 $(document).off('.data-api' ) $(document).off('.alert.data-api' )
编程方式的 API 是所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）
1 2 3 4 5 6 $(".btn.danger").button("toggle").addClass("fat") // 所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数 $("#myModal").modal() // 初始化为默认行为 $("#myModal").modal({ keyboard: false }) // 初始化为不支持键盘 $("#myModal").modal('show') // 初始化并立即调用 show
每个插件在 Constructor 属性上也暴露了其原始的构造函数：$.fn.popover.Constructor。
1 $('[rel=popover]').data('popover'). #想获取某个特定插件的实例
避免命名空间冲突
在开发中可能会与其他UI框架一起使用可能会发生命名空间冲突，这时候您可以通过调用插件的 .noConflict 方法恢复其原始值。
1.过渡效果（Transition） 如果您想要单独引用该插件的功能，那么除了其他的 JS 文件，您还需要引用 transition.js 它是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类;它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果;
常见效果:
具有幻灯片或淡入效果的模态对话框
具有淡出效果的标签页
具有淡出效果的警告框
具有幻灯片效果的轮播板
2.模态框（Modal） 模态框（Modal）是覆盖在父窗体上的子窗体。通常目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
使用方法:
1 2 3 4 5 6 7 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal" 同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框： $('#identifier').modal(options) #关键点 data-toggle="modal" data-target="#myModal" #触发元素，自定义的 data 属性 data-toggle 用于打开模态窗口。 id="myModal" aria-labelledby="myModalLabel" aria-hidden="true" #弹出层绑定，性引用模态框的标题。 class="close" data-dismiss="modal" aria-hidden="true" #关闭按元素
Class类说明:
1 2 3 4 5 6 7 modal #把 <div> 的内容识别为模态框。 modal-dialog #模态框弹出层 modal-content #内容 modal-header #头部 modal-title #标题 modal-body #主题部分 modal-footer #底部
选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。
1 2 3 4 5 6 7 8 9 10 11 12 backdrop boolean 或 string 'static' 默认值：true data-backdrop 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。 keyboard boolean 默认值：true data-keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。 show boolean 默认值：true data-show 当初始化时显示模态框。 remote path 默认值：false data-remote 使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示： <a data-toggle="modal" href="remote.html" data-target="#modal" rel="noopener noreferrer">请点击我</a>
modal() 一起使用的有用的方法。
Options: .modal(options)把内容作为模态框激活。接受一个可选的选项对象。
$('#identifier').modal({ keyboard: false })
Toggle: .modal(‘toggle’)手动切换模态框。
$('#identifier').modal('toggle')
Show: .modal(‘show’)手动打开模态框。
$('#identifier').modal('show')
Hide: .modal(‘hide’)手动隐藏模态框。
$('#identifier').modal('hide')
模态框中要用到事件
show.bs.modal
在调用 show 方法后触发。
$('#identifier').on('show.bs.modal', function () { // 执行一些动作... })
shown.bs.modal
当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... })
hide.bs.modal
当调用 hide 实例方法时触发。
$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... })
hidden.bs.modal
当模态框完全对用户隐藏时触发。
$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... })
基础示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 <div class ="container" > <div class ="page-header" > <h1 > 模态框（Modal）插件<small > 案例</small > </h1 > </div > <button type ="button" class ="btn btn-large btn-block btn-primary" data-toggle ="modal" data-target ="#myModal" > Modal Demo</button > <div class ="modal fade" id ="myModal" tabindex ="-1" role ="rialog" aria-labelledby ="myModalLabel" aria-hidden ="true" > <div class ="modal-dialog" > <div class ="modal-content" > <div class ="modal-header" > <button type ="button" class ="close" data-dismiss ="modal" aria-hidden ="true" > ×</button > <h4 class ="modal-title" id ="myModalLabel" > 模态框(Modal)标题</h4 > </div > <div class ="modal-body" > 这里是基础实例标题; <input type ="text" name ="Demo" id ="Demo" class ="form-control" placeholder ="测试输入" > </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 > </div > </div > <p > 案例2</p > <a data-toggle ="modal" href ="http://baidu.com" data-target ="#modal" rel ="noopener noreferrer" class ="btn btn-danger" > 请点击我 Modal Demo</a > <div class ="modal fade" id ="modal" tabindex ="-1" > <div class ="modal-dialog" > <div class ="modal-content" > <div class ="modal-header" > <button type ="button" class ="close" data-dismiss ="modal" aria-hidden ="true" > ×</button > <h4 class ="modal-title" id ="myModalLabel" > 百度一下</h4 > </div > <div class ="modal-body" > <iframe src ="http://baidu.com" style ="width: 100%;height: 100%;" > </iframe > </div > <div class ="modal-footer" > <button type ="button" class ="btn btn-default" data-dismiss ="modal" > 关闭</button > </div > </div > </div > </div > </div > <script > $(function ( $('#modal' ).on('show.bs.modal' ,function ( console .log(new Date ().toLocaleString() +" - 在调用 show 方法后触发。" ); }); $('#modal' ).on('shown.bs.modal' ,function ( console .log(new Date ().toLocaleString() +" - 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。" ); }); $('#modal' ).on('hide.bs.modal' ,function ( console .log(new Date ().toLocaleString() +" - 当调用 hide 实例方法时触发。" ); }); $('#modal' ).on('hiden.bs.modal' ,function ( console .log(new Date ().toLocaleString() +" 当模态框完全对用户隐藏时触发。" ); }); }); </script >
weiyigeek.top-
3.下拉菜单（Dropdown） 使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单
基础用法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 (1)通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示： <div class="dropdown" > <a data-toggle="dropdown" href="#" >下拉菜单（Dropdown）触发器</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" > </ul> </div> <div class="dropdown" > <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html" > 下拉菜单（Dropdown） <span class="caret" ></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" ></ul> </div> (2)通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法： $(function $(".dropdown-toggle" ).dropdown('toggle' ); });
描述:自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。
用法:
1 2 3 4 (1)通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll" 。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target=".navbar-example"。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。 (2)通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数： $('body').scrollspy({ target: '.navbar-example' })
属性和方法:
选项名称
类型/默认值
Data 属性名称
描述
offset
number 默认值：10
data-offset
当计算滚动位置时，距离顶部的偏移像素。
1 2 3 4 5 .scrollspy('refresh')：当通过 JavaScript 调用 scrollspy 方法时，您需要调用 .refresh 方法来更新 DOM。 在 DOM 的任意元素发生变更（即，您添加或移除了某些元素）时非常有用 $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') })
事件：
1 2 3 4 activate.bs.scrollspy 每当一个新项目被滚动监听激活时，触发该事件。 $('#myScrollspy').on('activate.bs.scrollspy', function () { // 执行一些动作... })
基础实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 <nav id ="myScrp" class ="navbar navbar-default navbar-static" role ="navigation" > <div class ="container-fluid" > <div class ="navbar-header" > <button class ="navbar-toggle" type ="button" data-toggle ="collapse" data-target =".bs-js-navbar-scrollspy" > <span class ="sr-only" > 切换导航</span > <span class ="icon-bar" > </span > <span class ="icon-bar" > </span > <span class ="icon-bar" > </span > </button > <a class ="navbar-brand" href ="#" > 教程名称</a > </div > <div class ="collapse navbar-collapse bs-js-navbar-scrollspy" > <ul class ="nav navbar-nav" > <li class ="active" > <a href ="#ios" > iOS</a > </li > <li > <a href ="#svn" > SVN</a > </li > <li class ="dropdown" > <a href ="#" id ="navbarDrop1" class ="dropdown-toggle" data-toggle ="dropdown" > Java <b class ="caret" > </b > </a > <ul class ="dropdown-menu" role ="menu" aria-labelledby ="navbarDrop1" > <li > <a href ="#jmeter" tabindex ="-1" > jmeter</a > </li > <li > <a href ="#ejb" tabindex ="-1" > ejb</a > </li > <li class ="divider" > </li > <li > <a href ="#spring" tabindex ="-1" > spring</a > </li > </ul > </li > </ul > </div > </div > </nav > <div data-spy ="scroll" data-target ="#myScrp" data-offset ="0" style ="height: 200px; overflow: auto; position: relative;" > <div class ="section" > <h4 id ="ios" > iOS<small > <a href ="#" onclick ="removeSection(this);" > × 删除该部分</a > </small > </h4 > <p > iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p > </div > <div class ="section" > <h4 id ="svn" > SVN<small > </small > </h4 > <p > Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p > </div > <div class ="section" > <h4 id ="jmeter" > jMeter<small > <a href ="#" onclick ="removeSection(this);" > × 删除该部分</a > </small > </h4 > <p > jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p > </div > <div class ="section" > <h4 id ="ejb" > EJB</h4 > <p > Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p > </div > <div class ="section" > <h4 id ="spring" > Spring</h4 > <p > Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p > <p > Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p > </div > </div > <span id ="activeitem" style ="color:red;" > 滚动监听（Scrollspy）事件</span > </div > <script > $(function ( removeSection = function (e) $(e).parents(".section" ).remove(); $('[data-spy="scroll"]' ).each(function ( var $spy = $(this ).scrollspy('refresh' ) }); } $("#myScrollspy" ).scrollspy(); $('#myScrp' ).on('activate.bs.scrollspy' , function ( var currentItem = $(".nav li.active > a" ).text(); console .log(currentItem); $("#activeitem" ).html("目前您正在查看 - " + currentItem); }); }); </script >
weiyigeek.top-
水平滚动监听 (首页常用)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <body data-spy ="scroll" data-target =".navbar" data-offset ="50" style ="position: relative; " > <nav class ="navbar navbar-inverse navbar-fixed-top" > <div class ="container-fluid" > ... <ul class ="nav navbar-nav" > <li > <a href ="#section1" > Section 1</a > </li > ... </div > </nav > <div id ="section1" class ="container-fluid" > <h1 > Section 1</h1 > </div > <div id ="section2" class ="container-fluid" > <h1 > Section 2</h1 > </div > <div id ="section3" class ="container-fluid" > <h1 > Section 3</h1 > </div > <div id ="section41" class ="container-fluid" > <h1 > Section 4 Submenu 1</h1 > </div > <div id ="section42" class ="container-fluid" > <h1 > Section 4 Submenu 2</h1 > </div > </body >
创建垂直滚动监听:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 <style > ul .nav-pills { top: 20px; position : fixed ; } div .col-sm-9 div { height: 250px; font-size: 28px; } #section-1 {color : #fff ; background-color : #1E88E5 ;} #section-2 {color : #fff ; background-color : #673ab7 ;} #section-3 {color : #fff ; background-color : #ff9800 ;} #section-4 {color : #fff ; background-color : #00bcd4 ;} #section-5 {color : #fff ; background-color : #009688 ;} @media screen and (max-width: 810px ) { #section-1 , #section-2 , #section-3 , #section-4 , #section-5 { margin-left: 150px; } } </style > <body data-spy ="scroll" data-target ="#myScrollspy" data-offset ="20" style ="position: relative;" > <div class ="container" > <div class ="row" > <nav class ="col-sm-3" id ="myScrollspy" > <div class ="container-fluid" > <ul class ="nav nav-pills nav-stacked" > <li class ="active" > <a href ="#section-1" > Section-1</a > </li > <li > <a href ="#section-2" > Section-2</a > </li > <li > <a href ="#section-3" > Section-3</a > </li > <li class ="dropdown" > <a class ="dropdown-toggle" data-toggle ="dropdown" href ="#" > Other <span class ="caret" > </span > </a > <ul class ="dropdown-menu" > <li > <a href ="#section-4" > Section-4</a > </li > <li > <a href ="#section-5" > Section-5</a > </li > </ul > </li > </ul > </div > </nav > <div class ="col-sm-9" > <div id ="section-1" > <h1 > Section1</h1 > <p > Try to scroll</p > </div > <div id ="section-2" > <h1 > Section2</h1 > <p > Try to scroll</p > </div > <div id ="section-3" > <h1 > Section3</h1 > <p > Try to scroll</p > </div > <div id ="section-4" > <h1 > Section4</h1 > <p > Try to scroll</p > </div > <div id ="section-5" > <h1 > Section5</h1 > <p > Try to scroll</p > </div > </div > </div > </div >
weiyigeek.top-
5.标签页（Tab） 描述:通过结合一些 data 属性，您可以轻松地创建一个标签页界面;通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
用法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 (1)通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。 - 添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式 - 添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。 <ul class="nav nav-tabs"> <li><a href="#identifier" data-toggle="tab">Home</a></li> </ul> (2)通过 JavaScript：您可以使用 Javascript 来启用标签页，如下所示： $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') }) // 通过名称选取标签页 $('#myTab a[href="#profile"]').tab('show') // 选取第一个标签页 $('#myTab a:first').tab('show') // 选取最后一个标签页 $('#myTab a:last').tab('show') // 选取第三个标签页（从 0 开始索引） $('#myTab li:eq(2) a').tab('show')
方法:
.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。
事件:
事件
描述
实例
show.bs.tab
该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的标签页 e.relatedTarget // 前一个激活的标签页 })
shown.bs.tab
该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // 激活的标签页 e.relatedTarget // 前一个激活的标签页 })
基础实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <nav id ="tabdemo" > <ul class ="nav nav-pills" > <li class ="active" > <a href ="#home" data-toggle ="pill" > 首页</a > </li > <li > <a href ="#ios" data-toggle ="pill" > ISO</a > </li > <li class ="dropdown" > <a class ="dropdown-toggle" data-toggle ="dropdown" href ="#" id ="myTab" > Java <span class ="caret" > </span > </a > <ul class ="dropdown-menu" role ="menu" aria-labbledby ="myTab" > <li > <a href ="#jmeter" tabindex ="-1" data-toggle ="pill" > jmeter</a > </li > <li > <a href ="#ejb" tabindex ="-1" data-toggle ="pill" > EJB</a > </li > </ul > </li > </ul > </nav > <div id ="myTabContent" class ="tab-content" > <div class ="tab-pane fade in active" id ="home" > <p > 首页是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p > </div > <div class ="tab-pane fade" id ="ios" > <p > iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p > </div > <div class ="tab-pane fade" id ="ejb" > <p > Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p > </div > <div class ="tab-pane fade" id ="jmeter" > <p > jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p > </div > </div > <div class ="page-header" > <p class ="active-tab" > <strong > 当前激活的标签页</strong > ：<span > </span > </p > <p class ="previous-tab" > <strong > 前一个激活的标签页</strong > ：<span > </span > </p > </div > </div > <script > $(function ( $('#tabdemo li:eq(1) a' ).tab('show' ); $('a[data-toggle="pill"]' ).on('shown.bs.tab' ,function (e ) var activeTab = $(e.target).text(); var previousTab = $(e.relatedTarget).text(); $(".active-tab span" ).html(activeTab); $(".previous-tab span" ).html(previousTab); }); }); </script >
weiyigeek.top-
提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息;
提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：
用法:
1 2 3 4 5 6 (1) 通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。 <a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a> (2)通过 JavaScript 触发提示工具（tooltip）： $('#identifier').tooltip(options) $(function () { $("[data-toggle='tooltip']").tooltip(); })
选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的
选项名称
类型/默认值
Data 属性名称
描述
animation
boolean 默认值：true
data-animation
提示工具使用 CSS 渐变滤镜效果。
html
boolean 默认值：false
data-html
向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement
string\
function 默认值：top
data-placement
规定如何定位提示工具（即 top\
bottom\
left\
right\
auto）。 当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 “auto left”，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector
string 默认值：false
data-selector
如果提供了一个选择器，提示工具对象将被委派到指定的目标。
title
string \
function 默认值：’’
data-title
如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger
string 默认值：’hover focus’
data-trigger
定义如何触发提示工具： **click\
hover \
focus \
manual**。您可以传递多个触发器，每个触发器之间用空格分隔。
delay
number \
object 默认值：0
data-delay
延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： delay: { show: 500, hide: 100 }
container
string \
false 默认值：false
data-container
向指定元素追加提示工具。 实例： container: ‘body’
方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 Options: .tooltip(options) $().tooltip(options) Toggle: .tooltip('toggle' ) $('#element' ).tooltip('toggle' ) Show: .tooltip('show' ) $('#element' ).tooltip('show' ) Hide: .tooltip('hide' ) $('#element' ).tooltip('hide' ) Destroy: .tooltip('destroy' ) $('#element' ).tooltip('destroy' )
事件：
1 2 3 4 5 6 7 show.bs.tooltip 当调用 show 实例方法时立即触发该事件。 shown.bs.tooltip 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。 hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 $('#myTooltip').on('show.bs.tooltip', function () { // 执行一些动作... })
基础实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <div class ="container" > <h4 > 工具提示（Tooltip）插件 - 锚</h4 > 这是一个 <a href ="#" class ="tooltip-show" data-toggle ="tooltip" title ="默认的 Tooltip" data-delay ="{show: 500, hide: 3000}" > 默认的 Tooltip</a > . 这是一个 <a href ="#" class ="tooltip-event" data-toggle ="tooltip" data-placement ="left" title ="左侧的 Tooltip" > 左侧的 Tooltip</a > . 这是一个 <a href ="#" class ="tooltip-toggle" data-toggle ="tooltip" data-placement ="top" title ="顶部的 Tooltip" > 顶部的 Tooltip</a > . 这是一个 <a href ="#" class ="tooltip-destroy" data-toggle ="tooltip" data-placement ="bottom" title ="底部的 Tooltip" > 底部的 Tooltip</a > . 这是一个 <a href ="#" class ="tooltip-show" data-toggle ="tooltip" data-placement ="right" title ="右侧的 Tooltip" > 右侧的 Tooltip</a > <br > <h4 > 工具提示（Tooltip）插件 - 按钮</h4 > <button type ="button" class ="btn btn-default" data-toggle ="tooltip" title ="默认的 Tooltip" > 默认的 Tooltip</button > <button type ="button" class ="btn btn-default" data-toggle ="tooltip" data-placement ="left" title ="左侧的 Tooltip" > 左侧的 Tooltip </button > <button type ="button" class ="btn btn-default" data-toggle ="tooltip" data-placement ="top" title ="顶部的 Tooltip" > 顶部的 Tooltip </button > <button type ="button" class ="btn btn-default" data-toggle ="tooltip" data-placement ="bottom" title ="底部的 Tooltip" > 底部的 Tooltip </button > <button type ="button" class ="btn btn-default" data-toggle ="tooltip" data-placement ="right" title ="右侧的 Tooltip" > 右侧的 Tooltip</button > <p class ="tooltip-options" > 这是一个 <a href ="#" class ="tooltip-options" data-toggle ="tooltip" title ="am Header2" > Tooltip 方法 options</a > . </p > </div > <script > $(function ( $("[data-toggle='tooltip']" ).tooltip({delay : { show : 500 , hide : 1000 }}); $('.tooltip-show' ).tooltip('show' ); $('.tooltip-hide' ).tooltip('hide' ); $('.tooltip-destroy' ).tooltip('destroy' ); $('.tooltip-toggle' ).tooltip('toggle' ); }) $(function ( $(".tooltip-options a" ).tooltip({html : true }); $('.tooltip-event' ).on('show.bs.tooltip' , function (e ) console .log("当前点击了：" + e.target.firstChild.textContent); }) }); </script >
7.弹出框（Popover） 描述:弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图,如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。
弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。
用法:
1 2 3 4 5 6 (1)通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可; 锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。 (2)通过 JavaScript：通过 JavaScript 启用弹出框（popover）： $('#identifier').popover(options) $(function () { $("[data-toggle='popover']").popover(); }); //使用下面的脚本来启用页面中的所有的弹出框（popover）
选项:popover({选项值}）
animation
boolean 默认值：true
data-animation
向弹出框应用 CSS 褪色过渡效果。
html
boolean 默认值：false
data-html
向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement
string\
function 默认值：top
data-placement
规定如何定位弹出框（即 top\
bottom\
left\
right\
auto）。 当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 “auto left”，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector
string 默认值：false
data-selector
如果提供了一个选择器，弹出框对象将被委派到指定的目标。
title
string \
function 默认值：’’
data-title
如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger
string 默认值：’hover focus’
data-trigger
定义如何触发弹出框： **click\
hover \
focus \
manual**。您可以传递多个触发器，每个触发器之间用空格分隔。
delay
number \
object 默认值：0
data-delay
延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： delay: { show: 500, hide: 100 }
container
string \
false 默认值：false
data-container
向指定元素追加弹出框。 实例： container: ‘body’
方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 Options: .popover(options) $().popover(options) Toggle: .popover('toggle' ) $('#element' ).popover('toggle' ) Show: .popover('show' ) $('#element' ).popover('show' ) Hide: .popover('hide' ) $('#element' ).popover('hide' ) Destroy: .popover('destroy' ) $('#element' ).popover('destroy' )
事件:
1 2 3 4 5 6 7 show.bs.popover 当调用 show 实例方法时立即触发该事件。 shown.bs.popover 当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.popover 当调用 hide 实例方法时立即触发该事件。 hidden.bs.popover 当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 $('#mypopover').on('show.bs.popover', function () { // 执行一些动作... })
基础示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <div class ="page-header" > <h4 > 弹出框Popover <small > 案例</small > </h4 > <p > 测试信息</p > </div > <button type ="button" class ="btn btn-default" title ="Popover Title" data-container ="body" data-toggle ="popover" data-placement ="left" data-content ="左侧的Popover内容" > 左侧</button > <button type ="button" class ="btn btn-primary" title ="Popover Title" data-container ="body" data-toggle ="popover" data-placement ="top" data-content ="顶部的Popover内容" > 顶部</button > <button type ="button" class ="btn btn-success" title ="Popover Title" data-container ="body" data-toggle ="popover" data-placement ="bottom" data-content ="底部的Popover内容" > 底部</button > <button type ="button" class ="btn btn-warning" title ="Popover Title" data-container ="body" data-toggle ="popover" data-placement ="right" data-content ="右侧的Popover内容" > 右侧</button > <p class ="popover-options" style ="display:flex;margin-top: 20px;" > <a href ="#" type ="button" class ="btn btn-warning" title ="<h2>Title</h2>" data-container ="body" data-toggle ="popover" data-content ="<h4>Popover 中的一些内容 —— options 方法</h4>" > Popover </a > </p > <button type ="button" class ="btn btn-danger" onclick ="reset()" > 取消弹出框显示</button > </div > <script > $(function ('[data-toggle="popover"]' ).popover({ delay : { show : 500 , hide : 800 }, html : true });}); $(function ('.btn-primary' ).popover('show' );}); $(function ('.btn-default' ).popover('hide' );}); $(function ('.popover-destroy' ).popover('destroy' );}); $(function ('.btn-success' ).popover('toggle' );}); $(function ( $(".btn-warning" ).on('show.bs.popover' ,function ( console .log("调用 show 实例方法时立即触发该事件" ); }) $(".btn-warning" ).on('shown.bs.popover' ,function ( console .log("当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。" ); }) $(".btn-warning" ).on('hide.bs.popover' ,function ( console .log("当调用 hide 实例方法时立即触发该事件。" ); }) $(".btn-warning" ).on('hiden.bs.popover' ,function ( console .log("当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。" ); }) }); function reset () $(function ( $('[data-toggle="popover"]' ).popover('hide' ); }); } </script >
8.警告框（Alert） 描述:警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息
用法:
1 2 3 4 5 (1) 通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。 <a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a> (2) 通过 JavaScript：通过 JavaScript 添加可取消功能： $(".alert").alert()
方法：
1 2 3 4 5 6 .alert() $('#identifier' ).alert(); 关闭方法 .alert('close' ) $('#identifier' ).alert('close' );
事件:
1 2 3 4 5 close.bs.alert 当调用 close 实例方法时立即触发该事件。 closed.bs.alert 当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。 $('#myalert').bind('close.bs.alert', function () { // 执行一些动作... })
基础示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <div class ="container" > <div id ="alert1" class ="alert alert-success" > <a href ="#" class ="close" data-dismiss ="alert" > ×</a > <strong > 警告!网络链接正常!</strong > </div > <div id ="alert2" class ="alert alert-warning" > <a href ="#" class ="close" data-dismiss ="alert" > ×</a > <strong > 警告!网络链接异常!</strong > </div > </div > <script > $(function ( $(".alert" ).click(function ( $("#alert1" ).alert('close' ); $("#alert2" ).alert(); }); $(function ( $(".alert" ).bind('close.bs.alert' ,function ( console .log('警告框被打开！' ) }) $(".alert" ).bind('closed.bs.alert' ,function ( alert("警告消息框被关闭" ); }) }) }) </script >
描述:添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。
用法:
1 2 3 4 5 6 7 (1) 基础属性即可 data-loading-text="Loading..." data-toggle="button" data-toggle="buttons" (2) 通过 JavaScript 启用按钮（Button）插件 $('.btn' ).button()
方法：
1 2 3 4 5 6 7 8 9 10 11 button('toggle' ) $().button('toggle' ) .button('loading' ) $().button('loading' ) .button('reset' ) $().button('reset' ) .button(string) $().button(string)
基础示例:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 <div class ="page-header" > <h4 > 按钮Button插件<small > 示例</small > </h4 > </div > <div class ="row" > <h4 > 演示 .button('toggle') 方法</h4 > <div id ="myButtons1" class ="bs-example" > <button type ="button" class ="btn btn-primary" > 原始</button > </div > <p > 加载状态：</p > <button id ="fat-btn" class ="btn btn-primary" data-loading-text ="Loading..." type ="button" > <span class ="glyphicon glyphicon-tint" > </span > 加载状态(方式1)</button > <button id ="fat-btn1" class ="btn btn-primary" data-loading-text ="Loading finished" type ="button" > <span class ="glyphicon glyphicon-tint" > </span > 加载状态(方式2)</button > <button id ="reset" class ="btn btn-default" > 恢复默认</button > <hr > <p > 单个切换</p > <button type ="button" class ="btn btn-primary" data-toggle ="button" > 单个切换</button > <p > 复选框（Checkbox）</p > <div class ="btn-group" data-toggle ="buttons" > <label for ="opt1" class ="btn btn-primary btn-lg" > <input type ="checkbox" name ="option1" id ="opt1" > 选项1 </label > <label for ="opt2" class ="btn btn-primary btn-lg" > <input type ="checkbox" name ="option2" id ="opt2" > 选项2 </label > <label for ="opt3" class ="btn btn-primary btn-lg" > <input type ="checkbox" name ="option3" id ="opt3" > 选项3 </label > </div > <p > 单选按钮（Radio）</p > <div class ="btn-group" data-toggle ="buttons" > <label class ="btn btn-primary" > <input type ="radio" name ="options" id ="option1" > 选项 1 </label > <label class ="btn btn-primary" > <input type ="radio" name ="options" id ="option2" > 选项 2 </label > <label class ="btn btn-primary" > <input type ="radio" name ="options" id ="option3" > 选项 3 </label > </div > </div > <script > $(function ( $("#myButtons1 .btn" ).click(function ( $(this ).button('toggle' ); }); $("#fat-btn" ).click(function ( $(this ).button('loading' ).delay(1000 ).queue(function ( $("#fat-btn" ).html('<span class="glyphicon glyphicon-ok"> </span> 操作完成' ) }) $("#fat-btn1" ).click(function ( $(this ).button('loading' ).delay(1000 ).queue(function ( $(this ).button('complete' ); }); }); }); $("#reset" ).click(function ( $("#fat-btn" ).button('reset' ); }); }) </script >
weiyigeek.top-
10.折叠（Collapse） 描述:折叠（Collapse）插件可以很容易地让页面区域折叠起来。常常和面板类class .panel 进行连用
基础属性:1 2 3 4 5 6 7 .panel-collapse .collapse .in - data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。 - href 或 data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上,Href设置折叠元素的id锚 - data-target="" 可以创建不带 accordion 标记的简单的可折叠组件（collapsible）；
parent
selector 默认值：false
data-parent
如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类
toggle
boolean 默认值：true
data-toggle
切换调用可折叠元素。
方法：1 2 3 4 5 6 7 8 9 10 11 12 13 $('#identifier' ).collapse({ toggle: false ; }) $('#identifier' ).collapse('toggle' ) $('#identifier' ).collapse('show' ) $('#identifier' ).collapse('hide' )
事件:1 2 3 4 5 6 7 show.bs.collapse 在调用 show 方法后触发该事件。 shown.bs.collapse 当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。 hidden.bs.collapse 当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 $('#identifier' ).on('show.bs.collapse' , function // 执行一些动作... })
基础实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <div class ="container" > <div class ="panel-group" id ="accrodin" > <div class ="panel panel-default" > <div class ="panel-heading" > <h4 class ="panel-title" > <a href ="#collapseone" data-toggle ="collapse" data-parent ="#accrodin" > 进行折叠第一个部分</a > </h4 > </div > <div class ="panel-collapse collapse in" id ="collapseone" > <div class ="panel-body" > WeiyiGeek 测试 折叠 (collapse); </div > </div > </div > <div class ="panel panel-default" > <div class ="panel-heading" > <h4 class ="panel-title" > <a href ="#collapsetwo" data-toggle ="collapse" data-parent ="#accrodin" > 进行折叠第二个部分</a > </h4 > </div > <div class ="panel-collapse collapse" id ="collapsetwo" > <div class ="panel-body" > WeiyiGeek 测试 折叠 (collapse); </div > </div > </div > </div > <button type ="button" class ="btn btn-primary" data-toggle ="collapse" data-target ="#collapsethree" > 进行折叠</button > <div id ="collapsethree" class ="collapse in" > Like Bootstrap collapse </div > <button type ="button" class ="btn btn-warning" id ="tg" > 按钮点击切换</button > </div > <script > $(function ( $('#tg' ).click(function ( $("#collapsethree" ).collapse('toggle' ); }); $("#collapsethree" ).on('show.bs.collapse' ,function ( console .log("折叠显示" ); }) $("#collapsethree" ).on('hide.bs.collapse' ,function ( console .log("折叠隐藏" ); }) }); </script >
weiyigeek.top-Collapse
11.轮播（Carousel） 描述:一种灵活的响应式的向站点添加滑块的方式，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
基础属性：
1 2 3 4 5 6 7 8 9 10 11 .carousel slide .carousel-indicators .carousel-inner .item .carousel-caption .active carousel-control left carousel-control right
用法:
1 2 3 4 5 6 7 8 (1)通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。 属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。 使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。 data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。 (2)通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示： $('.carousel').carousel()
选项:
interval
number 默认值：5000
data-interval
自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pause
string 默认值：”hover”
data-pause
鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap
boolean 默认值：true
data-wrap
轮播是否连续循环。
方法:
1 2 3 4 5 6 7 8 9 10 11 .carousel(options) 初始化轮播为可选的 options 对象，并开始循环项目。 $('#identifier' ).carousel({ interval: 2000 }) .carousel('cycle' ) 从左到右循环轮播项目。 .carousel('pause' ) 停止轮播循环项目。 .carousel(number) 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 .carousel('prev' ) 循环轮播到上一个项目。 .carousel('next' ) 循环轮播到下一个项目。 $('#identifier' ).carousel('next' )
事件：
1 2 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件。 slid.bs.carousel 当轮播完成幻灯片过渡效果时触发该事件。
基础示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 <div class ="container" > <div class ="row" > <div class ="col-md-9" > <h4 > 轮播（Carousel）案例演示 </h4 > <div id ="myCarousel" class ="carousel slide" data-ride ="carousel" data-interval ="3000" > <ol class ="carousel-indicators" > <li data-target ="#myCarousel" data-slide-to ="0" class ="active" > </li > <li data-target ="#myCarousel" data-slide-to ="1" > </li > <li data-target ="#myCarousel" data-slide-to ="2" > </li > </ol > <div class ="carousel-inner" > <div class ="item active" > <img src ="https://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt ="First slide" > <div class ="carousel-caption" > 图片1标题</div > </div > <div class ="item" > <img src ="https://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt ="Second slide" > <div class ="carousel-caption" > 图片2标题</div > </div > <div class ="item" > <img src ="https://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt ="Third slide" > <div class ="carousel-caption" > 图片3标题</div > </div > </div > <a class ="left carousel-control" href ="#myCarousel" role ="button" data-slide ="prev" > <span class ="glyphicon glyphicon-chevron-left" aria-hidden ="true" > </span > <span class ="sr-only" > Previous</span > </a > <a class ="right carousel-control" href ="#myCarousel" role ="button" data-slide ="next" > <span class ="glyphicon glyphicon-chevron-right" aria-hidden ="true" > </span > <span class ="sr-only" > Next</span > </a > <div class ="input-group-btn" style ="text-align:center;" > <input type ="button" class ="btn start-slide" value ="Start" > <input type ="button" class ="btn pause-slide" value ="Pause" > <input type ="button" class ="btn prev-slide" value ="Previous Slide" > <input type ="button" class ="btn next-slide" value ="Next Slide" > <input type ="button" class ="btn slide-one" value ="Slide 1" > <input type ="button" class ="btn slide-two" value ="Slide 2" > <input type ="button" class ="btn slide-three" value ="Slide 3" > </div > </div > </div > </div > <script > $(function ( $(".start-slide" ).click(function ( $("#myCarousel" ).carousel('cycle' ); }); $(".pause-slide" ).click(function ( $("#myCarousel" ).carousel('pause' ); }); $(".prev-slide" ).click(function ( $("#myCarousel" ).carousel('prev' ); }); $(".next-slide" ).click(function ( $("#myCarousel" ).carousel('next' ); }); $(".slide-one" ).click(function ( $("#myCarousel" ).carousel({interval : 2000 }); $("#myCarousel" ).carousel(0 ); }); $(".slide-two" ).click(function ( $("#myCarousel" ).carousel(1 ); }); $(".slide-three" ).click(function ( $("#myCarousel" ).carousel(2 ); }); $("#myCarousel" ).on("slide.bs.carousel" ,function ( alert('轮播开始' ); }); $("#myCarousel" ).on("slid.bs.carousel" ,function ( alert('轮播结束' ); }); }); </script >
weiyigeek.top-Carousel轮播
12.附加导航（Affix） 描述:附加导航（Affix）插件允许指定<div> 固定在页面的某个位置;它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。
语法:1 2 3 4 5 6 7 8 9 10 11 (1)通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。 (2)通过 JavaScript：您可以通过 JavaScript 手动为某个元素添加附加导航（Affix）; $('#myAffix' ).affix({ offset: { top: 100, bottom: function return (this.bottom = $('.bs-footer' ).outerHeight(true )) } } })
附加导航（Affix）插件在三种 class 之间切换，每种 class 都呈现了特定的状态：.affix、.affix-top 和 .affix-bottom1 2 3 4 5 6 7 .affix .affix-top .affix-bottom offset number | function | object 默认值：10
基础示例：1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 <!DOCTYPE html> <html lang ="en" > <head > <meta charset ="UTF-8" > <meta name ="viewport" content ="width=device-width, initial-scale=1.0" > <meta http-equiv ="X-UA-Compatible" content ="ie=edge" > <title > Bootstrap 插件</title > <link rel ="stylesheet" href ="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" > <style > ul .nav-tabs { width: 140px; margin-top: 20px; border-radius: 4px; border : 1px solid #ddd ; box-shadow : 0 1px 4px rgba (0, 0, 0, 0.067 ); } ul .nav-tabs li { margin: 0; border-top : 1px solid #ddd ; } ul .nav-tabs li :first-child { border-top: none; } ul .nav-tabs li a { margin: 0; padding: 8px 16px; border-radius: 0; } ul .nav-tabs li .active a , ul .nav-tabs li .active a :hover { color : #fff ; background : #0088cc ; border : 1px solid #0088cc ; } ul .nav-tabs li :first-child a { border-radius: 4px 4px 0 0; } ul .nav-tabs li :last-child a { border-radius: 0 0 4px 4px; } ul .nav-tabs .affix { top: 30px; } </style > </head > <body data-spy ="scroll" data-target ="#myScroll" > <div class ="container" > <div class ="jumbotron" > <h1 > Bootstrap<small > Affix </small > </h1 > </div > <div class ="row" > <div class ="col-xs-3 hidden-xs" id ="myScroll" > <ul class ="nav nav-tabs nav-stacked" data-spy ="affix" data-offset-top ="125" id ="myNav" > <li class ="active" > <a href ="#section1" > 第一部分</a > </li > <li > <a href ="#section2" > 第2部分</a > </li > <li > <a href ="#section3" > 第3部分</a > </li > <li > <a href ="#section4" > 第4部分</a > </li > <li > <a href ="#section5" > 第5部分</a > </li > </ul > </div > <div class ="col-xs-9" > <div class ="page-header" id ="section1" > <h2 > WeiyiGeek <small > 测试</small > </h2 > <p > 第1部分 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,</p > </div > <div class ="page-header" id ="section2" > <h2 > WeiyiGeek <small > 测试</small > </h2 > <p > 第2部分 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,</p > </div > <div class ="page-header" id ="section3" > <h2 > WeiyiGeek <small > 测试</small > </h2 > <p > 第3部分 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,</p > </div > <div class ="page-header" id ="section4" > <h2 > WeiyiGeek <small > 测试</small > </h2 > <p > 第4部分 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,</p > </div > <div class ="page-header" id ="section5" > <h2 > WeiyiGeek <small > 测试</small > </h2 > <p > 第5部分 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,</p > </div > </div > </div > </div > <script > $(document ).ready(function ( $("#myNav" ).affix({ offset: { top: 125 } }); }); </script >
weiyigeek.top-affix
