Bootstrap折叠 手风琴 轮播图

1.折叠/手风琴Collapse   accordion

面板组中每个面板都包含了一个class=”panel-heading”和class=”panel-collapse”  并且在<a>定义两个属性data-toggle=”collapse”固定写法  data-parent=”#面板父容器ID” href=”#面板对应的内容ID”

<div class="panel-group" id="panelContainer">
     <div class="panel panel-default panel-accordion">
         <div class="panel-heading">
              <h4 class="panel-title">
                   <a data-toggle="collapse" data-parent="#panelContainer" href="#collapse1">标题1</a>
              </h4>
         </div>
         <div id="collapse1" class="panel-collapse collapse in">
              <div class="panel-body">标题一对应的内容</div>
         </div>
     </div>
     <div class="panel panel-default">
         <div class="panel-heading">
              <h4 class="panel-title">
                   <a data-toggle="collapse" data-parent="#panelContainer" href="#collapse2">标题2</a>
              </h4>
         </div>
         <div id="collapse2" class="panel-collapse collapse in">
              <div class="panel-body">标题二对应的内容</div>
         </div>
     </div>
     <div class="panel panel-default">
         <div class="panel-heading" data-toggle="collapse" data-parent="#panelContainer" data-target="#collapse3">
              <h4 class="panel-title">
                   <a  href="#">标题3</a>
              </h4>
         </div>
         <div id="collapse3" class="panel-collapse collapse in">
              <div class="panel-body">标题三对应的内容</div>
         </div>
     </div>
     <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#myCol">点击</button></br>
     <div id="myCol" class="collapse in">折叠内容</div>
</div>
         <script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script>
         <script type="text/javascript" src="js/bootstrap.min.js" ></script>
         <script>
              $(function(){
                   $("#btnLoading").click(function(){
                       $(this).button("loading");
                       setTimeout(function(){
                            $("#btnLoading").button("reset");
                       },1000);
                   });
              });
     </script>

2.   轮播图carousel

Data-ride=”carousel” 使用最外层容器上

Data-target: 作用于calss=”carousel-indicators”的每一个元素<li>上

Data-slide:作用于轮播图的控制器上，也就是左右滚动的<a>标签链接上，可以取值prev next

Data-slide-0:用来传递某个帧的下标，下标从0开始

Data-interval:轮播图轮换等待的事件，单位为毫秒，如果设置为false则不会自动轮播，默认为5000毫秒

Data-pause:如果鼠标停留在轮换图上则停止轮播，离开后立即播放

Data-wrap:是否持续轮播

$().carousel({

     Wrap:false

})

Carousel(“cycle”)：从左向右循环播放  carousel(“pause”)停止循环播放  carousel(“number”)播放指定索引的帧图片 carousel(“prev”)播放上一帧 carousel(“next”)播放下一帧 carousel(“keyboard”)是否对键盘事件作出响应

<div id="carouselcontainer" class="carousel" data-ride="carousel">
     <ol class="carousel-indicators">
         <li class="active" data-target="#carouselcontainter" data-slide-to="0">1</li>
         <li data-target="#carouselcontainter" data-slide-to="1">2</li>
         <li data-target="#carouselcontainter" data-slide-to="2">3</li>
     </ol>
     <div class="carousel-inner" role="listbox">
         <div class="item active">
              <img src="img/1.jpg">
              <div class="carousel-caption">
                   <h3>一朵莲花</h3>
                   <p>非常漂亮的睡莲</p>
              </div>
         </div>
         <div class="item">
              <a href="#"><img src="img/2.jpg"></a>
         </div>
         <div class="item">
              <img src="img/3.jpg">
         </div>
     </div>
     <a class="left carousel-control" href="#carouselcontainer" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
     </a>
     <a class="right carousel-control" href="#carouselcontainer" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
     </a>
</div>

7.Affix插件 固定导航

属性data-spy:固定值affix

Data-offset-top:用来设置元素距顶部的距离

Data-offset-bottom:用来设置元素底部的距离

Data-offset:表示top和bottom都为相同的数字

<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="200">
     <li class="active"><a href="#section1">起步</a></li>
     <li class="active"><a href="#section2">CSS</a></li>
     <li class="active"><a href="#section3">组件</a></li>
     <li class="active"><a href="#section4">插件</a></li>
     <li class="active"><a href="#section5">定制</a></li>
</ul>