Bootstrap响应式图片常见形式有几种，方法是什么-群英

您现在的位置是：群英 > 开发技术 > web开发

Bootstrap响应式图片常见形式有几种，方法是什么

Admin发表于 2022-07-15 17:55:05701 次浏览

上一篇： HTML中Bootstrap框架怎样用，步骤是什么

下一篇： Bootstrap的验证图标删除的操作是怎样的

在这篇文章中我们会学习到关于“Bootstrap响应式图片常见形式有几种，方法是什么”的知识，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。

响应式图片在项目应用中的两种常见形式：

分别是：屏幕尺寸改变，图片布局随之改变。为适应pc端和移动端设备转换，使用两套图片资源。

一：屏幕尺寸改变，图片布局随之改变

<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>

效果:

1.大于桌面图片（>996px）

2.平板（>768px <996px）

3.手机（<768px）

二：为适应pc端和移动端设备转换，使用两套图片资源

<div class="container">
       <img src="1.jpg" alt="" class="visible-xs img-responsive">
       <img src="2.jpg" alt="" class="hidden-xs img-responsive">
   </div>

两套图片资源，有利于防止页面卡顿和节省流量。

到此这篇关于“Bootstrap响应式图片常见形式有几种，方法是什么”的文章就介绍到这了，感谢各位的阅读，更多相关Bootstrap响应式图片常见形式有几种，方法是什么内容，欢迎关注群英网络资讯频道，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： bootstrap响应式图片

上一篇： HTML中Bootstrap框架怎样用，步骤是什么

下一篇： Bootstrap的验证图标删除的操作是怎样的

相关信息推荐

Java 如何快速,优雅的实现导出Excel

2022-05-30 17:02:15　

摘要：JAVA导出EXCEL表格的方法：首先用HSSFWorkbook打开或者创建“Excel文件对象”；然后用Sheet对象返回行对象，用行对象得到Cell对象；接着对Cell对象读写；最后将生成的文件放入响应的前端页面。

web和swoole的区别包括哪些

2022-05-06 16:15:43　