bootstrap4响应式轮播图详解

最新推荐文章于 2023-08-23 07:39:33 发布

yufanhui

最新推荐文章于 2023-08-23 07:39:33 发布

阅读量1w

点赞数 6

本文链接：https://blog.csdn.net/yufanhui/article/details/80738760

版权

在开发过程中，既要采用框架，又要使用响应式布局。而bootstrap正好帮我们解决了这个问题。

采用bootstrap框架快速开发，达到快速开发响应式轮播图的目的。

1.引入bootstrap框架

引入方式有两种：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

在线引入。引入地址请访问bootstrap官网。

本地引入。官网地址下载最新版bootstrap版本。

为遵守开发过程中的规范，通常将CSS引入代码放入<head>最下面，将JS引入代码放在<body>最下面。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bootstrap4响应式轮播图详解</title>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./libs/bootstrap/bootstrap.min.css">
</head>
<body>
    




    <script src="./libs/bootstrap/bootstrap.min.css"></script>
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/popper/popper.min.js"></script>
</body>
</html>

2.轮播图

采用菜鸟教程bootstra4轮播代码。

<div id="demo" class="carousel slide" data-ride="carousel">

    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img style="width: 100%" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
        </div>
        <div class="carousel-item">
            <img style="width: 100%" src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
        </div>
        <div class="carousel-item">
            <img  style="width: 100%" src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
        </div>
    </div>

    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

但是，我们通常不这样写代码。通常的做法时在屏幕放大时使用backgroun="背景图(大图)"，在屏幕缩小时使用<img src="">的做法。采用这样的原因是：屏幕缩小时，图片过大，对移动端设备流量消耗过大，在屏幕缩小时采用<img src="小图">的做法来显示图片的主旨内容。

3.轮播图详解

逻辑详解：在屏幕变化时，采用@media（媒体查询）来布局；在小图时，图片要随着屏幕的缩小而缩小，大图时，不用跟着屏幕的缩小而缩小。

在屏幕为640px以上时要使用background:url("大图")来显示，并将<img>设置为display:none.

@media screen and (min-width:640px){
		#demo img{
			display: none;
		}
		#demo .carousel-inner .carousel-bg1{
			background: url(../img/slide_01_2000x410.jpg) no-repeat center center;
			width: 100%;
			height: 410px;
		}
		#demo .carousel-inner .carousel-bg2{
			background: url(../img/slide_02_2000x410.jpg) no-repeat center center;
			width: 100%;
			height: 410px;
		}
		#demo .carousel-inner .carousel-bg3{
			background: url(../img/slide_03_2000x410.jpg) no-repeat center center;
			width: 100%;
			height: 410px;
		}
		#demo .carousel-inner .carousel-bg4{
			background: url(../img/slide_04_2000x410.jpg) no-repeat center center;
			width: 100%;
			height: 410px;
		}
	}

在屏幕为640px以下时要使用<img src="小图">来显示。设置display:block。

@media screen and (max-width:640px){
		#demo img{
			display: block;
		}
		
	}

<!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active carousel-bg1">
            <img style="width: 100%" src="./img/slide_01_640x340.jpg">
        </div>
        <div class="carousel-item carousel-bg2">
                <img style="width: 100%" src="./img/slide_02_640x340.jpg">
        </div>
        <div class="carousel-item  carousel-bg3">
                <img style="width: 100%" src="./img/slide_03_640x340.jpg">
        </div>
        <div class="carousel-item  carousel-bg4">
                <img   style="width: 100%" src="./img/slide_04_640x340.jpg">
            </div>
    </div>

这样就而完成了简单的响应式布局。

yufanhui

关注

6
点赞
踩
19

收藏

觉得还不错? 一键收藏
3
评论
bootstrap4响应式轮播图详解

在开发过程中，既要采用框架，又要使用响应式布局。而bootstrap正好帮我们解决了这个问题。采用bootstrap框架快速开发，达到快速开发响应式轮播图的目的。1.引入bootstrap框架引入方式有两种：&lt;link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css"&...
复制链接

扫一扫