bootstrap4响应式轮播图详解

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

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

1.引入bootstrap框架 

引入方式有两种：

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

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

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

2.轮播图

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

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

3.轮播图详解

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

在屏幕为640px以上时要使用background:url("大图")来显示，并将设置为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以下时要使用来显示。设置display:block。

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

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