• 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" 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>
    
    Nametypedefaultdescription
    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" 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-targethref<a>data-toggle="tab"

    .tab('show')

    选择给定的选项卡并显示其关联的内容。以前选择的任何其他选项卡将变为未选中,其关联内容将隐藏。在实际显示选项卡窗格之前(即事件发生之前)返回调用方。shown.bs.tab

    $('#someTab').tab('show')

    显示新选项卡时,事件按以下顺序显示:

    1. hide.bs.tab (在当前活动选项卡上)
    2. show.bs.tab (在要显示的选项卡上)
    3. hidden.bs.tab (在上一个活动选项卡上,与事件相同的选项卡)hide.bs.tab
    4. 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 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>
    

      

    使用:

    使用可选选项初始化旋转木马,并开始循环浏览项目。object

    $('.carousel').carousel({
      interval: 2000
    })

    从左到右循环浏览旋转木马项目。

    阻止旋转木马循环通过项目。

    将旋转木马循环到特定帧(基于 0,类似于数组)。

    循环到上一项。

    循环到下一个项目。

    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 布尔 旋转木马是否应对键盘事件做出反应。
  • 相关阅读:
    知识图谱
    spring mvc踩坑记
    学习计划
    迷茫中看见一道曙光
    面试复习准备
    关于配置httpd2.4.18+php5.6
    notepad++ 等用正则表达式自动添加sql引号(宏)
    JDK1.8的HashMap实现原理和源码解析
    Java垃圾回收机制
    sql server 表分区
  • 原文地址:https://www.cnblogs.com/wenaq/p/13557646.html
Copyright © 2020-2023  润新知