缩略图组件配合栅格系统使用及弹出警告

最新推荐文章于 2020-11-07 18:11:47 发布

原创最新推荐文章于 2020-11-07 18:11:47 发布 · 378 阅读

1 ·

CC 4.0 BY-SA版权

缩略图可以把很大的图片，变得比较小，配合栅格系统做成响应式
在这里插入图片描述

<div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>

弹出警告的写法

**
在这里插入图片描述

不同颜色的弹出框的写法

<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>