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

Bootstrap图片

响应式图片

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

图片形状

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

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

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

辅助类

情景文本颜色

"text-muted">...
"text-primary">...
"text-success">...
"text-info">...
"text-warning">...
"text-danger">...

情景背景色

"bg-primary">...
"bg-success">...
"bg-info">...
"bg-warning">...
"bg-danger">...

关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×span>button>

三角符号

<span class="caret">span>

快速浮动

"pull-left">...
"pull-right">...

清除浮动

<div class="clearfix">...div>