缩略图
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、警示框(关闭按钮)
- 首先在基本警示框“alert”的基础上添加“alert-dismissable”类名
- 在<button>上添加"close"类名,实现警示框关闭按钮的样式
- 为<button>设置了自定义属性data-dismiss="alert"(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)
代码示例:
<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</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
网友评论