bootstrap和swiper的使用

最新推荐文章于 2025-07-03 11:42:32 发布

原创最新推荐文章于 2025-07-03 11:42:32 发布 · 6.2k 阅读

4 ·

CC 4.0 BY-SA版权

平时所学专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何使用Bootstrap和Swiper创建响应式的网页布局和轮播效果。内容包括Bootstrap的栅格系统、不同设备尺寸的可见性设置、头部导航的使用，以及Swiper的分页器、导航按钮和动画效果的实现。还提到了解决开发中遇到的布局问题，如li的横向排布、元素居中和CSS样式调整等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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/

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动画
}