栅格系统_栅格系统的工作原理 - CSDN
  • Bootstrap之栅格系统

    千次阅读 2018-10-16 17:36:31
    1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一...

    1、栅格系统(布局)
    Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

    我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:

    网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

    在使用的时候大家可以根据实际情况重新编译LESS(或Sass)源码来修改12这个数值(也就是换成24或32,当然你也可以分成更多,但不建议这样使用)。

     

    2、使用规则
    Bootstrap内置了一套响应式、移动设备。

    1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:

    2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如:

    3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素

    4、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响

    为了更好的理解Bootstrap框架的网格系统工作原理,我们来看一张草图:

    简单对图解释一下:

    1、最外边框,带有一大片白色区域,就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果,其带有四种类型的浏览器(超小屏,小屏,中屏和大屏),其断点(像素的分界点)是768px、992px和1220px。

    2、第二个边框(1)相当于容器(.container)。针对不同的浏览器分辨率,其宽度也不一样:自动、750px、970px和1170px。在bootstrap.css的第736行~第756行进行设置:

     

    3、2号横条阐述的是,将容器的行(.row)平分了12等份,也就是列。每个列都有一个“padding-left:15px”(图中粉红色部分)和一个“padding-right:15px”(图中紫色部分)。这样也导致了第一个列的padding-left和最后一列的padding-right占据了总宽度的30px,从而致使页面不美观,当然,如果你需要留有一定的间距,这个做法是不错的。如bootstrap.css中第767行~第772行所示:

    4、3号横条就是行容器(.row),其定义了“margin-left”和”margin-right”值为”-15px”,用来抵消第一个列的左内距和最后一列的右内距。在bootstrap.css的第763行~第767行可以看到:

    5、将行与列给合在一起就能看到横条4的效果。也就是我们期望看到的效果,第一列和最后一列与容器(.container)之间没有间距。

    横条5只是想向大家展示,你可以根据需要,任意组合列与列,只是他们的组合数之和不要超过总列数。

    3、栅格选项
       通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。

    从上面的截图可以看出来,Bootstrap针对不同尺寸的屏幕(包括手机、平板、PC等等)设置了不同的样式类,这样让开发人员在开发时可以有更多的选择。根据我的理解:如果在一个元素上使用多个不同的上面的样式类,那么元素会根据在不同尺寸选择最合适(匹配最理想的)的样式类。简单的举例进行说明:比如在一个元素上我们使用了两个样式类:.col-md-和.col-lg。可以对照上面的截图来看

    第一种情况:尺寸》=1200px;那么会选择.col-lg。

    第二种情况:尺寸》=992px 并且尺寸《=1200px;那么会选择.col-md。

    第三种情况:如果尺寸《992px;那么这两个样式类都将不会作用于元素上。

    4、基本用法
      网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式,在这一节中所涉及到的示例,我们都以中屏(970px)为例进行介绍,其他屏幕的使用也类似这一种。

    1)、列组合

    列组合简单理解就是更改数字来合并列(原则:列总和数不能超12),有点类似于表格的colspan属性,例如:

    使用上面的结构,你将看到下图的效果:

     

    5、列偏移
    有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

    如上面的示例代码,得到的效果如下

    实现原理非常简单,就是利用十二分之一(1/12)的margin-left。然后有多少个offset,就有多少个margin-left。在bootstrap.css中第1205行~1241行所示:

     

    注意:

    不过有一个细节需要注意,使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示,如:

    <div class="row">
      <div class="col-md-3">.col-md-3</div>
      <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
      <div class="col-md-4">col-md-4</div>
    </div>
    上面代码中列和偏移列总数为3+3+3+4 = 13>12,所以发生了列断行。

    如上面的示例代码,得到的效果如下

    6、列排序
     列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。

    我们来看一个简单的示例:

    默认情况之下,上面的代码效果如下:

     

    “col-md-4”居左,“col-md-8”居右,如果要互换位置,需要将“col-md-4”向右移动8个列的距离,也就是8个offset ,也就是在“<div class=“col-md-4”>”添加类名“col-md-push-8”,调用其样式。

    也要将“col-md-8”向左移动4个列的距离,也就是4个offset,在“<div class=”col-md-8”>”上添加类名“col-md-pull-4”:

    7、列的嵌套
    Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度。来看一个简单示例:

    效果如下:

     

    注意:嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。

    https://www.cnblogs.com/chessYu/p/7337018.html

    展开全文
  • 栅格系统布局网页

    2019-11-01 18:35:11
    再后来,慢慢演变成运用固定的格子设计版面的平面设计风格栅格系统英文为 Grid Systems,也有翻译为网格系统。定义:运用固定的格子,遵循一定的规则,进行页面的布局设计,使布局规范简洁有规则
  • 什么是栅格系统

    千次阅读 2018-12-03 19:08:54
    Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。  我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列...

    Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 
    我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理: 
    网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
    --------------------- 
    作者:阿浩yohann 
    来源:CSDN 
    原文:https://blog.csdn.net/qq_27346299/article/details/72331243 
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • 栅格系统布局

    2019-07-03 11:13:32
    .col-xs-超小屏幕 手机 (<768px), ...栅格系统英文为 Grid Systems,也有翻译为网格系统。 定义:运用固定的格子,遵循一定的规则,进行页面的布局设计,使布局规范简洁有规则。 网页栅格 ...

    .col-xs-超小屏幕 手机 (<768px),
    .col-sm-小屏幕 平板 (≥768px),
    .col-md-中等屏幕
    .col-lg-桌面显示器 (≥992px)(栅格参数)

    什么是栅格系统
    栅格系统英文为 Grid Systems,也有翻译为网格系统。

    定义:运用固定的格子,遵循一定的规则,进行页面的布局设计,使布局规范简洁有规则。
    在这里插入图片描述
    网页栅格
    包括网页端和移动端,是以规则的网格阵列来指导规范界面中的版面布局以及信息分布。
    栅格基础七要素
    最小单位

    需要先定好界面的单位基础,后续内容元素和布局规则都是基于它整数倍递增。

    网页端最小单位:10

    移动端最小单位:3、4、5
    在这里插入图片描述
    列数/N

    列数是界面总宽度设定好后,纵向等分成几列。

    • 网页端:12列、24列(常用等分列数,当然不是固定的,需要根据自己的内容设定列数)

    • 移动端:6列(常用等分列数)

    • 在这里插入图片描述

    • 大列宽/L

    把界面总宽度等分成几列,每一列的宽度即为大列宽。

    • 计算公式:L = W / N

    • 大列宽包含:列宽和水槽
      在这里插入图片描述
      水槽/G

    相邻两个列宽之间的间隔是水槽。

    水槽宽度越大,页面留白和呼吸感会更好,反之则更紧凑。水槽可以将内容更规范的区分开来。

    在这里插入图片描述
    列宽/C

    把界面总宽度等分成列,相邻两列之间的间隔(水槽)减去后就是列宽。
    在这里插入图片描述转载链接:https://www.jianshu.com/p/956065291d53

    展开全文
  • 十二栅格系统

    2019-06-26 16:02:51
    十二栅格系统栅格参数实例代码运行结果如下 栅格参数 通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。 实例 代码 <div class="container" style="padding:0px 0px 0px 0px"> <...

    栅格参数

    通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
    栅格参数

    实例

    代码

    <div class="container" style="padding:0px 0px 0px 0px">
    	<div class="row">
    		<div class="col-xs-12 col-lg-12">......</div>
     		<div class="col-xs-12 col-lg-12">......</div>
    	</div>
    </div>
    

    运行结果如下

    PC端效果图:
    在这里插入图片描述移动端效果图:
    在这里插入图片描述

    展开全文
  • 栅格系统

    2019-05-05 17:32:27
    一.移动设备优先在 ...它有一份非常重要的meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。 //分别为:屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 ...
  • 960栅格系统

    2020-07-22 23:31:36
    960栅格系统,方便网页设计人员进行快速工作
  • bootstap-栅格系统

    2019-07-09 23:20:13
    栅格系统 这个是重点 体验一下 本系统是要放在容器之中的 col-lg-n 数据加起来要等于12就OK 加上颜色样式后 大于1200的时候排成一行 小于1200的 第二套栅格 第三个栅格 更...
  • Bootstrap 流式栅格系统

    千次阅读 2018-05-23 22:37:33
    流式栅格系统Bootstrap的默认栅格系统没有启用响应式布局,如果加入响应式布局的CSS文件bootstrap-responsive.css,栅格系统会自动根据视口(viewport)宽度,在 724px 到 1170px 进行动态调整。当视口宽度小于 767...
  • 实现一个简单的栅格系统

    千次阅读 2017-04-16 12:29:07
    实现一个简单的栅格系统关于栅格系统相信大家都用过 Bootstrap (神马!你没用过?这么流行你还不快去试试),栅格系统就是 Bootstrap 的核心,现在许多 UI 库中也增加了对栅格系统的支持。栅格系统是通过对元素增加...
  • Bootstrap3栅格系统布局实例

    千次阅读 2019-05-02 09:34:12
    Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先。使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局。 先看一个简单实例,来加深对移动设备优先的理解。假设我们只使用...
  • Bootstrap 默认栅格系统

    2018-05-23 22:35:47
    默认栅格系统Bootstrap的默认栅格系统为固定宽度布局,宽度为940px,共包含12列,每列的宽度为 60px,列间隙为 20px。如图 2‑1所示:图2-1 Bootstrap默认栅格系统HTML代码默认栅格系统中定义了两个类,创建简单布局...
  • 在Bootstrap的学习中,栅格系统的使用可谓是十分重要了。使用栅格系统布局实际上可以简单理解为 “加强版的表格(table)布局”。 根据Bootstrap官方文档的描述: Bootstrap 提供了一套响应式、移动设备优先的流式...
  • 深入理解BootStrap-- 栅格系统(布局)7

    万次阅读 多人点赞 2016-01-06 09:18:17
    1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是...
  • Bootstrap栅格系统使用方法

    千次阅读 2017-01-16 14:25:33
    如果你以前使用过Bootstrap2或者了解过响应式技术,那么肯定对Bootstrap栅格系统并不陌生,由于栅格系统的引入,使得Bootstrap的跨设备布局显示变得可能。   什么是栅格系统 栅格系统是指,将页面布局划分...
  • Bootstrap栅格系统初识

    千次阅读 2017-02-02 19:17:22
    其实在栅格系统之前,我们已经采用过流式布局,也可以实现响应式的布局设计。我们在编写普通的页面时,经常会使用百分比的方式进行布局,实现简单的响应式布局,然后为各个标签写我们想要的样式。在Bootstrap中,是...
  • 页面布局 栅格系统

    千次阅读 2016-03-15 20:33:15
    1,栅格系统的原理 假设:Flowline的宽度为W,column的宽度为c,Gutter的宽度为g,Margin的宽度为m,栅格列数为N  W = c*N + g*(N-1) + 2m;g的宽度通常为m的两倍,所以:  W = (c+g) * N;把c+g记为C,得: ...
  • 1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是...
  • bootstrap栅格系统布局原理

    千次阅读 2018-11-23 15:54:57
    栅格系统用于通过一系列的行(row)与列(col)组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面介绍一下栅格bootstrap栅格系统的工作原理: 行(row)必须放在.container(固定宽度)或.container...
  • Bootstrap栅格系统 1.什么是栅格系统:  在Bootstrap中,它提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列...
1 2 3 4 5 ... 20
收藏数 20,580
精华内容 8,232
关键字:

栅格系统