您的位置：首页 > Web前端 > BootStrap

BootStrap页头和缩略图

2015-08-06 23:32 615 查看

摘自《极客学院》

1、效果图：

2、html代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.min.css">
<title>页头与缩略图</title>
</head>
<body>
<div class="page_header">
<h1>花果山大钻风<small>泡泡</small></h1>
</div>

<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="psb%20(5).gif">
</a>
</div>
</div>

<div class="row">
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="psb%20(5).gif">
<div class="caption">
<h3>这是一幅动态图</h3>
<p>我知道</p>
<p>
<a href="#" class="btn btn-info">排除</a>
<a href="#" class="btn btn-default">选中</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航