参照bootstrap写的简单的栅格

最新推荐文章于 2024-08-23 14:03:47 发布
最新推荐文章于 2024-08-23 14:03:47 发布
阅读量125 收藏
点赞数
文章标签： xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzjqq/article/details/84806343
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body	   {
	height:100%;
	width:100%;
	border:0px;
	margin:0px;
	padding:0px
	}

	.row {
	width:100%;border:0px 
	}
 
	.col-1 {
		float:left;
		height:100%;
		background-color: red;
		width:16.6%
	}

	.col-2 {
		float:left;
		height:100%;
		background-color: blue;
		width:33%
	}
	.col-3 {
		float:left;
		height:100%;
		background-color: green;
		width:50%
	}
	.col-4 {
		float:left;
		height:100%;
		background-color: lightblue;
		width:66.9%
	}
		.col-5 {
		float:left;
		height:100%;
		background-color: lightgreen;
		width:83.4%
	}
		.col-6 {
		float:left;
		height:100%;
		background-color: orange;
		width:100%
	}
</style>

 </head>
 <body>
	<div class="row" style="height:200px" >
  <div class="  col-2"> <div class="row" style="height:200px" >
  <div class="  col-4">444</div> <div class="  col-2">2222</div> 
  </div></div> <div class="  col-1">1111</div>  <div class="  col-3">3333</div> 
  </div>
	<div class="row" style="height:200px" >
  <div class="  col-1">111</div> <div class="  col-5">555</div>   
  </div>
  	<div class="row" style="height:200px" >
  <div class="  col-3">333</div> <div class="  col-3">333</div>   
  </div>
  	<div class="row" style="height:200px" >
  <div class="  col-2">222</div>   <div class="  col-4">4444</div> 
  </div>
	<div class="row" style="height:200px" >
  <div class="  col-6">6666</div> 
  </div>
 </body>
</html>

 

lzjqq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap从入门到精通（全）
码农研究僧的博客
11-22 6万+
目录前言1. 下载安装2. 布局容器和栅格网格系统2.1 布局容器2.2 栅格网格系统3. 常用样式 前言 在了解这篇文章的时候 需要提前知道这些知识点 可看我之前的文章 html从入门到精通（全） css属性从入门到精通（全） JavaScript从入门到精通（全） 这篇文章的学习主要通过 2021最新完整版Bootstrap教程（最给力的前端框架）bootstrap框架讲解-快速上手,最适合后端开发人员的bootstrap保姆级使用教程 关于Bootstrap的主要作用 是⼀套现成的 CSS 样
Bootstrap全局 CSS样式
qq_44247968的博客
05-01 1038
一、概览 HTML5 文档类型 Bootstrap使用到某些元素和css属性需要将页面设置为HTML5文档类型，在你项目中的每个页面都要参照下面的格式进行设置 移动设备优先 针对移动设备的样式融进了框架的每个角落，而不是增加一个额外的文件，为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,m
BootStrap-Calendar:生成使用Bootstrap格式化的月度日历
05-24
BootStrap日历 我需要一个用于时间表跟踪项目的简单日历。 我找不到适合自己需求的程序，因此我使用BootStrap和jQuery创建了这个程序。 也许这对某人有用。
Bootstrap --手写栅格系统
Yannnnnm的博客
10-31 359
本篇文章主要从栅格系统的原理，以及栅格系统的一些应用来说明； 目录栅格系统原理我所理解的栅格系统栅格系统的应用总结 栅格系统原理 我们要了解栅格系统的原理，首先先看看官方文档的解释 官方文档这么解释他：栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局； 我们再来看看官方爸爸解释的原理： 这里方便大家看我们这里就直接偷了官方的文档解释截图； 官方的话可能不是那么通俗，那么栅格系统的原理到底是什么呢？ 我所理解的栅格系统 栅格系统是将一行等分成12份或者24份，分别根据每一行的每一
BootStrap的栅格系统的基本写法（布局）
weixin_30753873的博客
01-17 155
代码如下： <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"...
jQuery和Bootstrap 4简单的日历插件
12-12
jquery-bootstrap-year-calendar是一款 jQuery和Bootstrap 4简单的日历插件。该日历插件使用简单，支持配置多种i10n语言。并提供事件来设置或获取当前的日期。
Bootstrap栅格系统简单实现代码
12-11
Bootstrap栅格系统的简单介绍，供大家参考，具体内容如下 栅格系统：总共分为12个，超过12个会自动换行，可嵌套，嵌套也不可超过12个，且不会超过父栏 代码： <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>Bootstrap 101 Template</title> <link href="http://
bootstrap学习（一)栅格、布局
巡山小妖008
04-14 341
bootstrap学习（一)栅格、布局 栅格： 栅格将整个屏幕分为12份，当使用单一的一组.col-md-*栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ”.row内，所有的row必须在container内。 clo-md-* ：中等...
Bootstrap栅格布局使用
IT修真院：初学者转行到互联网的聚集地
10-30 340
Bootstrap栅格布局使用 这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能。 今天给大家分享一下，CSS任务中可能会使用到的知识点： Bootstrap栅格布局使用。 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 ...
Bootstrap栅格系统与常用组件
小王的博客
08-03 1420
BootStrap栅格系统与常用组件
用Bootstrap做一款酷炫的个人简历.rar
02-19
你可以利用Bootstrap的栅格系统调整内容在不同设备上的排列方式，确保在任何屏幕尺寸下，信息都能清晰、易读。 在这款模板中，你可能会发现以下关键元素： 1. **头部（Header）**：包含个人头像、姓名和联系信息，...
bootstrap后台模板
03-28
1. 响应式布局：Bootstrap采用流式栅格系统，可以自动调整网页在不同设备上的显示效果，适应手机、平板电脑和桌面电脑等多种屏幕尺寸。 2. 可定制性：Bootstrap允许开发者通过Sass（预处理器）和LESS（层叠样式表...
bootstrap 修改栅格化
Martin 的博客
06-05 1048
在css 中修改 成这样就是 class 为 .col-lg-2 在小于 992px的屏上的布局。建议可以F12修改，根据个人情况修改数值。@media (min-width: 992px) { .col-lg-2 { flex: 0 0 14%; max-width: 14%; }}...
深入理解BootStrap Item7 -- 栅格系统（布局）
小平果的欢乐谷
11-14 7127
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
利用Bootstrap做出简易表格
qq_35907502的博客
08-19 4683
 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地 构建基于 PC 及移动端设备的 Web 页面需求。  这里利用bootstrap做出一个表格以及分页的静态页面。 &lt;!DOCTYPE html&gt; &lt;html lang="zh"&g...
bootstrap页面布局和页面中的日历显示
xuehuagongzi000的博客
09-12 2290
1.bootstrap里面可以进行页面的排版和很多样式的设置，非常好用 http://www.runoob.com/try/bootstrap/layoutit/ 2.页面中时间设置，通过日历来传递日期参数，通过laydate.js来实现，很好用 http://laydate.layui.com/
使用itextpdf5.x将网页转为PDF,并添页眉页脚页码
qingqingzijinxin的专栏
08-23 341
itextpdf，html转pdf
单片机项目方案医用点滴WIFI远程监控,报警系统
最新发布
09-01
单片机项目方案医用点滴WIFI 远程监控、报警系统提取方式是百度网盘分享地址
单片机项目方案消防报警器,光电感烟探测设计
09-01
单片机项目方案消防报警器，光电感烟探测设计提取方式是百度网盘分享地址
Bootstrap响应式栅格系统详解与应用
Bootstrap栅格系统是Bootstrap框架中的核心组件，它为开发者提供了构建响应式和移动设备优先的网页布局的强大工具。Bootstrap是一个基于HTML、CSS和JavaScript的开源前端开发框架，旨在简化Web开发过程，提高效率。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值