本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下bootstrap实现响应式图片的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。相关教程推荐:《bootstrap教程》
响应式图片在项目应用中的两种常见形式:
分别是:屏幕尺寸改变,图片布局随之改变。为适应pc端和移动端设备转换,使用两套图片资源。
一:屏幕尺寸改变,图片布局随之改变
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class = "container-fluid" >
<div class = "row" >
<div class = "col-md-3 col-sm-6 col-xs-12" >
<img src= "img/box-logo.png" alt= "" class = "img-responsive center-block" >
</div>
<div class = "col-md-3 col-sm-6 col-xs-12" >
<img src= "img/google-logo.png" alt= "" class = "img-responsive center-block" >
</div>
<div class = "col-md-3 col-sm-6 col-xs-12" >
<img src= "img/intuit-logo.png" alt= "" class = "img-responsive center-block" >
</div>
<div class = "col-md-3 col-sm-6 col-xs-12" >
<img src= "img/square-logo.png" alt= "" class = "img-responsive center-block" >
</div>
</div>
</div>
|
效果:
阅读剩余部分
相关阅读 >>
为什么bootstrap图标无法显示
jquery框架和bootstrap框架区别
bootstrap是什么,有什么特点?
bootstrap-table 表格行内编辑实现
如何运用bootstrap进行页面布局
bootstrap的优缺点是什么?
bootstrap框架优点是什么
bootstrap官网的组件是什么
bootstrap怎么改字体
bootstrap 如何创建错误提示
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 浅谈bootstrap响应式图片的实现方法