bootstrap3-thumbnails 缩略图

最新推荐文章于 2020-09-07 22:01:41 发布

schy_hqh

最新推荐文章于 2020-09-07 22:01:41 发布

阅读量308

点赞数

分类专栏： WEB前端@BootStrap3 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/schy_hqh/article/details/84515651

版权

WEB前端@BootStrap3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

schy_hqh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap3-thumbnails 缩略图

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet&quo
复制链接

扫一扫

专栏目录