Loading...

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

热度:

内容

在线演示链接: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


发布时间
2021-12-04 17:15:22
更新时间
2021-12-04 17:15:22
简介
按道理说,Bootstrap4的轮播其实是响应式的,在PC端和手机端都可以运行,但是有时候客户有些特殊需求:“比如,PC端显示PC端的图片,手机端的时候显示手机端的图片。”效果图如下

网址

立即前往

相关推荐

为您推荐相关网址

Hello,欢迎来咨询~

遇到问题?请给我们留言

标签guestbookform报错:该栏目下没有新增表单属性。