BootStrap（五）折叠和轮播

今天药忘吃喽~ 2022-06-07 10:27 165阅读 0赞

## BootStrap（五）折叠和轮播 ##

下面是我最喜欢的两个插件了一个是折叠，另一个是轮播

**1.折叠**  
首先先来一个最基础的 标签版本  
主要用的类是data-toggle=’collapse’ data-target=’\#折叠的div’  
创建一个div class=’collapse’  
这样 点击按钮就能实现 折叠效果

手风琴的  
首先创建一个div class=’panel-group’ id为parent  
内层div 创建 panel panel-primary  
创建 heading 给定title title标签中的  
a标签 href=’\#下层展开的面板’ data-toggle=’collapse’ data-parent指向最外层的parent

然后 定义div class为panel-collapse collapse id为展开面板  
然后定义panel-body  
即可实现  
具体代码:

<div class="panel-group" id="parent">
            <div class="panel panel-primary" >
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a href="#collapseOne" data-toggle="collapse" data-parent="#parent">标题</a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse ">
                    <div class="panel-body">
                        Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                        vice lomo
                    </div>
                </div>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a href="#collapse2" data-toggle="collapse" data-parent="#parent">标题二</a>
                    </h4>
                </div>
                <div id="collapse2" class="panel-collapse collapse">
                    <div class="panel-body">
                        Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                        vice lomo。
                    </div>
                </div>
            </div>
        </div>

js事件调用：

$("#collapseOne,#collapseTwo").collapse({ parent:'#parent', toggle:true })

**2.轮播**  
这个不学了 用的时候直接拿吧

js片段：

$("#myCarousel").carousel()