制作缩率图和警告条

最新推荐文章于 2024-06-16 19:58:55 发布

.Passion

最新推荐文章于 2024-06-16 19:58:55 发布

阅读量194

点赞数

本文链接：https://blog.csdn.net/qq_43923045/article/details/104101300

版权

bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	 

</head>
<body>
	<!-- 
	 
	 警告框
	 -->
		  <hr>
		  <hr>
	  <div class="container">
		  <div class="alert alert-warning">
			  <button class="close" data-dismiss="alert">&times;</button>
			  <p>警告，您的余额不足，请充值</p>
		  </div>
	  </div>
	  
	  <div class="container">
	  		  <div class="alert alert-info">
	  			  <button class="close" data-dismiss="alert">&times;</button>
	  			  <p>警告，您的余额不足，请充值</p>
	  		  </div>
	  </div>
	  
	  <!--
	  缩略图样式
	  -->
	  
	  <div class="container">
	  	<div class="row">
			<div class="col-xs-6 col-md-3">
				<a href="" class="thumbnail">
					
					<img src="img/1.jpg" alt="">
				</a>
			</div>
			<div class="col-xs-6 col-md-3">
				
				<a href="" class="thumbnail">
					
					<img src="img/1.jpg" alt="">
				</a>
			</div>
			<div class="col-xs-6 col-md-3">
				<a href="" class="thumbnail">
					
					<img src="img/1.jpg" alt="">
				</a>
			</div>
			<div class="col-xs-6 col-md-3">
				<a href="" class="thumbnail">
					
					<img src="img/1.jpg" alt="">
				</a>
			</div>
		</div>
	  </div>
	 
	 
	 
	 
	 
	
</body>
</html>

col-xs-6 小屏幕只能放两个
col-md-3 中等屏幕可以放四个

如图所示：
在这里插入图片描述

在这里插入图片描述

图文

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	 

</head>
<body>
	<hr>
	<br>
 
	  <!--
	  缩略图样式
	  -->
	  
	  <div class="container">
	  	<div class="row">
			<div class="col-xs-6 col-md-3">
				<div class="thumbnail">
					 
						
					<img src="img/1.jpg" alt="">
					<div class="caption">
						<h3>label</h3>
						<p>xx</p>
						<p>
							<a href="" class="btn btn-primary"></a>
						</p>
					</div> 
				</div>
			</div>
			 <div class="col-xs-6 col-md-3">
			 	<div class="thumbnail">
			 		 
			 			
			 		<img src="img/1.jpg" alt="">
			 		<div class="caption">
			 			<h3>label</h3>
			 			<p>xx</p>
			 			<p>
			 				<a href="" class="btn btn-primary"></a>
			 			</p>
			 		</div> 
			 	</div>
			 </div>
			 <div class="col-xs-6 col-md-3">
			 	<div class="thumbnail">
			 		 
			 			
			 		<img src="img/1.jpg" alt="">
			 		<div class="caption">
			 			<h3>label</h3>
			 			<p>xx</p>
			 			<p>
			 				<a href="" class="btn btn-primary"></a>
			 			</p>
			 		</div> 
			 	</div>
			 </div>
			 <div class="col-xs-6 col-md-3">
			 	<div class="thumbnail">
			 		 
			 			
			 		<img src="img/1.jpg" alt="">
			 		<div class="caption">
			 			<h3>label</h3>
			 			<p>xx</p>
			 			<p>
			 				<a href="" class="btn btn-primary"></a>
			 			</p>
			 		</div> 
			 	</div>
			 </div>
		</div>
	  </div>
	 
	 
	 
	 
	 
	
</body>
</html>