Bootstrap缩略图与警示框

缩略图

1、缩略图（图片）

• .badge：在<img>的父<a>上添加thumbnail类名

<a href="#" class="thumbnail">
  <img src="...">
</a>

示例： thumbnail.png

2、缩略图（图片描述）

• .caption：在<img>后添加带caption类名的div放描述内容

<a href="#" class="thumbnail">
  <img src="...">
</a>
<div class="caption">
  <h3>标题</h3>
  <p>文本内容...</p>
  <p>
     <a href="##" class="btn btn-primary">选项1</a>
     <a href="##" class="btn btn-info">选项2</a>
  </p>
</div>  

示例： caption.png

3、利用Bootstrap网格系统玩转缩略图

• .col-xs：超小屏幕 手机 (<768px)
• .col-sm：小屏幕 平板 (≥768px)
• .col-md：中等屏幕 桌面显示器 (≥992px)
• .col-lg：大屏幕 大桌面显示器 (≥1200px)
  （一行满值为12）

<div class="row">
  <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail">
          <img src="http://i.png" style="height: 180px; width: 100%; display: block;" alt="">
      </a>
      <div class="caption">   
          <h3 style="text-align:center;">A</h3>
      </div>  
  </div>
   <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail">
          <img src="http://i.png" style="height: 180px; width: 100%; display: block;" alt="">
      </a>
      <div class="caption">
          <h3 style="text-align:center;">B</h3>
      </div>  
  </div>
  <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail">
          <img src="http://i.png" style="height: 180px; width: 100%; display: block;" alt="">
      </a>
      <div class="caption">
          <h3 style="text-align:center;">C</h3>
      </div>  
  </div>
  <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail">
          <img src="http://i.png" style="height: 180px; width: 100%; display: block;" alt="">
      </a>
      <div class="caption">
          <h3 style="text-align:center;">D</h3>
      </div>  
  </div>
</div>

示例： col-xs-6.png
col-md-3.png

警示框

1、警示框（基本样式）

• .alert-success：成功警示框，背景、边框和文本都是绿色
• .alert-info：信息警示框，背景、边框和文本都是浅蓝色
• .alert-warning：警告警示框，背景、边框和文本都是浅黄色
• .alert-danger：错误警示框，背景、边框和文本都是浅红色

<div class="alert alert-success" role="alert">操作成功！</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
<div class="alert alert-danger" role="alert">您输入的密码有误</div>

示例： alert-XX.png

2、警示框（关闭按钮）

1. 首先在基本警示框“alert”的基础上添加“alert-dismissable”类名
2. 在<button>上添加"close"类名，实现警示框关闭按钮的样式
3. 为<button>设置了自定义属性data-dismiss="alert"（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）
   代码示例：

<div class="alert alert-success alert-dismissable" role="alert">
  <button class="close" type="button" data-dismiss="alert">&times;</button>
  恭喜您操作成功！
</div>

示例： 警示框关闭按钮.gif

3、警示框（链接）

• .alert-link：给警示框加的链接添加“alert-link”类名，使链接文本高亮显示

<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong>
   This 
   <a href="#" class="alert-link">alert needs your attention</a>
   , but it's not super important.
</div>

示例： alert-link.png