Bootstrap 学习之 (五) ------ 图片及辅助类

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性，从而让图片在其父元素中更好的缩放。

SVG 图像和 IE 8-10

在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。

 src="..." class="img-responsive" alt="Responsive image">

图片形状

通过为  元素添加以下相应的类，可以让图片呈现不同的形状。

跨浏览器兼容性

请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。

 src="..." alt="..." class="img-rounded">
 src="..." alt="..." class="img-circle">
 src="..." alt="..." class="img-thumbnail">

辅助类

文本字体颜色类:

...
...
...
...
...
...

文本背景颜色类:

...
...
...
...
...

关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失。

 type="button" class="close"> aria-hidden="true">× class="sr-only">Close

三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。

 class="caret">

快速浮动

 class="pull-left">...

class="pull-right">...

显示与隐藏

 class="show">...

class="hidden">...