BootStrap（2）——图片、辅助类、响应式工具、表单

Bootstrap图片

响应式图片

bootstrap3之后，通过向图片添加"img-responsive"类，可以让它支持响应式布局。它的实质是为图片设置了"max-width;100%;"、"height:auto"、"display:block"，从而让图片在它的父元素中更好地缩放。如果需要让”img-responsive”类的图片局中，使用".center-block"而不是".text-block"。

图片形状

通过为<img>元素添加以下相应类

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

以上形状分别是圆角矩形、圆形、预览图。

辅助类

情景文本颜色

<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>

情景背景色

<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>

关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符号

<span class="caret"></span>

快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

清除浮动

<!-- Usage as a class -->
<div class="clearfix">...</div>