bootstrap 常用功能

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" >
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" >
                <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 >
                <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" >
                <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 >
                <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" >
                <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 >
                <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"navnav-tabsulnavnav-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" >aaaa</div>
            <div role="tabpanel" class="tab-pane" >aaaa</div>
            <div role="tabpanel" class="tab-pane" >ssss</div>
            <div role="tabpanel" class="tab-pane" >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-targethref<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.tabhidden.bs.tab

事件类型	描述
show. bs. tab	此事件在选项卡显示时触发，但在显示新选项卡之前。分别使用和定位活动选项卡和上一个活动选项卡（如果可用）。`event.targetevent.relatedTarget`
shown.bs.tab	显示选项卡后，此事件将在选项卡显示的选项卡上触发。分别使用和定位活动选项卡和上一个活动选项卡（如果可用）。`event.targetevent.relatedTarget`
hide.bs.tab	当显示新选项卡时，将触发此事件（因此将隐藏上一个活动选项卡）。分别使用和定位当前活动选项卡和新的即将激活的选项卡。`event.targetevent.relatedTarget`
hidden.bs.tab	此事件在显示新选项卡后触发（因此隐藏了上一个活动选项卡）。分别使用和定位上一个活动选项卡和新的活动选项卡。`event.targetevent.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 >
            <!-- 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"mouseentermouseleavenull`
wrap	布尔	真	旋转木马是连续循环还是硬停止。
keyboard	布尔	真	旋转木马是否应对键盘事件做出反应。

bootstrap 常用功能

事件

$().tab

.tab('show')

.carousel(options)

.carousel('cycle')

.carousel('pause')

.carousel(number)

.carousel('prev')

.carousel('next')

事件

相关推荐