Swiper和Bootstrap概述

已于 2022-04-19 11:26:00 修改
阅读量1.5k 收藏 1
点赞数 1
分类专栏： jQuery基础 文章标签： javascript jquery bootstrap
于 2022-04-19 09:14:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41523175/article/details/124262676
版权

一、Swiper（插件）

1、下载

进入官网。 

随便下载一个即可。 

在demo文件夹下有许多的案例。

2、使用

利用CDN引入swiper的css文件和js文件。

    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

更多技巧，需要阅读官方文档。

3、案例一——轮播图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo11</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <style>
        .swiper {
            width: 400px;
            height: 200px;
        }

        .swiper img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../picture/java.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../picture/前端.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../picture/php.jpg" alt="">
            </div>
        </div>

        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

    <script>
        var mySwiper = new Swiper('.swiper', {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    </script>
</body>

</html>

 效果如下：

4、总结

1、使用文档齐全的工具，会让工作事半功倍。

2、本节讲的swiper并不重要，重要的是掌握如何使用第三方工具，并且查阅相应的文档。

3、真正的项目开发，会使用大量的第三方工具（库、框架、插件等），没有一个大型项目是刀耕火种一行行代码写出来的，大家要习惯使用工具。

 之前做的页面效果，主要用于积累js基础知识。

二、BootStrap（框架）

1、介绍

使用方法与swiper差不多，详情请查阅官方文档。

重要的是阅读文档的能力。

分为：CSS样式、组件、插件等。 

自己动手试一试，会用即可。

2、案例二

使用了：

1、栅格系统（全局CSS样式）

2、导航条（组件）

3、Carousel-轮播图（JavaScript插件）

引入css和js：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo12</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .box {
            width: 1200px;
        }

        /* 因为有自带的img样式,高度为auto,我们需要将他更改 */
        .carousel-inner>.item>img,
        .thumbnail>img {
            width: 500px;
            height: 250px;
        }

        .content1 {
            width: 500px;
            height: 250px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="container box">
        <div class="nav">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">哔哩哔哩</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">博客</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                    aria-haspopup="true" aria-expanded="false">视频 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </li>
                        </ul>
                        <form class="navbar-form navbar-left">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="搜索">
                            </div>
                            <button type="submit" class="btn btn-default">搜索</button>
                        </form>
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                    aria-haspopup="true" aria-expanded="false">用户 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div>

        <div class="content1">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="../picture/java.jpg" alt="...">
                        <div class="carousel-caption">

                        </div>
                    </div>
                    <div class="item">
                        <img src="../picture/前端.jpg" alt="...">
                        <div class="carousel-caption">

                        </div>
                    </div>
                    <div class="item">
                        <img src="../picture/php.jpg" alt="...">
                        <div class="carousel-caption">

                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

        <h1>推荐课程</h1>

        <div class="content2">
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/java.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/前端.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/php.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/java.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/前端.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/php.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/java.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/前端.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/php.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/java.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/前端.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="../picture/php.jpg" alt="...">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>测试文本</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                    class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <script src="../script/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
</body>

</html>

 效果如下：

自己动手试一试吧！ 

pro1822
关注
专栏目录
bootstrap和swiper的使用
万万没想到的博客
09-19 6073
Bootstrap下载地址：http://www.bootcss.com/  （响应式框架） Swiper 下载地址：http://www.swiper.com.cn/ （轮播框架）   一．引用： <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scala
Bootstrap概述
藜笙的博客
06-27 723
Bootstrap是世界最受欢迎的Wed框架之一 ，用于开发响应式布局、移动设备优先的Wed项目。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。 Container容器 Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中--这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容...
bootstarp的swiper
weixin_45608302的博客
10-02 252
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./node_m
移动端js事件、zeptojs、swiper、bootstrap、正则表达式、前端性能优化
我的个人博客
04-23 956
移动端场景下的js事件；制作移动端特效常用的js库；介绍移动端常用开发框架Bootstrap。
bootstrap之Swipe
weixin_34185512的博客
07-26 99
Swipe 我定义为滑动，但它字面的意思又不是，事件的形式类似于小时候拿着一块石头片，朝水面飞过去，假设你手法能够那么就是swipe走的路线，假设你手法不行，接触水面的时候就没再飞起来那就会被人嘲笑的。 package io.appium.android.bootstrap.handler; import com.android.uiautomator.core.Ui...
移动端库
weixin_33947521的博客
06-12 137
1. 移动端js事件 移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件： 1、touchstart: //手指放到屏幕上时触发2、touchmove: //手指在屏幕上滑动式触发3、touchend: //手指离开屏幕时触发4、touchcancel: //系统取消touch事件的时候触发，比较少用 移动端一般有三种操作，点击...
利用Bootstrap创建幻灯片和轮播图
Bootstrap是由Twitter开发的一个前端框架，它包含了许多用于构建网站和Web应用程序的HTML、CSS和JavaScript组件。Bootstrap提供了响应式网页设计、移动设备优先的设计理念以及丰富的组件库，可以帮助开发者快速搭建...
Vue概述及入门
zhl18735756297的博客
09-27 371
vue概述及入门 Vue的基础认识 官网 https://cn.vuejs.orgl 介绍描述 渐进式JavaScript框架 作者:尤雨溪 作用:动态构建用户界面 Vue的特点 Mvvm模式 编码简洁,体积小,运行效率高 本身只关注UI,可以轻松引入vue插件或者这第三方库开发项目 Vue扩展插件 Vue-cli :vue脚手架 Vue-resource(axios):ajax请求 Vue-router:路由 Vuex:状态管
Web笔记之移动端开发
Mr__Zhang___的博客
04-17 1895
1、移动端基础 ①浏览器现状 说明：国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。 ②手机屏幕现状 ● 移动端设备屏幕尺寸非常多，碎片化严重。 ● Android设备有多种分辨率∶......
web前端期末大作业 html+css+javascript+jquery+bootstarp响应式鲜花售卖网站1md
08-10
### 一、关键技术知识点概述 本项目为一个典型的web前端期末大作业实例，涉及到了HTML、CSS、JavaScript、jQuery以及Bootstrap等技术栈的应用。通过分析标题、描述、标签及部分内容，我们可以归纳出以下关键技术...
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
09-02
主要介绍了BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
电影项目前端页面(ajax,axios)
我是张先生
01-02 4223
未登录的主页 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&...
结合JQuery Bootstrap Swiper PHP的移动端网站
hanjingjava的专栏
12-20 254
如题： 结合JQuery Bootstrap Swiper PHP的移动端网站 效果： 项目地址： https://github.com/hanjing5024064/website 示例： http://www.jyfrl.com 
推荐开源项目：Swipe - 移动应用响应式Bootstrap5模板
最新发布
gitblog_00044的博客
06-05 324
推荐开源项目：Swipe - 移动应用响应式Bootstrap5模板 swipe-one-page-bootstrap-5???? Swipe - One Page Bootstrap 5 Template for Mobile Applications项目地址:https://gitcode.com/gh_mirrors/sw/swipe-one-page-bootstrap-5 Swipe 是一...
vue 使用Jquery和bootstrap加elementUi加swiper插件
weixin_40888956的博客
01-27 790
如果你已经创建好了Vue项目，就按照下面步骤就可以加上你要用的插件或UI组建 第一步npm install jquery --save-dev安装Jquery插件模块 第二步在build/webpack.dev.conf.js中plugins数组的最后但是在plugins数组里面加入这行代码， new webpack.optimize.CommonsChunkPlugin('commo...
bootstrapvue中使用swiper图片轮播
qq_50031016的博客
04-25 1073
boottstrapvue中要用图片轮播 前言 尝试过js的走马灯和无缝滚动，这两个只适应电脑端，尝试着修改bootstrapvue中自带的图片轮播，但是出来的是三张三张的一起轮播，这个要证都是三的倍数 一、vue中引入swiper？ 在终端执行： npm install --save swiper npm install --save vue-awesome-swiper 二、使用步骤 1.引入库 在main.js中全局引入 代码如下（示例）： //swiper版本6.0以上使用，我使用的是swiper6
bootstrap选项卡 + swiper滑动插件 部分元素未渲染的问题
BingJH2018212666的博客
12-07 222
bootstrap选项卡 + swiper滑动插件
bootstrap
不死彡邪神的博客
05-25 235
使用bootstrap，响应式布局，头部，是根据设备的大小自适应屏幕大小其中一点，第二点， content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 自适应布局： 固定布
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pro1822

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值