bootstrap+jquery应用手机自适应兼容

最新推荐文章于 2025-02-05 18:00:14 发布

原创最新推荐文章于 2025-02-05 18:00:14 发布 · 732 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #bootstrap #javascript

这篇文章展示了如何使用HTML、CSS和jQuery创建一个响应式的图片展示页面，通过Bootstrap框架实现布局，结合媒体查询适应不同设备，点击按钮显示详细图片，同时包含关闭功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 html代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>古镇寻迹</title>
		<link rel="stylesheet" href="css/bootstrap.css" >
	</head>
	
	<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	
	<body>
		<div class="container-fluid" >
		     <!--背景图-->
		     <div class="row">
				  <div class="col-xs-12">
				  		<img src="img/puhui/puhui8/one/body1.jpg" class="img-responsive">
				        <img src="img/puhui/puhui8/zhegai.png"  class="beijing img-responsive">
				  </div>
				 
			</div>
			
			
			<!--背景图上的第一层级-->
			<div class="row postonecss">
				
				<!--背景图上的第一个图-->
				  <div class="col-xs-12 imgone">
				  		<img src="img/puhui/puhui8/one/button1.png" zbutton="1" class="imggongone img-responsive">
				  </div>
				  <!--背景图上的第二个图-->
				  <div class="col-xs-12">
				  		<img src="img/puhui/puhui8/one/button2.png" zbutton="2" class="imggongone img-responsive">
				  </div>
				  
				  <!--背景图上的第三个图-->
				  <div class="col-xs-12 ">
				  		<img src="img/puhui/puhui8/one/button3.png" zbutton="3" class="imggongone img-responsive">
				  </div>
				  <!--背景图上的第四个图-->
				  <div class="col-xs-12">
				  		<img src="img/puhui/puhui8/one/button4.png" zbutton="4" class="imggongone img-responsive">
				  </div>
				  <!--背景图上的第五个图-->
				  <div class="col-xs-12 ">
				  		<img src="img/puhui/puhui8/one/button5.png" zbutton="5" class="imggongone img-responsive">
				  </div>
				  <!--背景图上的第六个图-->
				  <div class="col-xs-12">
				  		<img src="img/puhui/puhui8/one/button6.png" zbutton="6" class="imggongone img-responsive">
				  </div>
				  <!--背景图上的第七个图-->
				  <div class="col-xs-12 ">
				  		<img src="img/puhui/puhui8/one/button7.png" zbutton="7" class="imggongone img-responsive">
				  </div>
				  <!--背景图上的第八个图-->
				  <div class="col-xs-12">
				  		<img src="img/puhui/puhui8/one/button8.png" zbutton="8" class="imggongone img-responsive">
				  </div>
				  <!--背景图上的第九个图-->
				  <div class="col-xs-12 ">
				  		<img src="img/puhui/puhui8/one/button9.png" zbutton="9" class="imggongone img-responsive">
				  </div>
				  <!--背景图上的第十个图-->
				  <div class="col-xs-12">
				  		<img src="img/puhui/puhui8/one/button10.png" zbutton="10" class="imggongone img-responsive">
				  </div>
				  
				  
			</div>
			
		
		
		   <!--背景图上的第二层级-->
		    <div  class="row posttwocss">
		    	
		    	<!--背景图上的第一个图-->
				  <div class="col-xs-12 imgtwo">
				  		<img src="img/puhui/puhui8/two/1.png" class="imggongtwo img-responsive">
				        <!--<img src="img/puhui/yinpin.png" class="imggongthree img-responsive">
						-->
						<div class="col-xs-12 posthreecss">
						  		<img src="img/puhui/yinpin.png" class="imggongthree img-responsive">
						  </div>
				  
				  </div>
				  <!--关闭按钮-->
				  <div class="col-xs-12 ">
				  		<img src="img/puhui/guanbi.png" class="guandatu img-responsive">
				  </div>
		    	
		    </div>
		    
		    
		    
		</div>
		
	</body>
</html>

2、css样式代码

<style>
		.container-fluid{
			padding-right: 0px; 
            padding-left: 0px;
		}
		.col-xs-1,.col-xs-2,.col-xs-3,
		.col-xs-4,.col-xs-5,.col-xs-6,
		.col-xs-7,.col-xs-8,.col-xs-9,
		.col-xs-10,.col-xs-11,.col-xs-12{
			padding: 0px;
			margin: 0px;
		}
		.row{
			padding: 0px;
			margin: 0px;
		}
		
		
		.postonecss{
			position: absolute;
			z-index: 1000;
			top:1%;
			
		}
		
		
		/*遮盖背景界面*/
		.beijing{
			position: absolute;
		    z-index: 2000;
		    top: 0.1%;
		    display: none;
		}
		/*第二层级界面*/
		.posttwocss{
			position: absolute;
			z-index: 3000;
			height: 100%;
			top:1%;
			display: none;
		}
		
		
		.imgone {
			
		    /*上下间距*/
		    margin-top: 25%;
		  
		}
		.imggongone {
			/*左右间距*/
		    padding-left: 18%;
		    /*图片最大展示*/
		    max-width: 80%;
		    /*上下间距*/
		    margin-top: 6%;
		  
		  
		}
		
		
		/*通过媒体查询，适配不同的手机端界面*/
		@media (min-width: 375px) { 
			.imgtwo {
					    height: 71.6%;
					    overflow-y: auto;
					    margin-top: 33.3%;
					}
		
		}
		@media (min-width: 390px) { 
			.imgtwo{
					height: 58.5%;
				    overflow-y: auto;
				    margin-top: 33.5%;
					
				}
		
		}
		@media (min-width: 414px) { 
			.imgtwo{
					height: 58.6%;
				    overflow-y: auto;
				    margin-top: 33.3%;
					
				}
		
		}
		.guandatu{
			
			margin-left: 42%;
		    max-width: 12%;
		    margin-top: 11%;
		   /* display: none;*/
		}
		/*第三层级界面*/
		.posthreecss{
			position: absolute;
			
			top:17%;
			/*display: none;*/
		}
		
		.imggongthree{
			
			padding-left: 6.5%;
			max-width: 94%;
			
		}
		
	</style>

3、jquery 代码

<script type="text/javascript">  
		 $(function(){
		 	
		 	//点击按钮
		 	$(document).on("click",".imggongone",function(){	
		 	 	 
		 	 	 //获取点击的第几个按钮
		 	 	 var zbuttonId = $(this).attr("zbutton");
		 	 	 $(".imggongtwo").attr("src","img/puhui/puhui8/two/"+zbuttonId+".png");
		 	     $(".beijing").css("display","block");
		 	     $(".posttwocss").css("display","block");
		 	    
		 	 	
		 	 }) 
		 	
		 	 //关闭
		 	 $(document).on("click",".guandatu",function(){	
		 	 	 
		 	 	
		 	     $(".beijing").css("display","none");
		 	     $(".posttwocss").css("display","none");
		 	    
		 	 })  
		 	
		 })
		
	</script>

4、注意事项

由于bootstrap的js文件也要依赖于jquery，所以在对这些资源文件导入方式封装时需要注意顺序，该报错情况只需把jquery放在bootstrap的上面即可（先引入jquery,再引入bootstrap）

  <script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>

5.感谢你的浏览访问

工作几年，略有心得，然很少整理成文，平常工作中浏览了不少道友的好文章，受益良多。
顾也开始写一些文章，希望能与各位道友分享进步！！！！
如果有用，欢迎各位点赞评论，若有不足，亦可指正！！！