bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结

轮播图组件 使用类名carousel 使用carousel就是相对定位，使用在父级上
    基本用法：
        <div class="container">
          <div class="row col">
            // carousel 就是父级，使用的是相对定位 
            slide是左右滚动，不加的话有点像幻灯片
            carousel-fade 轮播图是否需要过渡 必须要使用slide
            <div class="carousel slide" data-ride='carousel'>
                // inner 里面就是w-100, 相对定位
                <div class="carousel-inner">
                    // active 是显示当前的图片
                    <div class="carousel-item active">
                        // img-fluid 为使图片为响应式
                        <img src="xxx" alt="图片" class='img-fluid'>
                    </div>
                    <div class="carousel-item">
                        // img-fluid 为使图片为响应式
                        <img src="xxx" alt="图片" class='img-fluid'>
                    </div>
                    <div class="carousel-item">
                        // img-fluid 为使图片为响应式
                        <img src="xxx" alt="图片" class='img-fluid'>
                    </div>
                    <div class="carousel-item">
                        // img-fluid 为使图片为响应式
                        <img src="xxx" alt="图片" class='img-fluid'>
                    </div>
                </div>
            </div>
          </div>
        </div>
    // 带控制功能的轮播图 自定义id 然后在轮播图同级加上a链接
    使用方法：
     <div class="row">
        <div class="col">
            <div class="carousel" id="control">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        // img-fluid 为使图片为响应式
                        <img src="xxx" alt="图片" class='img-fluid'>
                    </div>
                    <div class="carousel-item">
                        // img-fluid 为使图片为响应式
                        <img src="xxx" alt="图片" class='img-fluid'>
                    </div>
                    <div class="carousel-item">
                        // img-fluid 为使图片为响应式
                        <img src="xxx" alt="图片" class='img-fluid'>
                    </div>
                </div>
                <a href="#control" class="carousel-contorl-prev" data-slide='prev'>
                    <span class='carousel-control-pre-icon'></span>
                </a>
                <a href="#control" class="carousel-control-next" data-slide='next'>
                    <span class='carousel-control-next-icon'></span>
                </a>
            </div>
        </div>
    </div>
    // 包含指示器功能的轮播图
    在a链接下面使用 下面代码
    <ol>
       // data-slide-to ： 前往哪张图
        <li data-target="#id" data-slide-to='0' active></li>
        <li data-target="#id" data-slide-to='1' ></li>
        <li data-target="#id" data-slide-to='2' ></li>
    </ol>
    // 给每一张图片添加文本
    在每张图片的统计下面加上以下代码
    <div class="carousel-caption">
        <h5>主标题</h5>
        <p>特别说明</p>
    </div>
    // 设置轮播图时间 使用data-interval="" 默认为5000 可以单独设置给每一个项
    // 轮播图是否可以通过键盘来控制 使用data-keyboard='true/false' 默认值为true
    // 鼠标放在轮播图上是否需要播放 data-pause='true/false' 默认值为true
    // 轮播图是否需要循环播放 data-wrap='true/false' 默认值为true
    事件与方法
    方法：
    // 播放
    $('carousel').carousel({interval: 2000})
    // 循环播放
    $('carousel').carousel('cycle')
    // 暂停播放
    $('carousel').carousel('pause')
    // 上一张 需要上一张的按钮的dom click
    $('carousel').carousel('prev')
    // 下一张  需要上一张的按钮的dom click
    $('carousel').carousel('next')
    //指示器点击的功能 需要循环使用 number 是每一张图片的索引
    $('carousel').carousel(number)
    事件：
    // 轮播开始切换的事件
    $('carousel').on('slide.bs.carousel',function(ev){
        ev.direction // 走的方向
        ev.relatedTarget //当前走的dom元素
        ev.from //当前走的图片的索引
        ev.to   // 要走到图片的索引
    })
    // 轮播结束触发的事件
    $('carousel').on('slid.bs.carousel',function(){})
    // 折叠面板
    使用类名 collapse
    基本使用： 默认隐藏， 如果需要显示 加上类名 show
    <div class="container">
        <div class="row">
            <div class="col">
                <p>
                    <a href="#kendie" class='btn btn-primary' data-toggle='collapse'>啃爹</a>
                    // button 里面的data-target和a标签里面的href是一样的作用， 用于定位下面的折叠框
                    <button class="btn btn-info" data-toggle="collapse" data-target="kendie"></button>
                </p>
                //折叠面板的框
                <div class="collapse show" id="kendie">
                    <div>填啥都可以， 可以使用卡片组件，或者其他的</div>
                </div>
            </div>
        </div>
    </div>
    //多个目标的折叠面板 使用 data-target='.all' 把all这个类名加到需要控制的面板上
    // 实现手风琴效果 data-parent 是实现手风琴的关键
      <div class="row">
        <div class="accordion" id="accordion">
            // 第一项
            <div class="card">
                <div class="card-header">
                    <button class="btn-link" data-target='#item1'>xxx</button>
                </div>
                // 这里的id 用于上面的data-target 用于一一对应
                // data-parent 是用于归属于哪一个折叠框下面
                <div class="collapse show" id='item' data-parent='#accordion'>
                    <div class="card-body"></div>
                </div>
            </div>
            // 第二项
            <div class="card">
                <div class="card-header">
                    <button class="btn-link" data-target='#item2'>xxx</button>
                </div>
                // 这里的id 用于上面的data-target 用于一一对应
                // data-parent 是用于归属于哪一个折叠框下面
                <div class="collapse" id='item2' data-parent='#accordion'>
                    <div class="card-body"></div>
                </div>
            </div>
            // 第三项
            <div class="card">
                <div class="card-header">
                    <button class="btn-link" data-target='#item3'>xxx</button>
                </div>
                // 这里的id 用于上面的data-target 用于一一对应
                // data-parent 是用于归属于哪一个折叠框下面
                <div class="collapse" id='item3' data-parent='#accordion'>
                    <div class="card-body"></div>
                </div>
            </div>
        </div>
    </div>
    // 手风琴的方法与事件
    // 方法
    // 隐藏方法
    $('.collapse').collapse('hidde')
     // 显示方法
    $('.collapse').collapse('show')
    // 循环点击
     $('.collapse').collapse('toggle')
    // 事件
    // 显示的时候触发
     $('.collapse').on('show.bs.collapse',function(){})
     // 隐藏的时候触发
     $('.collapse').on('hidde.bs.collapse',function(){})
     // 折叠框完全显示的时候触发 transition 过渡完成后触发
     $('.collapse').on('shown.bs.collapse',function(){})
      // 折叠框完全隐藏的时候触发 transition 过渡完成后触发
     $('.collapse').on('hidden.bs.collapse',function(){})
     // 下拉菜单 dropdown
     // 单一按钮的下拉菜单 
     基本使用用法：
       <div class="container">
        <div class="row">
            <div class="col-2">
                // 按钮
                <div class="dropdown">
                    // dorpdown-toggle ： 用于显示小三角
                    <button class="btn btn-primary dorpdown-toggle" data-toggle='dropdown'>button下拉</button>
                    // a标签下拉 
                    <a href="javascript:;" class="btn btn-primary dorpdown-toggle" data-toggle='dropdown'>a下拉</button>
                </div>
                // dropdown-menu 下拉菜单 
                <div class="dropdown-menu">
                    // dropdown-item 下拉的项
                    <a href="#" class="dropdown-item">北京</a>
                    <a href="#" class="dropdown-item">上海</a>
                    //dropdown-driver 分割线
                    <div class="dropdown-driver"></div>
                    <a href="#" class="dropdown-item">广州</a>
                </div>
            </div>
        </div>
    </div>
    // 分离式下拉菜单
    使用按钮组 使用类名 dropdown-toggle(下拉菜单) dropdown-toggle-split （分隔）
    // 下拉菜单的尺寸
    btn-lg 大按钮
    btn-sm 小按钮
    // 下拉的方向（4.x） 3.x只有向上和向下
    dropup 向上展开 需要有足够的空间
    dropdown 向下展开（默认）
    dropleft 向左展开
    dropright 向右展开
    // 下拉菜单项的对齐方式
    dropdown-menu-right； 居右对齐
    dropdown-menu-left； 居左对齐
    dropdown-menu-center； 居中对齐
    // 下拉菜单的偏移属性
    data-offset='10,20' 10是离左边的偏移量 20是离上边的偏移量
    data-reference='parent' 根据父级来修改位置
    // 方法与事件
    方法：
    // 显示
    $('').dropdown('show')
    // 隐藏
    $('').dropdown('hide')
    // 点击显示和隐藏 需要使用data-reference 来固定哪个是父级 不可以来回的切换
    $('').dropdown('toggle')
    解决办法：
    使用jQuery的方法：
     $('').toggle(function(){
      $('').dropdown('show')
    },function(){
      $('').dropdown('hide')
    })
    事件：所有的下拉需要把事件放在父元素里面
    // 调用show的方法触发
    $('').on('show.bs.dropdown',function(){})
     // 调用hide的方法触发
    $('').on('hide.bs.dropdown',function(){})
    // 调用show的方法完全显示触发 animation完成触发
    $('').on('shown.bs.dropdown',function(){}) 
     // 调用hide的方法完全隐藏触发 animation完成触发
    $('').on('hiden.bs.dropdown',function(){})