1、手风琴
.collapse
隐藏内容.collapse.in
显示内容.collapsing
过渡开始时添加,并在转换结束时删除
希望默认打开,请添加附加类 。data-toggle="collapse"
data-target
data-target
collapse
in
添加数据属性 。请参阅演示以了解此操作。data-parent="#selector"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手风琴</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> </head> <body> <!-- 手风琴 --> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </html>
Name | type | default | description | ||
---|---|---|---|---|---|
parent | selector | false |
|
||
toggle | boolean | true | 在调用时切换可折叠元素 |
$('#myCollapsible').collapse({ toggle: false }) .collapse('toggle') 将可折叠元素切换为显示或隐藏。在可折叠元素实际显示或隐藏之前(即在 或 事件发生之前)返回调用方。shown.bs.collapsehidden.bs.collapse .collapse('show') 显示可折叠元素。在实际显示可折叠元素之前(即在事件发生之前)返回调用方。shown.bs.collapse .collapse('hide') 隐藏可折叠元素。在可折叠元素实际隐藏之前(即事件发生之前)返回调用方。hidden.bs.collapse
事件
Bootstrap 的折叠类公开了一些挂钩到折叠功能的事件。
事件类型 | 描述 |
---|---|
show.bs.collapse | 调用实例方法时,此事件会立即触发。show |
shown.bs.collapse | 当折叠元素对用户可见时(将等待 CSS 转换完成)时,将触发此事件。 |
hide.bs.collapse | 调用该方法后,将立即触发此事件。 hide |
hidden.bs.collapse | 当崩溃元素对用户隐藏时(将等待 CSS 转换完成),将触发此事件。 |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})
2、tab切换
无需编写任何 JavaScript。将nav 和nav-tabs 类添加到选项卡将应用 Bootstrap选项卡样式,而添加nav
和 nav-pills类将应用 PI片样式。data-toggle="tab"
data-toggle="pill"
nav
nav-tabs
ul
nav
nav-pills
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>tab切换</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> </head> <body> <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a> </li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a> </li> </ul> 若要使选项卡淡入,请添加到每个 。第一个选项卡窗格还必须使初始内容可见。.fade
.tab-pane
.in
<!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">aaaa</div> <div role="tabpanel" class="tab-pane" id="profile">aaaa</div> <div role="tabpanel" class="tab-pane" id="messages">ssss</div> <div role="tabpanel" class="tab-pane" id="settings">ddddd</div> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </html>
$().tab
激活选项卡元素和内容容器。选项卡应具有 DOM 中的容器节点或目标容器节点。在上面的示例中,选项卡是具有属性的 s。 data-target
href
<a>
data-toggle="tab"
.tab('show')
选择给定的选项卡并显示其关联的内容。以前选择的任何其他选项卡将变为未选中,其关联内容将隐藏。在实际显示选项卡窗格之前(即事件发生之前)返回调用方。shown.bs.tab
$('#someTab').tab('show')
显示新选项卡时,事件按以下顺序显示:
hide.bs.tab
(在当前活动选项卡上)show.bs.tab
(在要显示的选项卡上)hidden.bs.tab
(在上一个活动选项卡上,与事件相同的选项卡)hide.bs.tab
shown.bs.tab
(在新激活的刚刚显示的选项卡上,与事件选项卡相同)show.bs.tab
如果没有选项卡已处于活动状态,则 不会触发 和 事件。hide.bs.tab
hidden.bs.tab
事件类型 | 描述 |
---|---|
show. bs. tab | 此事件在选项卡显示时触发,但在显示新选项卡之前。分别使用 和 定位活动选项卡和上一个活动选项卡(如果可用)。event.target event.relatedTarget |
shown.bs.tab | 显示选项卡后,此事件将在选项卡显示的选项卡上触发。分别使用 和 定位活动选项卡和上一个活动选项卡(如果可用)。event.target event.relatedTarget |
hide.bs.tab | 当显示新选项卡时,将触发此事件(因此将隐藏上一个活动选项卡)。分别使用 和 定位当前活动选项卡和新的即将激活的选项卡。event.target event.relatedTarget |
hidden.bs.tab | 此事件在显示新选项卡后触发(因此隐藏了上一个活动选项卡)。分别使用 和 定位上一个活动选项卡和新的活动选项卡。event.target event.relatedTarget |
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
3、轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> </head> <body> <div class="col-md-4"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <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> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/copy.png" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="images/copy.png" alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </html>
使用:
.carousel(options)
使用可选选项初始化旋转木马,并开始循环浏览项目。object
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
从左到右循环浏览旋转木马项目。
.carousel('pause')
阻止旋转木马循环通过项目。
.carousel(number)
将旋转木马循环到特定帧(基于 0,类似于数组)。
.carousel('prev')
循环到上一项。
.carousel('next')
循环到下一个项目。
事件
Bootstrap 的旋转木马类公开了两个用于挂钩到旋转木马功能的事件。
这两个事件都具有以下附加属性:
direction
:旋转木马滑动的方向(或 )。"left"
"right"
relatedTarget
:作为活动项滑入的 DOM 元素。
所有旋转木马事件都向旋转木马本身(即在 中)发射。<div class="carousel">
事件类型 | 描述 |
---|---|
slide.bs.carousel | 调用实例方法时,此事件将立即触发。slide |
slid.bs.carousel | 当旋转木马完成其幻灯片过渡时,将触发此事件。 |
$('#myCarousel').on('slide.bs.carousel', function () { // do something… })
功能:
名字 | 类型 | 默认 | 描述 |
---|---|---|---|
interval | 数量 | 5000 | 自动循环项目之间的延迟时间量。如果为 false,旋转木马不会自动循环。 |
pause | 字符串 |空 | "悬停" | 如果设置为 ,则暂停旋转木马的循环,并在 上恢复旋转木马的循环。如果设置为 ,则将鼠标悬停在旋转木马上不会暂停。"hover" mouseenter mouseleave null |
wrap | 布尔 | 真 | 旋转木马是连续循环还是硬停止。 |
keyboard | 布尔 | 真 | 旋转木马是否应对键盘事件做出反应。 |