bootstrap和swiper的使用

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

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

 

一．引用：

<metaname="viewport"content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">//为了兼容手机端
<link href="css/bootstrap.css"rel="stylesheet">
<link rel="stylesheet"href="css/swiper.css">
<link rel="stylesheet"href="css/animate.min.css">

<!-- 如果要使用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/

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

bootstrap根据不同尺寸设备将属性分为lg md xs sm四种 ，如果需要针对不同尺寸优化可以使用自带的样式，也可以通过media query进行自行修改如@media(max-width:@screen-xs-max){...}

2.      bootstrap可以设置不同尺寸设备的可见性，如visible-xs等

3.      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">

    <divclass="swiper-wrapper">

        <divclass="swiper-slide">Slide 1</div>

        <divclass="swiper-slide">Slide 2</div>

        <divclass="swiper-slide">Slide 3</div>

    </div>

    <!-- 如果需要分页器 -->

    <divclass="swiper-pagination"></div>

   

    <!-- 如果需要导航按钮 -->

    <divclass="swiper-button-prev"></div>

    <divclass="swiper-button-next"></div>

   

    <!-- 如果需要滚动条 -->

    <divclass="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动画}

之后只需需要动画效果中加入class=”ani”以及三个参数

如<divclass="swiper-slide">

<p class="ani"swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>

</div>

具体动画效果见：http://www.swiper.com.cn/usage/animate/index.html

6. 分页器和导航按钮样式可以通过修改swiper.css来改变，初始为背景色，可以修改为背景图

 

四开发中遇到的问题

1.  li横向排布：float:left浮动结束如果下个容器显示位置受到影响可以使用bootstrap提供的<div class=clearfix’/>或者<div style=’clear:both’/>

2.  容器左右居中：margin:0 auto; (0为margin-top可以根据需求修改)

3.  文字上下居中：font-size:*;line-height:容器高度；

4.  文字左右居中：text-align: center

5.  微调容器位置 position: relative; top:?;bottom:?;left:?;right:?

6.  Input中文字与左侧边框距离 padding-left:10px

7.  背景自动缩放到与容器大小一样 background:url(‘’) no-repeat; background-size:cover;

8.  背景自动拉伸到容器大小一样（完整显示一次）

9.  background:url(‘’) no-repeat; background-size:contain;

10. css执行顺序：引入的从上到下，下面的会覆盖上面的，控件上的style优先级最高

11. 开发前，最好将样式清零：（使用bootstrap不需要，已经清除过了）

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,

abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,

var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;

}