bootstrap系列之十七缩略图和警告框
程序员文章站
2024-02-03 20:38:52
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo01</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
<script language="JavaScript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/pic01.jpg" alt="pic">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/pic01.jpg" alt="pic">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/pic01.jpg" alt="pic">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/pic01.jpg" alt="pic">
</a>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="./img/pic01.jpg" alt="pic">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</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>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="./img/pic01.jpg" alt="pic">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</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>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="./img/pic01.jpg" alt="pic">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</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>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo01</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
<script language="JavaScript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<p>这里是提示信息</p>
</div>
<hr />
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<p>这里是提示信息<a href="#" class="alert-link">百度</a></p>
</div>
</div>
</body>
</html>
下一篇： JS实现全屏预览F11功能的示例代码