Skip to main content

内容

使用常用HTML元素显示内容的样式,包括标准化、排版、图像、表格等。

--本章内容翻译由:樊潇洁友情提供

图片

Bootstraps优化图片,添加了响应式的行为(因此它们绝不会大过其父元素),并通过样式类给它添加轻量级的样式。

内容

响应式图片

在Bootstrap中,给图片应用.img-reponsive类以及max-width: 100%height:auto;样式,使其具有响应性,并根据父元素的大小缩放。

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

SVG图片以及 IE 9-10

在IE9和IE10浏览器中,带着.img-responsive类的SVG图片是尺寸不均称的。为了修正它,在必要的地方添加width: 100% \9属性。由于它会导致其它图片格式的混乱,所以Bootstrap没有自动应用它。

图片形状

向一个<img>元素添加类,轻松地在项目中样式化图片。

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

对齐图片

使用浮动助手类或者文本对齐类可以实现图片对齐。一个简单的居中类也可以用在block块级图片上。

A generic square placeholder image with rounded corners A generic square placeholder image with rounded corners
<img src="..." class="img-rounded pull-left" alt="...">
<img src="..." class="img-rounded pull-right" alt="...">
A generic square placeholder image with rounded corners
<img src="..." class="img-rounded center-block" style="display: block;" alt="...">
A generic square placeholder image with rounded corners
<div class="text-center">
  <img src="..." class="img-rounded" alt="...">
</div>