Bootstrap学习之缩略图组件和警示框组件的使用

1.缩略图组件的使用

Bootstrap缩略图组件可以帮助我们快速地展示多个图片或者视频的缩略图。常见的应用场景比如图片列表、产品展示等。以下是缩略图组件的基本结构和常用属性：

<div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
    <h3>标题</h3>
    <p>简介</p>
    <p><a href="#" class="btn btn-primary" role="button">按钮</a> <a href="#" class="btn btn-default" role="button">按钮</a></p>
  </div>
</div>

常用属性：

src: 图片路径。

alt: 图片无法显示时的替代文本。

class="thumbnail": 必须加上，定义缩略图样式。

class="caption": 缩略图的标题和简介容器。可以在容器内加入标题、简介和按钮等其他元素。

<a href="#" class="btn btn-primary" role="button">按钮</a>: 在caption容器内添加按钮。

接下来我们来实现一个简单的应用场景：一个商品列表页面，包含多个商品缩略图。

<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="img/thumbnail1.jpg" alt="...">
      <div class="caption">
        <h3>商品标题</h3>
        <p>商品简介</p>
        <p><a href="#" class="btn btn-primary" role="button">查看详情</a></p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="img/thumbnail2.jpg" alt="...">
      <div class="caption">
        <h3>商品标题</h3>
        <p>商品简介</p>
        <p><a href="#" class="btn btn-primary" role="button">查看详情</a></p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="img/thumbnail3.jpg" alt="...">
      <div class="caption">
        <h3>商品标题</h3>
        <p>商品简介</p>
        <p><a href="#" class="btn btn-primary" role="button">查看详情</a></p>
      </div>
    </div>
  </div>
</div>

上面的代码中，我们使用了栅格系统来排列三个缩略图，每个缩略图都包含一个图片和一个caption容器，caption容器内包含商品标题、商品简介和一个查看详情的按钮。以下是页面效果图：

参考链接：Bootstrap 文档

2.警示框组件的使用

Bootstrap警示框组件可以用来展示警告、成功、信息或者错误等提示。以下是警示框组件的基本结构和常用属性：

<div class="alert alert-warning" role="alert">
  警示框内容
</div>

常用属性：

class="alert": 必须加上，定义警示框样式。可以使用alert-info、alert-success、alert-warning、alert-danger等类名来定义不同的样式。

role="alert": 告诉屏幕阅读器这是一个警示框

当然，警示框组件也可用添加其他元素（如关闭的 x 按钮）。以下是一个包含关闭按钮的警示框组件：

<div class="alert alert-warning alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
  警示框内容
</div>

常用属性：

class="alert-dismissible fade in"：使用这些类名可以让警示框出现关闭按钮。

<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>：关闭按钮的HTML代码，可以直接拷贝使用。

data-dismiss="alert": 点击关闭按钮后自动隐藏警示框

接下来我们来实现一个简单的应用场景：在注册页面，如果用户输入的信息有误，就用警示框来提示用户。以下是代码：

<div class="alert alert-danger" role="alert">
  <h4>错误</h4>
  <hr>
  <p>用户名已存在，请使用其他用户名注册。</p>
</div>

上面的代码中，我们使用alert-danger这个类名来显示红色的警示颜色，警示框内包含一个标题和一段错误信息。以下是页面效果图：

参考链接：Bootstrap 文档