缩略图
Bootstrap的缩略图组件是一个用于展示图片以及相关文字描述的常见UI元素。在实际应用中，它可以用于展示产品列表、新闻摘要等。
基本用法
通过<div>标签和class="thumbnail"即可创建一个缩略图容器，然后可以在其中添加图片和文字描述。
<div class="thumbnail">
<img src="image.jpg" alt="图片说明">
<div class="caption">
<h3>标题</h3>
<p>文字描述</p>
</div>
</div>尺寸
缩略图提供了三种尺寸：小号（.sm）、普通（默认）、大号（.lg）。只需在class属性中加上相应的类名即可。
-- -------------------- ---- -------
---- ------------------
---- --------------- -----------
---- ----------------
-----------
-----------
------
------
---- ---------------- ----
---- --------------- -----------
---- ----------------
-----------
-----------
------
------
---- ---------------- ----
---- --------------- -----------
---- ----------------
-----------
-----------
------
------圆角
缩略图可以通过添加.img-rounded类实现圆角效果。
<div class="thumbnail img-rounded">
<img src="image.jpg" alt="图片说明">
<div class="caption">
<h3>标题</h3>
<p>文字描述</p>
</div>
</div>边框
缩略图可以通过添加.img-bordered类实现边框效果。
<div class="thumbnail img-bordered">
<img src="image.jpg" alt="图片说明">
<div class="caption">
<h3>标题</h3>
<p>文字描述</p>
</div>
</div>警告框
Bootstrap的警告框组件用于向用户展示重要的信息、提示或者警告。在应用中，它可以用于验证表单输入、提醒用户操作结果等。
基本用法
通过<div>标签和class="alert"即可创建一个警告框容器，然后可以在其中添加文本内容。
<div class="alert alert-info"> 这是一条信息提示。 </div>
类型
警告框提供了四种类型：信息（.alert-info）、成功（.alert-success）、警告（.alert-warning）和危险（.alert-danger）。只需在class属性中加上相应的类名即可。
-- -------------------- ---- ------- ---- ------------ ------------ --------- ------ ---- ------------ --------------- ----- ------ ---- ------------ --------------- ------------- ------ ---- ------------ -------------- ----------- ------
可关闭
警告框可以通过添加一个包含class="close"的<button>标签实现可关闭的效果。
<div class="alert alert-info alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> 这是一条信息提示，点击右上角的×可以关闭。 </div>
带图标
警告框可以通过添加一个包含class="glyphicon"的<span>标签实现带图标的效果。
<div class="alert alert-info"> <span class="glyphicon glyphicon-info-sign"></span> 这是 > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/1487) ，转载请注明来源 [https://www.javascriptcn.com/post/1487](https://www.javascriptcn.com/post/1487)