bootstrap和swiper的使用

迷南。 2022-06-08 07:50 505阅读 0赞

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

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

一．引用：

<script src="js/jquery-2.2.3.min.js"></script>
    
    <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/][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

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

nextButton: '.swiper-button-next',

prevButton:'.swiper-button-prev',

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

3.基本内容为：

<**div**class="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动画
    }

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

**如**<**div class**="swiper-slide">

# </div> #

# 具体动画效果见：[http://www.swiper.com.cn/usage/animate/index.html][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; #

# \} #

[http_www.bootcss.com]: http://www.bootcss.com/
[http_www.swiper.com.cn]: http://www.swiper.com.cn/
[http_v3.bootcss.com]: http://v3.bootcss.com/
[http_www.swiper.com.cn_usage_animate_index.html]: http://www.swiper.com.cn/usage/animate/index.html