bootstrap Grid System

最新推荐文章于 2023-06-28 09:24:43 发布
最新推荐文章于 2023-06-28 09:24:43 发布
阅读量208 收藏
点赞数
文章标签： system grid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37538698/article/details/79866257
版权

(Grid System) 一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。

基本机构如下：

<body>
	<div class="boottitle">
		<h1>Bootstrap</h1>
	</div>
	<div>
		<h3 class="boottitle">Grid System</h3>
		<div class="container">
			<div class="row">
				<div class="col-md-4">col-md-4</div>
				<div class="col-md-4">col-md-4</div>
				<div class="col-md-4">col-md-4</div>
			</div>
			<div class="row">
				<div class="col-sm-4 col-md-4">col-sm-4 col-md-2</div>
				<div class="col-sm-4 col-md-4">col-sm-4 col-md-2</div>
				<div class="col-sm-4 col-md-4">col-sm-4 col-md-2</div>
			</div>
		</div>
	</div>


</body>

响应式布局：依据浏览器或者设备的不同进行智能布局。

col-xs-6 col-sm-3：

偏移列： col-md-6 col-md-offset-3 

嵌套列：

	<div>
			<div class="col-md-3"
				style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
				<h4>第一列</h4>
			</div>

			<div class="col-md-9"
				style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
				<h4>第二列 - 分为四个盒子</h4>
				<div class="row">
					<div class="col-md-6"
						style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
						1
					</div>
					<div class="col-md-6">
						2
					</div>
				</div>

				<div class="row">
					<div class="col-md-6">
						3
					</div>
					<div class="col-md-6">
						4
					</div>
				</div>
			</div>
		</div>

排序：col-md-4 col-md-push-8 col-md-4 col-md-poll-4


超小设备手机（<768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200p

网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的
最大容器宽度None (auto)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列数量和12121212
最大列宽Auto60px78px95px
间隙宽度30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes

超小设备手机（<768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200px）
笨小孩xl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap网格系统_在10分钟内学习Bootstrap 4网格系统
cumian8165的博客
07-30 342
bootstrap网格系统by Elena-Cristina Conacel 由Elena-Cristina Conacel 在10分钟内学习Bootstrap 4网格系统 (Learn the Bootstrap 4 Grid System in 10 Minutes) The Bootstrap 4 Grid System is used for responsive layouts. B...
Bootstrap3 Grid system原理及应用详解
09-01
主要为大家详细介绍了Bootstrap3 Grid system原理及应用,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap—栅格系统（grid system）
呵呵喝何何
09-14 1237
一、 概念 1. 栅格系统是依赖于容器存在的，
Bootstrap 网格系统（Grid System）
Listen2You的博客
01-31 604
导读 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 什么是网格（Grid）？ 摘自维基百科： 在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和...
Bootstrap_Grid system
FAFA的博客
10-19 110
predefined grid classes col- extra small 超小型 col-sm- small 小型 col-md- medium 中型 col-lg- large 大型 col-xl- extra large 超大型 container的padding ，row的margin 和 column的pa...
Bootstrap 的网格系统（Grid System）
编辑编辑器
03-08 754
本章节我们将讲解 Bootstrap 的网格系统（Grid System）。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 什么是网格（Grid）？ 摘自维基百科： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nawJa3Sn-1615175825960)(未命名.assets/quote.png)]在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的
react-grid-system：用于React的功能强大的类似Bootstrap的响应式网格系统
02-04
react-grid-system v7为超大屏幕添加了新的屏幕类xxl 。 这可能会对您的应用造成影响。 要退出此新屏幕类别，请使用以下命令： import { setConfiguration } from 'react-grid-system' ; setConfiguration ( { ...
03. 介绍Grid System
08-31
[Bootstrap_3][中文]_03.__介紹Grid_System
[Bootstrap 4] 03. Container, 断点, 与Grid system
08-31
[Bootstrap_4][中文]_03.__Container,_斷點,_與Grid_system
Bootstrap 网格系统（Grid System）的工作原理
LuckXinXin的博客
07-07 1422
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。 使用行来创建列的水平组。 内容应该放置在列内，且唯有列可以是行的直接子元素。 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。 网格系统是通过指定您想要横跨的十二个可用的列来.
学习 Bootstrap 5 之 Grid
qq_37354060的博客
01-15 2075
学习 Bootstrap 5 之 栅格栅格布局系统 (Grid system)1. 什么是栅格布局系统?2. 特点(1). 支持六种响应式布局(2). 容器会居中和水平填充内容(3). 每一列都有水平填充器(称为gutter)，用于控制列与列之间的间距(4). 每行有12个模板列，允许创建跨任意数量列的元素的不同组合(5). Gutter也是响应式和可自定义的(6). 修改sass文件中的值, 可以改变这些默认的设置3. 栅格布局选项4. 使用(1). 简单的例子(2). 默认情况下, 会均分每一行的12列
2.2 Bootstrap 网格系统
梁辰兴的博客
06-28 586
摘自维基百科：在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。Bootstrap 官方文档中有关网格系统的描述：Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。
bootstrap 网格系统（Grid system） 总结与实践
往前的娘娘
06-27 1806
概述： 小知识点 1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170 2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸 3、col-sm-* 小于768会堆显示不会分栏，col-md-*
bootstrap部分---网格系统；（几天没写博客了，为了潜心研究一下bootstrap）
weixin_30505225的博客
11-22 96
1工作原理： （1）行必须放置在.containerclass 内，以便获得适当的对齐（alignment）和内边距（padding）。 （2）使用行来创建列的水平组。 （3）内容应该放置在列内，且唯有列可以是行的直接子元素。 （4）预定义的网格类，比如.row和.col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。 （5）列通过内边距（padding...
Bootstrap Grid system [布局：栅格系统]
Jessieeeeeee的博客
01-23 942
Bootstrap 栅格系统（Grid System） Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。 运行示例 Bootstrap的网格系统使用一系列容器，行和列来布局和对齐内容。它是使用flexbox构建的，具有完全的响应能力。...
战略规划之五看三定方法论.pptx
06-14
战略规划之五看三定方法论.pptx
cutcamera1718339848103.png
06-14
cutcamera1718339848103.png
小游戏的java程序开发
06-14
小游戏的java程序开发
python 4个作业.zip
最新发布
06-14
Python学习笔记，复习巩固，作业！！！
bootstrap栅格系统作品
12-14
<title>Bootstrap Grid System Example <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值