Bootstrap 是一个流行的前端框架，为开发人员提供了一系列易于使用和自定义的组件。其中，缩略图和警告框是两个常用的组件，本文将介绍它们的使用方法以及与其他组件的结合。
缩略图
缩略图是一种展示图片的简洁方式，通常用于在列表或网格中显示多个图片。Bootstrap 提供了 .thumbnail 类来实现缩略图的样式，并可以与其他组件结合使用。
基本使用方法
通过以下 HTML 代码创建简单的缩略图：
<div class="thumbnail"> <img src="example.jpg" alt=""> </div>
这里我们使用了 .thumbnail 类作为容器，内部包含一个 img 元素来显示图片。Bootstrap 会自动为其添加一些样式，例如边框、圆角等。
设置大小和比例
缩略图的大小可以通过设置 width 和 height 属性来实现。此外，Bootstrap 还提供了一些预定义的比例类，如 .img-thumbnail、.img-square 和 .img-circle 等，方便快速设置不同形状的缩略图。
-- -------------------- ---- ------- ---- ------------------ ---- ----------------- ------ ----------- ------------- ------ ---- ------------------ ---- ----------------- ------ ---------------------- ------ ---- ------------------ ---- ----------------- ------ ------------------- ------ ---- ------------------ ---- ----------------- ------ ------------------- ------
嵌套
缩略图还可以与其他组件嵌套使用，例如面板、列表等。这里我们以面板为例：
-- -------------------- ---- -------
---- ------------ ---------------
---- ---------------------------------
---- -------------------
---- ------------
---- -----------------
---- ------------------
---- ----------------- -------
---- ----------------
-----------
-----------
------
------
------
---- -----------------
---- ------------------
---- ----------------- -------
---- ----------------
-----------
-----------
------
------
------
---- -----------------
---- ------------------
---- ----------------- -------
---- ----------------
-----------
-----------
------
------
------
------
------
------这里我们在面板的 panel-body 中创建了一个网格布局，并在其中嵌套了三个缩略图，每个缩略图都包含一个标题和描述信息。通过这种方式可以快速创建一个带有图片的列表或网格。
警告框
警告框是一种用于显示重要信息或提示用户的组件，通常用于表单验证、错误提示等场景。Bootstrap 提供了 .alert 类来实现警告框的样式，并可以与其他组件结合使用。
基本使用方法
通过以下 HTML 代码创建简单的警告框：
<div class="alert alert-success"> <strong>成功！</strong> 操作已完成。 </div>
这里我们使用了 .alert 类作为容器，内部包含文本内容和一个可选的关闭按钮。Bootstrap 会自动为其添加一些样式，例如背景色、边框等。
设置类型和关闭按钮
警
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2307