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

最新推荐文章于 2018-12-13 17:58:00 发布

原创最新推荐文章于 2018-12-13 17:58:00 发布 · 477 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #响应式 #表单

本文介绍如何在Bootstrap中实现响应式图片，并探讨不同图片样式（如圆角、圆形和预览图）。此外，还介绍了多种辅助类，包括情景文本颜色、情景背景色、关闭按钮等，以及如何应用这些样式来增强网页设计。

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>