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

来源：互联网发布：手机围棋打谱软件编辑：程序博客网时间：2024/04/28 07:12

响应式图片

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

SVG 图像和 IE 8-10

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

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

图片形状

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

跨浏览器兼容性

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

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

辅助类
文本字体颜色类:
<span style="font-size:18px;"><p class="text-muted">...</p><p class="text-primary">...</p><p class="text-success">...</p><p class="text-info">...</p><p class="text-warning">...</p><p class="text-danger">...</p></span>

文本背景颜色类:
<span style="font-size:18px;"><p class="bg-primary">...</p><p class="bg-success">...</p><p class="bg-info">...</p><p class="bg-warning">...</p><p class="bg-danger">...</p></span>

关闭按钮
通过使用一个象征关闭的图标，可以让模态框和警告框消失。
<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。
<span class="caret"></span>

快速浮动
<div class="pull-left">...</div><div class="pull-right">...</div>

显示与隐藏
<div class="show">...</div><div class="hidden">...</div>

0 0