`
schy_hqh
  • 浏览: 542773 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

bootstrap3-thumbnails 缩略图

 
阅读更多

 



 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
	rel="stylesheet">
<style type="text/css">
body{
	margin-top: 50px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-lg-3">
				<!-- 缩略图样式 -->
				<a href="#" class="thumbnail">
					<img src="../../image/php-thumb.png">
				</a>
			</div>
			<div class="col-lg-3">
				<!-- 缩略图样式 -->
				<a href="#" class="thumbnail">
					<img src="../../image/mysql-thumb.png">
				</a>
			</div>
			<div class="col-lg-3">
				<!-- 缩略图样式 -->
				<a href="#" class="thumbnail">
					<img src="../../image/js-thumb.png">
				</a>
			</div>
		</div>
	</div>
	<!-- /container -->

	<script src="../../jquery/jquery-1.10.2.min.js"></script>
	<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
	rel="stylesheet">
<style type="text/css">
body{
	margin-top: 50px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-lg-4">
				<!-- 缩略图样式 -->
				<div class="thumbnail">
					<img src="../../image/shoes1.jpg">
					<div class="caption">
						  <h5>Product detail</h5>  
			              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore       magna aliqua.</p>  
			              <p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>  
					</div>
				</div>
			</div>
			<div class="col-lg-4">
				<!-- 缩略图样式 -->
				<div class="thumbnail">
					<img src="../../image/shoes2.jpg">
					<div class="caption">
						<h5>Product detail</h5>  
		              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
		              <p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
					</div> 
				</div>
			</div>
		</div>
	</div>
	<!-- /container -->

	<script src="../../jquery/jquery-1.10.2.min.js"></script>
	<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

 

  • 大小: 23.9 KB
  • 大小: 61.8 KB
分享到：
| bootstrap3-label&badge 标签和标号
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics