bootstrap栅格系统记录表

最新推荐文章于 2022-11-03 21:54:34 发布
最新推荐文章于 2022-11-03 21:54:34 发布
阅读量209 收藏 2
点赞数 1
文章标签： bootstrap 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52421124/article/details/125724835
版权
该博客介绍了如何使用Bootstrap栅格系统创建响应式网页，详细解析了不同屏幕尺寸下的断点、容器宽度和列间隙。内容包括一个具体的响应式表格实例，展示了在网页中实现表格布局的方法，以及表格在不同设备上的显示效果。表格应用于建筑行业的质量验收记录，展示了其在业务场景中的实际应用。
摘要由CSDN通过智能技术生成

Bootstrap栅格系统记录表

  使用BootStrap栅格系统布局响应式网页，而栅格化是指将整个网页的宽度分成若干等份。在bootstrap3默认将网页分成12等份.

超小屏幕小屏幕中等屏幕大屏幕
响应断点<768px>=768px>=992px>=1200px
别名xssmmdlg
容器宽度100%750px970px1170px
类前缀col-xs-*col-sm-*col-md-*col-lg-*
列数12121212
列间隙30px30px30px30px

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<title>Document</title>
</head>
<body style="background: #eee;">
<h3 style="text-align: center;">一般抹灰工程检验批质量验收记录表</h3>
<h5 style="text-align: center;">GB50210-2001</h5>

<div style="float:right "><span style="float: left;line-height: 40px;">030201</span><div style="background: #D9EDF7;width: 100px;height: 40px;float: left;"></div></div><br><br>
<div class="table-responsive">
	<table class="table table-hover table-bordered" style="text-align: center;table-layout:fixed;word-break:break-all;" >
		<tbody>
		<tr>
			<td style="background: #ccc;text-align: center;" class="col-md-200" colspan="2">单位(子单位)工程名称</td>
			<td style="text-align: center;" class="info" colspan="4">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>\
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;" class="col-md-200" colspan="2">分部(子分部)工程名称</td>
			<td style="text-align: center;" class="info">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
			<td style="background: #ccc;text-align: center;" class="col-md-100">验收部位</td>
			<td style="text-align: center;" class="info" colspan="2">&emsp;&emsp;&emsp;&emsp;&emsp;</td>
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;" class="col-md-100">施工单位</td>
			<td style="text-align: center;" class="info" colspan="2">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
			<td style="background: #ccc;text-align: center;" class="col-md-100">项目经理</td>
			<td style="text-align: center;" class="info" colspan="2">&emsp;&emsp;&emsp;&emsp;&emsp;</td>
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;" class="col-md-100">分包单位</td>
			<td style="text-align: center;" class="info" colspan="2">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
			<td style="background: #ccc;text-align: center;" class="col-md-200" colspan="2">分包项目经理</td>
			<td style="text-align: center;" class="info">&emsp;&emsp;&emsp;&emsp;&emsp;</td>
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;" class="col-md-200" colspan="2">施工执行标准名称及编号</td>
			<td style="text-align: center;" class="info" colspan="4">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
		</tr>
		</tbody>
	</table>
</div>
<div class="table-responsive">
	<table class="table table-hover table-bordered" style="text-align: center;">
		<thead>
			<th style="background: #ccc;text-align: center;" colspan="6">施工质量验收规范的规定</th>
			<th style="background: #ccc;text-align: center;" colspan="10">施工单位检查评定记录</th>
			<th style="background: #ccc;text-align: center;">监理（建设）单位验收记录</th>
		</thead>
		
		<tbody>
		<tr>
			<td rowspan="4" style="background: #ccc;text-align: center;">主控项目</td>
			<td style="background: #ccc;text-align: center;">1</td>
			<td class="warning" colspan="2">基层表面</td>
			<td colspan="2" style="background: #ccc;text-align: center;">第4.2.2条</td>
			<td class="success" colspan="10"></td>
			<td rowspan="4" class="danger"></td>
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;">2</td>
			<td class="warning" colspan="2">材料品种和性能</td>
			<td colspan="2" style="background: #ccc;text-align: center;"> 第4.2.3条</td>
			<td class="success" colspan="10"></td>
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;">3</td>
			<td class="warning" colspan="2">操作要求</td>
			<td colspan="2" style="background: #ccc;text-align: center;">第4.2.4条</td>
			<td class="danger" colspan="10"></td>
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;">4</td>
			<td class="warning" colspan="2">层粘结及面层质量</td>
			<td colspan="2" style="background: #ccc;text-align: center;">第4.2.5条</td>
			<td class="success" colspan="10"></td>
		</tr>
	<tbody>
		<tr>
			<td rowspan="12" style="background: #ccc;text-align: center;">一般项目</td>
			<td style="background: #ccc;text-align: center;">1</td>
			<td class="warning" colspan="2">表面质量</td>
			<td colspan="2" style="background: #ccc;text-align: center;">第4.2.6条</td>
			<td class="success" colspan="10"></td>
			<td rowspan="12" class="danger"></td>
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;">2</td>
			<td class="warning" colspan="2">细部质量</td>
			<td colspan="2" style="background: #ccc;text-align: center;">第4.2.6条</td>
			<td class="success" colspan="10"></td>
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;">3</td>
			<td class="warning" colspan="2">层与层间材料<br>要求层总厚度</td>
			<td colspan="2" style="background: #ccc;text-align: center;">第4.2.8条</td>
			<td class="success" colspan="10"></td>
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;">4</td>
			<td class="warning" colspan="2">分格缝</td>
			<td colspan="2" style="background: #ccc;text-align: center;">第4.2.9条</td>
			<td class="success" colspan="10"></td>
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;">5</td>
			<td class="warning" colspan="2">滴水线（槽）</td>
			<td colspan="2" style="background: #ccc;text-align: center;">第4.2.10条</td>
			<td class="success" colspan="10"></td>

		</tr>

		<tr>
			<td rowspan="7" style="background: #ccc;text-align: center;">6</td>
			<td class="warning" rowspan="7">允许偏差</td>
			<td rowspan="2" class="warning">项目</td>
			<td colspan="2" style="background: #ccc;text-align: center;">允许偏差（mm）</td>
			<td colspan="10" rowspan="2" style="background: #ccc;text-align: center;">实测值</td>
		</tr>
		<tr>
			<td style="background: #ccc;text-align: center;">普通抹灰</td>
			<td style="background: #ccc;text-align: center;">高级抹灰</td>
		</tr>
		<tr>
			<td class="warning">立面垂直度</td>
			<td class="success"></td>
			<td class="success"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td class="warning">表面平整度</td>
			<td class="success"></td>
			<td class="success"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td class="warning">阴阳角方正</td>
			<td class="success"></td>
			<td class="success"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td class="warning">分格条（缝）直线度</td>
			<td class="success"></td>
			<td class="success"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td class="warning" >墙角.勒脚上口直线度</td>
			<td class="success"></td>
			<td class="success"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		</tbody>
		</tbody>
	</table>
</div>
<div class="table-responsive">
	<table class="table table-hover table-bordered" style="text-align: center;">
		<thead>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</thead>
		<tbody>
			<tr>
				<td rowspan="3" style="background: #ccc;text-align: center;">施工单位检查评定结果</td>
				<td style="background: #ccc;text-align: center;">专业工长（施工员）</td>
				<td>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
				<td style="background: #ccc;text-align: center;">施工班组长</td>
				<td>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
			</tr>
			<tr>
				<td colspan="4" class="danger">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
			</tr>
			<tr>
				<td style="background: #ccc;text-align: center;">项目专业质量检查员:</td>
				<td colspan="2"></td>
				<td style="color: #c00;">年&emsp;月&emsp;日</td>
			</tr>
			<tr>
				<td rowspan="3" style="background: #ccc;text-align: center;">监理（建设）单位评定结果</td>
			</tr>
			<tr>
				<td colspan="4" class="danger">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
			</tr>
			<tr>
				<td style="background: #ccc;text-align: center;">专业监理工程师<br>（建设单位项目专业技术负责人）</td>
				<td colspan="2"></td>
				<td style="color: #c00;">年&emsp;月&emsp;日</td>
			</tr>
		</tbody>
	</table>

</div>
</body>
</html>
雯靑爭
关注
Bootstrap中的基础CSS： 栅格系统 表格 表单 按钮
锦鲤姑娘的博客
03-08 861
一、bootstrap下载与安装 二、基础CSS 1、栅格系统 2、表格 3、表单 4、按钮
Web项目实战 | 购物系统v1.0 | 开发记录（五） | 模拟网站埋点实现用户浏览记录的统计与显示
希望每天都能进步一点点
12-24 1169
Web期末课程设计v1.0（五） | 闲优购系统 | 模拟网站埋点实现用户浏览记录的统计与显示
bootstrap栅格系统，代码嵌入，表格
LimonSea的博客
10-27 1581
一、栅格系统 栅格系统要注意，bootstrap最多包括12列，超出就会换行。还可以进行嵌套，代码中设置了透明度，是可叠加的，还是很好看的~以后要常用。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;栅格系统&lt;/title&gt;
栅格系统对照表
weixin_30323631的博客
02-22 73
http://lab.gracecode.com/grids/index.html 转载于:https://www.cnblogs.com/stalwart/archive/2011/02/22/1961181.html
前端第20天--bootstrap、栅格系统、辅助类、表格
A444477的博客
04-26 123
前端第20天–bootstrap bootstrap 的简介、组成、下载、引入、使用 栅格系统
Bootstrap复习二——栅格系统（form表单示例）
小头Sophia
01-18 7871
1.关于低版本的IE浏览器兼容性问题的解决： //注意：这部分不是注释 上面的代码注释后显示是这样的： --> --> --> --> 注意红色部分的内容 2.栅格系统： 1）Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 2）行（row）”必须包
基于ssh框架+bootstrap的企业级员工信息管理系统（源码）
09-14
Bootstrap的栅格系统、导航条、模态框、按钮、表单、下拉菜单等功能，使得开发者能够快速搭建符合现代设计标准的网页布局。 【企业级员工信息管理系统】 这个系统可能包括员工的个人信息管理、职位信息、部门信息、...
ssm+bootstrap开发小型java web教务后台管理系统
04-24
4. **Bootstrap**：Bootstrap是由Twitter开发的开源前端框架，包含了丰富的HTML、CSS和JS组件，如栅格系统、表单、按钮、导航、模态框等，能快速构建响应式布局和移动设备优先的网页。 5. **教务后台管理系统**：...
PHP + mysql + bootstrap 小项目：云签到系统
最新发布
11-19
在云签到系统中，Bootstrap可以帮助快速设计美观的用户界面，包括登录/注册表单、员工列表、打卡记录展示等。例如，使用栅格系统来创建灵活的布局，使用表单控件进行数据输入，利用导航条让用户轻松浏览不同功能。 ...
基于SSM,Spring, BootStrap 毕业设计管理系统的设计与实现
02-19
BootStrap的栅格系统、表单、按钮、导航等元素使得界面设计更加便捷，同时保证了在不同设备上的良好显示效果。 在源码实现部分，开发者需要遵循MVC设计模式，编写控制器Controller、模型Model、视图View以及相关的...
express + mongodb + jquery + bootstrap 简单的后台管理系统.zip
08-03
Bootstrap是目前最广泛使用的前端开发框架，提供了丰富的预设CSS样式和组件，如栅格系统、表单、按钮、导航等，可以帮助开发者快速构建响应式和移动友好的网页。在本项目中，Bootstrap为后台管理系统提供了美观且...
用bootstrapTable实现考勤报表的动态生成
nb7474的博客
01-24 1万+
在设计考勤报表的时候，由于每个月的日期是不同的，所以他的表需要动态生成。而bootstrapTable表格的初始化时候，是根据开始时候静态页面所规定的th标签中内容进行初始化。例如：<table id="tablesinglelast"> <thead> <tr> <th data-field="workDate" id="ws.ref_date"
Angular：实现一个人员登记表单-案例（四）
森豪Steven的博客
05-01 260
效果展示： 创建组件： ng g component components/form app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/fo...
Bootstrap栅格布局
jwz934738949的博客
07-03 1184
栅格布局基本概念 在Bootstrap中引入了栅格布局，将页面分成类似于表格一样的布局 每一行由12列组成，可以通过设置列所占有的列的个数来设置列的宽度 支持响应式布局，分别有5种响应尺寸，分别对应不同的设备宽度 使用flexbox流式布局来实现页面布局 使用div来实现容器、行、列的布局 栅格布局具体操作 首先布置一个容器div用来存放栅格，为div添加container类实现容器 为子元素添加row类实现行的布局，而列的布局使用col-*来实现 当类名为container-fluid的话，默认占据
BootStrap(栅格系统)
magic_818的博客
11-03 4911
BootStrap常用标签
Bootstrap系列之表格（Tables）
热门推荐
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
栅格系统
lql_h的博客
05-05 2837
一．移动设备优先在 HTML5的项目中，我们做了移动端的项目。它有一份非常重要的meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。 //分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scal...
bootstrap--模态框-圆角设置
苏木瑾
04-10 2231
.modal-content 旁边加上style属性 style="border-radius:5px" 5px表示倒角的大小 也可以直接给input加属性 一样可以倒角 <!-- Small modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data...
html 栅格表单,bootstrap-栅格布局系统-表单-组件
weixin_29119475的博客
06-26 922
一. bootstrap-全局css样式-栅格布局系统-重点难点1. 所有的行必须放在容器中.container或container-fluidcontainerscreen>1200px(超大PC显示器-lg) 容器宽1170pxscreen>992px(普通PC显示器-md) 容器宽970pxscreen>768px(平板显示器-sm) 容器宽750pxscre...
Bootstrap CSS12栅格系统详解
Bootstrap栅格系统利用媒体查询实现响应式设计，当屏幕尺寸发生变化时，列的宽度和排列顺序也会自动调整。例如，一个在大屏幕上并排放置的三列布局，在小屏幕上可能会堆叠成垂直排列。 Bootstrap的CSS12栅格系统...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值