BootStrap（五）折叠和轮播

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.轮播
这个不学了 用的时候直接拿吧

 <div id="myCarousel" class="carousel slide" style="width: 900px;height:500px">
            <!--轮播指标-->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1" ></li>
                <li data-target="#myCarousel" data-slide-to="2" ></li>
            </ol>
            <!--轮播项目（图片）-->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="/img/slide1.png"/>
                </div>
                <div class="item">
                    <img src="/img/slide2.png"/>
                </div>
                <div class="item">
                    <img src="/img/slide3.png"/>
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel"
               data-slide="prev">&lsaquo;
            </a>
            <a class="carousel-control right" href="#myCarousel"
               data-slide="next">&rsaquo;
            </a>

        </div>

js片段：

  $("#myCarousel").carousel()