Bootstrap下载地址：http://www.bootcss.com/ （响应式框架）

Swiper 下载地址：http://www.swiper.com.cn/ （轮播框架）

一．引用：

//为了兼容手机端

<!-- 如果要使用Bootstrap的JS插件，则必须引入jQuery -->
<script src="js/jquery-2.2.3.min.js"></script>
<!-- Bootstrap的JS插件 -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.unveilEffects.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script src="js/jquery.hovertreescroll.js"></script>
<script src="js/swiper.min.js"></script>

注：1.引入js时必须先引入jquery 因为大部分控件都是基于jquery

     2.如果需要更改框架原有样式，请把自己开发的css放在后边

二．bootstrap框架使用

开发文档见：http://v3.bootcss.com/

bootstrap栅格将页面一行分为12格，高度为自适应，如需固定高度请自己设置css

bootstrap根据不同尺寸设备将属性分为lg md xs sm四种，如果需要针对不同尺寸优化可以使用自带的样式，也可以通过media query进行自行修改如@media(max-width:@screen-xs-max){
…}
bootstrap可以设置不同尺寸设备的可见性，如visible-xs等
bootstrap自带的头部导航为fixed的，即会跟随屏幕一直在顶端，但是需要设置

body{padding-top:导航高度+20px}，否则导航下的控件会被覆盖显示不全

4.  如果需要居中容器可以设置：
<divclass="container"> ... </div>但是宽度为70%
如需100%宽度请使用
       <divclass="container-fluid"> ... </div>
       或者自己修改为width:100%
三． Swiper使用
Swiper开发文档http://www.swiper.com.cn/api/index.html
Swiper为跨平台的轮播框架，可以实现延迟动画等功能
1.使用swiper必须先初始化，多个控件可修改为.
swiper-container1，.swiper-container2
<script>
    $(document).ready(function () {       
        var mySwiper = new Swiper('.swiper-container', {
                      direction: 'horizontal',
            loop: true,
            autoplay: 3000,//可选选项，自动滑动
            autoplayDisableOnInteraction: false,
            grabCursor: true,
            speed: 300,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationType: 'bullets',
            paginationClickable: true,
        })
}
</script>

2.如果需要前进后退按钮可以添加

nextButton: ‘.swiper-button-next’,

prevButton:’.swiper-button-prev’,

其他控件见文档（如横屏竖屏滚动等）

3.基本内容为：

<divclass=”swiper-container”>

<**div**class="swiper-wrapper">
    <**div**class="swiper-slide">Slide 1</**div**>
    <**div**class="swiper-slide">Slide 2</**div**>
    <**div**class="swiper-slide">Slide 3</**div**>
</**div**>
<!-- 如果需要分页器 \-->
<**div**class="swiper-pagination"></**div**>
<!-- 如果需要导航按钮 \-->
<**div**class="swiper-button-prev"></**div**>
<**div**class="swiper-button-next"></**div**>
<!-- 如果需要滚动条 \-->
<**div**class="swiper-scrollbar"></**div**>

</div>

5. 如果需要动画效果则需引入Swiper Animate

引入方式见一

引入后必须初始化，即在swiper初始方法中加入

onInit: function (swiper) { //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素
    swiperAnimate(swiper); //初始化完成开始动画
}, onSlideChangeEnd: function (swiper) {
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}