Bootstrap中的图片组件和轮廓组件举例分析
这篇文章主要介绍“Bootstrap中的图片组件和轮廓组件举例分析”，在日常操作中，相信很多人在Bootstrap中的图片组件和轮廓组件举例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Bootstrap中的图片组件和轮廓组件举例分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
站在用户的角度思考问题，与客户深入沟通，找到榆次网站设计与榆次网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟空间、企业邮箱。业务覆盖榆次地区。
1 图片
本文节将学习如何让图片支持响应式行为（这样它们就不会超出父元素的范围）以及如何通过类（class）添加些许样式。
1.1 响应式图片
通过 Bootstrap 所提供的.img-fluid 类让图片支持响应式布局。其原理是将max-width: 100%; 和 height: auto; 赋予图片，以便随父元素一起缩放。
图片演示
上面container是为了让图片居中显示切四周有边距，不是图像组件的一部分。
10.1.2 图片缩略图
除了通用类提供的提供的border-radius外，你还可以使用.img-thumbnail 使图片的外观具有 1px 宽度的圆形边框。
图片演示
这个组件也是响应式的，不过我只给出了截图,上面css的样式是为了让图片不靠近边上，不要不可能看不到边框，其实直接使用container也一样，在此只是为了不使用container免得大家以为container也是其中一部分。
1.3 picture标签
picture元素通过包含一个或多个source元素和一个img元素再结合media（媒体查询）来使用，
根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素，一个picture元素无论指定几个source，只会显示其中的一个或者img。
如果你使用 元素为某个 ![]()
![]()
source元素排列是有顺序的。媒体查询的值，如果是max-width，则从小到大排序；如果是min-width，则按从大到小的顺序排列。下面是源码，源码中js代码是获取屏幕宽度，作为对照。
图片演示
