开发者学堂课程【前端开发框架 Bootstrap 使用教程：17-Bootstrap 全局 css 样式-图片，响应式工具】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4236
17-Bootstrap 全局 css 样式-图片，响应式工具
目录
一、响应式图片
二、图片形状
三、响应式工具
1.可用的类
2.打印类
3.测试用例
一、响应式图片
在 Bootstrap 版本3中，通过为图片添加 .ing-responsive 类可以上图片支持响应式布局。其实质是为图片设置了max-width: 100%;、height;auto；和 display：block；属性，从而让
图片在其少元素中更好的缩放。
如果需要让使用了 .img-responsive 类的图片水平居中，请使用 ,center-biock 类,不要用 .text-center。请参考助手类章节了解更多关于 .center.block 的用法。
SVG 图像和 IE 8-10
在Internet Explorer 8-10中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称，为了解决这个问题 ，在出问题的地方添加 width：100% \9；即可。Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。
<img src=“…”class‘‘img-responsive”alt=“Responsive image”
二、图片形状
通过为<ing>元素添加以下相应的类，可以让图片呈现不同的形状。
跨浏览器兼容性
请时刻牢记：Internet Explorer 8不支持 CSS3中的圆角属性
三、响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。
1.可用的类
通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容
案例：sm 型
从v3.2.0版本起，形如.visibie-*-*的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：
因此，以超小屏幕（xs）为例，可用的.visible-*-*类是：.visible-xs-block、.visible-xs-inline 和visible-xs-inline-block。
.visible-xs、.visible-sm、.visible-md和 .visible-ig 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了<table>相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。
2.打印类
和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。
.visible-print 类也是存在的，但是从v3.2.0版本开始不建议使用。它与 .visible-print-block 类大致相同，除了<table>相关元素的特殊情况外。
3.测试用例
调整你的浏览器大小，或者用其他设备打开页面，都可以测试这些响应式工具类。
在...上可见
带有绿色标记的元素表示其在当前浏览器视口(viewport)中是可见的。
带有绿色标记的元素表示其在当前浏览器视口(viewport)中是隐藏的。
