栅格系统的标准用法(bootstrap栅格化布局)

扫码添加渲大师小管家，免费领取渲染插件、素材、模型、教程合集大礼包！

大家好，今天来介绍栅格系统的标准用法(屏幕为1920*1200是多少寸的)的问题，以下是渲大师小编对此问题的归纳和整理，感兴趣的来一起看看吧！

Bootstrap 栅格布局的使用

bootstrap 提供了一套非常强大的系统 —— 响应式、移动设备优先的栅格系统。它可以随着设备或者视口的尺寸大小的增加而适当的扩展列数（最多到12列）。

在使用栅格参数时，需要注意：例如当定义了 .col-md-1 时，代表宽度大于 992px 时，这一列将会占用 1/12 的宽度，如果没有定义更大的类 .col-lg ，那当显示旦余哗器大于 1200px 时，排列的宽度仍会按照 col-md-1 来分配。但是，如果没有定义更小的类，当前元素将会失去栅格的样式，变模行成一个普通的div（没有浮动、也没有宽度，默认占满一整行）。

由于 bootstrap 3 的栅毁模格布局是通过浮动来实现的，所以当我们一行中有一块未占满一整行，但又需要进行偏移或者居中的元素，就没法通过 marin: 0 auto 或者 text-align: center ，这时就可以使用 列偏移 来让该列进行偏移。

要进行列偏移，需要在对应的列中添加 col-md-offset-x

我占了3列

偏移完成后，我们会发现， bootstrap 偏移的原理是通过 margin-left 来实现的，所以 col-md-8 后面的与纳素，也会跟着一起被推开。当偏移量加元素本身的宽度大于12列时，会导致后面的元素进行换行。另外，由于偏移是固定使用 margin-left 属性，所以偏移只能向右偏移。

列排序，就是可以将列的 显示顺序 进行替换。但列排序和列偏移有点不同，就是列偏移是通过 margin-left 来实现的，但是列排序却是通过 相对定位 来实现的。所以列排序它不会影响到周围元素的布局（会导致元素之间的重叠）。

要实现列排序，只需要通过 col-md-pull 或者 col-md-push 来进行左偏移和右偏移。

1920屏幕12列使用多少的沟槽

好多小伙伴对栅格都是迷迷糊糊的，知道栅格的概念却不知道怎么用、为什么用，每次提到都很头疼。其实栅格没那么难，栅格是是为了辅助设计、减少设计工作量、使设计更理性、更规律的一种方法。屏幕端对不同尺寸页面响应式时更省时省力对一种方法，是让减轻我们工作量对方法，看到这里是不是心动了，那就往下看看～

一、 什么是栅格

1. 栅格的由来

栅格就是网格。就是这种有规律的格子

哈哈，这样一说是不是就很接地气了。

英文翻译过来就是网格，至于现在为什么叫栅格就不得而知道，

栅格最早是应用于平面设计中。产生于二十世纪初的西欧，完善于五十年代的瑞士。通过有规律的网格来指导版面布局。
栅格设计的在屏幕端的应用也十分广泛，不光为设计服务，对响应式开发也起到了很大的作用。虽然开发小哥说的栅格和我们理解的不太一样，但也减少了沟通成本。

2. 网格Grid

网格是构成页面栅格系统的最小单位。

PC端我们一般用8作为网格的最小单位。

为什么用8？

尽量保持单位是偶数，这样在页面放大或者放大或者缩小时还能保持清晰。在保证偶数的前提下，灶雹团使用“ 2、4、6、8、10、12... ”作为最小单位都是可以的。

通常情况下PC端横向是固定的，纵向是可以滚动的。根据2019年中国PC端分辨率端统计，“4、8”只有不能被1366整除，其他都可以。由于4过于小，普通用户从视觉上不容易分辨差别，所以我们选用8作为最小单位。之后所有的数值都使用8的倍数。

3. 栏Columns和槽Gutters

栏(Columns)是呈放内容区域。

PC端通常有12栅格或24栅格，意思就是纵向有12栏或24栏。

槽(Gutters)是两个栏中间的间距。槽的数量比栏的数量少一个。

假设是栅格宽度是W、栏的宽度是C、槽的宽度是G。有N个栏，就有N-1个槽。

则可以推断出算出W=N*C+(N-1)G。

忘掉 栏+槽=列的概念，(个人感觉没有作用，有不同见解的欢迎讨论。)

为什么用12或24栏

12栏和24栏都是PC端较常用的。移动端用4栏的居多。分的越细可变化的内容越丰富。但过于细也会使页面变得很碎，差异感和韵律感降低。12或24栏可以被2等分、3等分、4等分、6等分、12等分，还能按隐橘 1:2:1 、 1:3:2 、 1:2:2:1...等比例分割，提供了足够丰富的变化。

以下是京东首页的截图，应该是采用了12栅格，并且分别采用了2等分、四等分、六等分、2:6:2:2 、 2:10 。



4. 边距 Margin

栅格宽度外的边距，通常做自适应的距离。例如小屏和大屏之间做响应，就会改变边距，

5. 栅格宽度 Container

栅格宽度是需要栅格设计区域的宽度，不是显示器宽度

举例：假设我们以1920px的屏幕为画板作图、使用24列栅格。设定栏的宽度为32px4(个原子单位)，槽的宽度为16px(2个原子单位)。

则栅格宽度W=24列 x 32栏宽 + 23 列x 16槽宽=1136px。其余宽度做自适应处理。

在1920屏宽下如下图所示：

应用原则内容必须落在栏上，不能落在水槽中

父元素需对齐栅格，子元素可再做栅格

尽量按栅格做等分，平分成5等份也是可以的，前端工程师就需要改底层结构了。

二、为什么用栅格

不用栅格设计行不行？ 行！

行，不用栅格没问题。很多优秀作品都没有刻意的遵守传统的栅格，反而显得更加灵动。但是打破规则前得知道规则才行。

使设计更有规律和逻辑

基于栅格设计，按一定的规律把文字和图片排列在页面之中，使版面不光具有视觉感官的美感，也具有严谨的逻辑和一定韵律。

利于团队协作

有了统一的栅格标准，就可以解释为什么“这个宽度要用120px，那个宽度不能用140px...”之类的问题。设计团队之间沟通成本就大大降低。同时也能提高团队作业的一致性。

响应式设计

现在人们使用的设备不在局限电脑或者手机，用户可能使用任何尺寸的设备来访问我们的设计。所以我们不能为单一的设备来设计，怎么动态的构建我们的设计、响应不同尺寸的设备，是设计师在起初就应该考虑的。

三、 栅格系统如何响应的

1. 什么是响应式设计

通俗的讲就是：为了让设计在各种尺寸的设备上都保合理、持美观，用户无论用手机、平板、电脑使用我们的产品时都肆漏有良好都体验。检测到不同的屏幕尺寸的时候改变栅格的一些数值，变成我们预先设计的样式，这就是响应式设计。

2. 栅格是怎么响应的

固定栅格

栏和槽的宽度是固定不变的，不随屏幕的大小而变化。到一定的临界值的时候栅格列数会发生变化。

假设在我们以1920的屏幕大小为画板，栅格宽度是1136，看到的如下图。



在2560的屏幕下看页面，两侧的留白就会变大，中间的内容保持不变



在1024的屏幕下看页面，就会出现横向滚动条，页面仿佛被截断一样。



在更小的屏幕下，栅格的列数会发生变化。但无论怎么变化，栏和槽的宽度是不变的。



在临界值之间设计的布局不会改变。具体到什么临界值栅格的列数会发生变化，需要跟开发说清楚。临界值设置多少、设置多少个临界值要根据实际情况来制定。

优点：设计的还原度是最高的，无论在什么什么屏幕下，核心样式是保持不变的。

缺点：在小屏下会有滚动条。在大屏上左右留白过多，有点浪费空间。

流动栅格

栏的宽度是变化的，随屏幕的大小而变化。槽的宽度固定不变。到一定的临界值的时候栅格列数会发生变化。

假设在我们以1920的屏幕大小为画板，栅格宽度是1136。看到的如下图。



在2560的屏幕下看页面，槽的宽度保持不变，栏的宽度发生改变。

在1024的屏幕下看页面，槽的宽度保持不变，栏的宽度发生改变。

问题来了，这样一算栏的像素就不但不是偶数，而且还不是整数了，怎么办，屏幕该怎么显示呢？没关系，有的卡片可能是351个像素，有的是356个像素，这样1像素的差距在屏幕上很难看出差别来，为了在不同大小的屏幕上适配，这1像素是可以忍受的。

需要把子元素内的布局样式，那些是可以变动的地方跟前端说明即可。(例如：当连变化时，卡片内的图标保持左对齐，左边距不变。文字左对齐，每行的文字数量自适应。)

优点：在不同屏幕下会自动放大或缩小，更充分的利用空间。

缺点：由于栏宽是不固定的，样式可能会发生变形。文字可能会变成多行或者超长的一行。

混合栅格

在同一页面中可以分成多个区域，每个区域做不同栅格类型。

四、 实例：从0建立后台栅格系统

1. 确定栅格的基准

根据自家的业务场景定下最小单位和栅格数量，我们以8为最小原子单位距离，之后所有的数值是8的倍数。栅格数量采用12举例。

2. 确定栅格区域

后台系统和网页不同，往往逻辑复杂、数据量大，同时需要获取、比对很多的信息。

信息以表格、表单居多。所以屏幕的宽度就显得很重要了，寸土寸金。所以通常选中全部填充的样式，舍弃两侧留白的样式。

我们选择设备比例最多1920x1080为画板。(这里主要将纵向栅格，暂不考虑浏览器自身的标签栏和菜单栏的高度)

制定如下的样式，数值仅供参考，照搬的请慎重。

3. 放置内容

在栏内放置内容，内容不能在开始和结尾不能在槽里。内容的高度也需要保持8的倍数。



4. 响应策略

大/小屏幕响应

当屏幕变大时，左侧蓝色菜单栏保持宽度不变(固定栅格)。右侧栅格区域的槽保持不变，栏等比例扩大。(流动栅格)

当屏幕变小时，左侧蓝色菜单栏保持宽度不变(固定栅格)。右侧栅格区域的槽保持不变，栏等比例缩小(流动栅格)

平板响应

当屏幕小到平板的尺寸时候，栅格区的内容就无法正常显示了，十分影响体验。于是就是改变栅格的数量，变成6列栅格，同时菜单栏收缩简要模式。这样就完成了平板端的适配



手机响应

当屏幕是iPhone8、8P...等手机尺寸时候，栅格区就改为更少的栅格，同时菜单栏变为汉堡按钮。还可以把一些内容做隐藏处理，例如常见的咨询客服、相关推荐等。

小结栅格就是网格

适配时通常槽的宽度不变、栏的宽度自适应

栅格区域是内容区不是屏幕区域

栅格响应类型：固定栅格、流动栅格、混合栅格

其他干货小刚：【手把手教你做规范】设计语言--颜色篇​zhuanlan.zhihu.com小刚：【手把手教你做规范】设计语言--图标篇​zhuanlan.zhihu.com小刚：【手把手教你做规范】设计语言--组件库篇​zhuanlan.zhihu.com小刚：【手把手教你做规范】设计语言--文字篇​zhuanlan.zhihu.com小刚：【手把手教你做规范】设计语言--设计原则篇​zhuanlan.zhihu.com小刚：【手把手教你做规范】设计语言--文案篇​zhuanlan.zhihu.com

栅格布局一般怎么用
青岛市南区酒店
精选推荐
广告

Bootstrap实现的经典栅格布局效果实例【附demo源码】
8下载·0评论
2020年11月28日
Bootstrap实战---成长平台(栅格布局)
150阅读·0评论·0点赞
2021年7月20日
bootstrap4 网格布局实例_Bootstrap实现的经典栅格布局效果实例【附demo源码】
577阅读·0评论·0点赞
2021年1月14日
Bootstrap3:栅格系统的基本用法
1082阅读·0评论·0点赞
2020年5月5日
栅格布局（ 栅格 ）
6315阅读·0评论·1点赞
2020年7月20日
栅格布局的使用
1440阅读·0评论·1点赞
2022年5月28日
传奇正版手游下载

精选推荐
广告
栅格布局一般怎么用_栅格界面3步法则，入门小白从此不迷茫
1761阅读·0评论·0点赞
2020年12月22日
Bootstrap栅格布局解析
2187阅读·0评论·0点赞
2022年5月10日
bootStrap栅格系统基本用法
1373阅读·0评论·1点赞
2019年10月30日
栅格布局一般怎么用_合理设置栅格化与比例 让版式布局更友好
2449阅读·0评论·0点赞
2021年1月16日
响应式开发原理及Bootstrap栅格布局详解
1641阅读·1评论·3点赞
2022年3月27日
栅格布局一般怎么用_Bootstrap每天必学之栅格系统（布局）
241阅读·0评论·0点赞
2020年12月22日
Bootstrap4 学习笔记（一）
296阅读·0评论·1点赞
2021年4月9日
使用Bootstrap的栅格布局实现一个简单的demo
341阅读·0评论·0点赞
2020年11月20日
Bootstrap3栅格系统布局实例
3479阅读·0评论·0点赞
2019年5月2日
栅格布局一般怎么用_栅格布局的使用方法
1196阅读·0评论·0点赞
2020年12月22日
栅格布局一般怎么用_嘿~ 是时候学学栅格布局GRID了 布局入门
80阅读·0评论·0点赞
2021年1月16日
两栏布局(左侧固定宽度，右侧自适应)，五种实现方式
2219阅读·0评论·3点赞
2019年10月11日
bootstrap4 网格布局实例_bootstrap4网格系统，布局
282阅读·0评论·0点赞
2020年12月24日
bootstrap4 p-_一起来学习Bootstrap4！（下）
155阅读·0评论·0点赞
2020年11月20日
去首页
看看更多热门内容

什么是栅格系统

1、栅格系统（grid systems），也叫“网格系统”。栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。

2、栅格系统运用固定的格子设计版面布局，风格工整简洁。

1、概念：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

2、优点：使用栅格设计，可以使网页的信息呈现更加美观易读，更具可用性。

3、原理：通过设置陪激备不同的n、i、A值划分网页的区块，实现标准化的灵活设计。

4、局限性：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到遵循栅格了。

1、苹果下浏览器的默认宽度为960px。在 1024 x 768 的分辨率下，Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框，为 960 x 650。可见设计师们都不约而同选择960px的页面宽度。

2、目前大部分大型门户网站的首页宽度为950px/960px。绝大多数显示器都支持 1024 x 768 及其以上分辨率，为了有效的利用屏幕宽度同时保证栅格的灵活度，960就成为网页栅格系统中的最佳宽度（可以实现较多组合）铅吵了。当然，随着分辨率的提高，以后可能会流行更高px的页面宽芦毁度。

——部分内容整理自网络——

bootstrap栅格系统是什么意思

什么是栅格系统
栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap的栅格系统采用了1-12列的模式，并且通过比例计算来设置你定义的列宽。例如你这一行想要采用两列的布局模式，那么每列的宽度都为外容器的50%，不管你用什么设备浏览，它都会采用这样的比例进行展示。不过如果当设备宽度小于你设定的最小宽度，那么这两列就会并排成为一列。
Bootstrap的栅格系统
在Bootstrap中使用栅格系统非常简单方便，只需要在你的div中引入它们已经定义好的类即可。
我们先看看Bootstrap有几种栅格类可以使用：
1、.col-xs-* 这是超小屏幕类（<768px），类似手机等设备。
2、.col-sm-* 这是小屏幕设备类（≥768px且<992px），类似平板设备。
3、 .col-md-* 这是中型设备类（≥992px且<1200px）。
4、 .col-lg-* 这是大型设备类（≥1200px）。
如何使用Bootstrap栅格系统
你可以通过使用这些对应设备的栅格类来决定自己应用在不同设备上的布局样式。例如：

这种编码的结果就是，这两个div在pc端浏览起来是两行（每行都占据12列栅格），而在手机端浏览器来是一行两列（每列占据6列栅格）。通过这种形式樱皮雹，就能很方便地使用栅格系统定制自己的应用布局了。
其他信息
除了以上的使用方法之外，还能使用“列偏移类”来快速对自己的栅格进行定位，使用方法类似

按照这样的写法，这个div就会在pc端向右偏移 3列脊帆。
更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

什么情况下用bootstrap栅格系统

当你使用bootstrap创建网页时，希望网页能适配不同分辨率的设备，那么就需要使用栅格系统。（推荐学习：Bootstrap视频教程）

栅格系统就是可以将一组块级元素水平排列并可以随着屏幕分辨率的不同来改变块级元素的样式。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
下面就介绍一下 Bootstrap 栅格系统的工作原理：
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以宴盯棚用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中晌则的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
更多Bootstrap相关技术文章，请访问Bootstrap教程栏目则裤进行学习！