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">×</span></button>

三角符号

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

快速浮动

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

清除浮动

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