吴彦祖

您现在的位置是: 网站首页 >  个人博客 >  福利分享 > 

个人博客

Bootstrap4轮播如何实现响应式,附源码

2021-01-06 16:44:30 个人博客 15
按道理说,Bootstrap4的轮播其实是响应式的,在PC端和手机端都可以运行,但是有时候客户有些特殊需求:“比如,PC端显示PC端的图片,手机端的时候显示手机端的图片。”效果图如下

在线演示链接:http://jizhi.zskjtel.com/webui/ui/aaaaa/banner-16-1.html


按道理说,Bootstrap4的轮播其实是响应式的,在PC端和手机端都可以运行,但是有时候客户有些特殊需求:“比如,PC端显示PC端的图片,手机端的时候显示手机端的图片。”效果图如下

图片关键词

授人以鱼不如授人以渔,说下原理吧

实现原理:

1、一个轮播里面写2个img标签

2、使用Bootstrap自带的 工具类-Display 属性

3、给第一个img标签class加上d-none d-md-block(只在大屏幕显示),给第二个img标签class加上d-block d-sm-none(只在小屏幕显示)

图片关键词


优点:代码量少,完美符合PC端+手机端分别展示图片

缺点:部分CMS可能不支持手机端和PC端图片分别上传,这种轮播不适用那种场景。


文件下载:https://seoliye.lanzous.com/iYjQgk3nwkd

提取密码:bbak