1、bootstrap提供了js插件——轮播图
我们还是照旧,直接拿过来用,需要改的地方再说。
2、修改
小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg(保存大图)和data-img-xs(保存小图)属性保存图片的路径,利用jQuery的data函数取出data-xxxx属性进行动态加载。
图片居中显示:大图用背景图片来做比较好一点,小图用img来做比较好一点(因为小图的话需要等比例缩放,用背景图做不到等比例缩放)。
承载轮播图的盒子高度:大图的的时候用图片的高度,小图自适应,所以要用到媒体查询,设置容器高度。
3、代码
以上所述是小编给大家介绍的使用BootStrap建立响应式网页——通栏轮播图(carousel)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。