bootstrap九宫格布局，点击其中一个DIV，弹框显示其内容

最新推荐文章于 2024-05-24 15:22:37 发布
最新推荐文章于 2024-05-24 15:22:37 发布
阅读量1w 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ankora/article/details/78295445
版权 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<style>
		.div_border{ border:1px solid red }
	</style>
</head>


<body>

	<div class="container">
		 <div class="row">
			<div style ="width:80px;height:80px" class="col-xs-6 col-lg-6 col-md-6 div_border" >
				<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>业务员</th>
						<th>出单量</th>
						<th>总保费</th>
					</tr>
				</thead>
				<tbody>
						<tr>
							<td>aaaaaaa</td>
							<td>bbbbbbbb</td>
							<td>ccccccccc</td>
						</tr>
							<tr>
							<td>aaaaaaa</td>
							<td>bbbbbbbb</td>
							<td>ccccccccc</td>
						</tr>
							<tr>
							<td>aaaaaaa</td>
							<td>bbbbbbbb</td>
							<td>ccccccccc</td>
						</tr>
							<tr>
							<td>aaaaaaa</td>
							<td>bbbbbbbb</td>
							<td>ccccccccc</td>
						</tr>
							<tr>
							<td>aaaaaaa</td>
							<td>bbbbbbbb</td>
							<td>ccccccccc</td>
						</tr>
							<tr>
							<td>aaaaaaa</td>
							<td>bbbbbbbb</td>
							<td>ccccccccc</td>
						</tr>	<tr>
							<td>aaaaaaa</td>
							<td>bbbbbbbb</td>
							<td>ccccccccc</td>
						</tr>	<tr>
							<td>aaaaaaa</td>
							<td>bbbbbbbb</td>
							<td>ccccccccc</td>
						</tr>
							<tr>
							<td>aaaaaaa</td>
							<td>bbbbbbbb</td>
							<td>ccccccccc</td>
						</tr>
							<tr>
							<td>aaaaaaa</td>
							<td>bbbbbbbb</td>
							<td>ccccccccc</td>
						</tr>
	
				</tbody>
			</table>
			</div>
			<div style ="width:80px;height:80px" class="col-xs-6 col-lg-6 col-md-6 div_border">
				2
			</div>
		 </div>
		 
		  <div class="row">
			<div class="col-xs-6 col-lg-6 col-md-6 div_border" >
				4
			</div>
			<div class="col-xs-6 col-lg-6 col-md-6 div_border">
				5
			</div>
		 </div>
		 
		  <div class="row">
			<div class="col-xs-6 col-lg-6 col-md-6 div_border" >
				7
			</div>
			<div class="col-xs-6 col-lg-6 col-md-6 div_border">
				8
			</div>

		 </div>
	</div> <!-- /container -->
	<!-- Large modal -->
<!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>-->
	<!-- 模态框 -->
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
	  <div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
		  算法
		</div>
	  </div>
	</div>

	

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script>
		$(
			function()
			{
				//alert('ready');
				$('.div_border').click(
					function()
					{
						//alert($(this).html());
						$('.modal-content').html( $(this).html() );
						
						$('#myModal').modal('toggle');
					}
				);
			}
		);
	</script>
</body>

</html>

ankora
关注
专栏目录
原神九宫格拼图游戏ES6+bootstrap+cookie
weixin_44453019的博客
11-25 3152
项目说明： 本项目是一个拼图游戏项目，使用了ES6语法、解构、Bootstrap、Cookie ， 完成的功能如下： 1、点击 「开始游戏」 按钮，计时开始并能点击图片进行移动 2、点击「再次挑战」按钮，可以随机重置本次拼图 3、点击「更换图片」按钮，可以切换拼图图片 4、点击「查看记录」按钮，可以查看当前最快记录 5、点击「项目说明」按钮，就能看到这些字了 6、拼图位置由随机生成的二维数组决定，对该数组进行了是否可以被还原的判断，确保每次拼图的位置都是可以还原的 7、判断拼图是否可还原算法简单说明： 　　
图片中心放大原理
热门推荐
weixin_44649507的博客
02-11 2万+
九宫格图片布局也是一些常见的布局，点击图片的时候图片会放大原来的倍数。 图片放大主要的两点就是： **1.**将css的float定位，转换成用js的绝对定位 **2.**从中心放大缩小物体 实现的步骤 1.先通过css的float定位，ul宽度设置成li宽的倍数（例子中li的宽是122，没行显示3 个li，所以ul宽设置成366）。使其9张图片在一个div下显示出来。 2.然后利用循环获取到每个...
九宫格的布局你能够想到哪些办法实现？它们各自的优缺点是什么？
m0_37621064的博客
11-13 1335
1.背景介绍 要做九宫格，首先得明白什么是盒子模型。盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更 好的排版。 我们可以把所有HTML元素都可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素
bootstrap实现九宫格效果（猫捉老鼠游戏）
最新发布
男儿何必尽成功的博客
05-24 307
九宫格的左上角是一只小猫图片，右下角是小老鼠图片，其他7个方框都是数字。方框被点击时背景图片就会变成小猫，每次点击都相当于小猫移动了一步，直到点击老鼠，老鼠的图片被替换，相当于猫捉到老鼠了。最近，孩子的幼儿园让家长体验“半日助教活动”，每个家长需要讲授15-20分钟的课程。作为一名程序员，实在没有能教的课程，只能做了一个小游戏，带着小朋友们熟悉数字。图片我就不上传了，读者自行放几张就OK~快去试试吧~~~
[学习笔记] bootstrap (九) :布局组件[缩略图,警告,进度条,多媒体列表,列表组,面板,wells]
这不是博客
01-03 976
缩略图<div class="thumbnail"> <img src="11.png" alt="kk" /> <div class="caption"> <h3>商品名称</h3> <p>价格: $<strong>99.9</strong></p> <p><a href="#" >加入购物车</a> </p> </div>
css之九宫格布局
诸葛苍穹
03-18 1841
/*CSS源代码*/ .wrap { padding: 10px 0 0 10px; width: 300px; overflow: hidden; }.wrap .item { position: relative; float: left; margin-left: -10px; margin-top: -10px; width: 80px; height:
九宫格ui后台模板
04-01
【九宫格UI后台模板】是一种常见的网页设计布局方式，尤其在管理后台界面设计中广泛应用。九宫格设计模式以其清晰、规整的特点，能够有效地组织和展示信息，提高用户的操作效率和使用体验。这种设计通常包含九个等大...
HTML5九宫格布局效果
06-01
HTML5九宫格布局是网页设计中常用的一种布局方式，尤其在现代响应式设计中扮演着重要角色。这种布局能够将页面分割成九个相等大小的单元格，每个单元格可以承载不同的内容，如图片、文字或者交互元素。Bootstrap模板...
bootstrap 点击图片 弹框变大
05-22
Bootstrap 是一个广泛使用的前端开发框架，它为开发者提供了丰富的组件和样式，用于快速构建响应式、移动优先的网站。在“点击图片弹框变大”的应用场景中，Bootstrap 提供了一种优雅的方式，使得用户可以方便地查看...
bootstrap显示DIV
09-03
在Bootstrap中，"显示DIV"是一个常见的需求，涉及到如何控制元素的可见性和布局。这里我们将深入探讨Bootstrap如何实现这一功能，以及与jQuery、弹框和下拉菜单等相关知识点。 首先，Bootstrap的显示和隐藏功能主要...
HTML 制作九宫格
08-14
NULL 博文链接：https://onestopweb.iteye.com/blog/2321797
bootstrap 模板9个免费
05-28
bootstrap免费模板9个， 网上下载的9个免费 bootStrap模板，请放心使用
九宫格布局，显示不同的图片和文字
05-30
因为项目需要九宫格布局做为首页，所有自己写了一个。
仿微信9宫格上传图片
03-02
实现类似微信的9宫格 ，从相册选9张或直接拍照 ，获得后，对图片做bitmap的转换处理，处理完成后，逐一向服务器上传，成功后，保存服务器返回的路径
Html5响应式设计实现九宫格,Html5响应式设计实现九宫格，html5响应九宫格
weixin_35879114的博客
06-05 330
Html5响应式设计实现九宫格，html5响应九宫格自从响应式设计的理念提出以来，越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如：小米商城，天猫等。至于响应式设计的概念等大家可以去百度百度，我这里就不相信讲解了。直接为大家带来源码，用Html5实现响应式的九宫格。代码如下：html5响应式九宫格html, body { color:#222; font-family:Micr...
九宫格样式
Just Do It
09-08 1242
NSInteger pageNum = ([self.dataArray count]) / iconCount; NSInteger num = ([self.dataArray count]) % iconCount > 0 ? 1 : 0; self.rootScrollView.contentSize = CGSizeMake((pageNum+num) *
Bootstrap Table 实现简单的查询和显示功能
actionzh的博客
08-12 1万+
最近用bootstraptable写了一个查询显示的界面。 下面是主要代码：   1.    我引入的css和js link rel="stylesheet" href="${basePath}/css/bootstrap.min.css" >     link rel="stylesheet" href="${basePath}/css/bootstra
bootstrapV4.6.0 图片宫格布局（案例篇）
草巾冒小子的博客
02-11 1777
文章目录官方文档：效果图如下：代码示下：使用注意事项：附件：CSS样式表 官方文档： 文档入口：https://v4.bootcss.com/docs/content/images/ 效果图如下： 代码示下： <!--HTML--> <div class="tips-right text-right"> <figure class="figure mg0 pdt15"> <img src="statics/images/header_img_1.1
看程序学bootstrap9-基本样式之栅格布局
tujiahao1的博客
06-24 439
步骤 1 : 栅格系统 <!DOCTYPE html> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css...
bootstrap九宫格
03-15
Bootstrap九宫格是一种常用的网页布局方式，通过Bootstrap框架提供的栅格系统和样式类，可以将页面划分为九个等宽的格子，用于展示不同的内容或功能模块。以下是使用Bootstrap实现九宫格的步骤： 1. 创建一个包含九个格子的容器： ```html <div class="container"> <div class="row"> <div class="col-md-4">格子1</div> <div class="col-md-4">格子2</div> <div class="col-md-4">格子3</div> </div> <div class="row"> <div class="col-md-4">格子4</div> <div class="col-md-4">格子5</div> <div class="col-md-4">格子6</div> </div> <div class="row"> <div class="col-md-4">格子7</div> <div class="col-md-4">格子8</div> <div class="col-md-4">格子9</div> </div> </div> ``` 这里使用了Bootstrap的栅格系统，将每行分为12列，每个格子占据4列（col-md-4），即每行显示3个格子。 2. 根据需要，为每个格子添加内容或功能模块，例如： ```html <div class="col-md-4"> <h3>格子1</h3> <p>这是格子1的内容。</p> <a href="#">更多</a> </div> ``` 通过以上步骤，就可以实现一个简单的Bootstrap九宫格布局。你可以根据实际需求自定义每个格子的样式和内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值