1、基本结构

  Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局。

  Bootstrap划分了四种尺寸:超小屏(手机)、小屏(平板竖屏)、中屏(平板横屏)和大屏(PC),每一类中顶层包含块container的宽度都是固定的。还可以使用.container-fluid将固定宽度转换为连续的宽度(width=100%)。

  这里有个疑问:为什么对于大屏设备,container的宽度要设计为1170px。既然是12列栅格,设计成1200px不是显得更规整、也更容易向产品和UI解释吗?

  原来bootstrap为了避免内容占满屏幕,确保在1200px宽的设备两边留出一定的边距,因此将container的最大宽度设为1170px,并使用margin-left:auto和margin-right:auto将container居中,从而确保两边各留出15px的边距。所有列宽均设置为百分比,根本不考虑具体数值。所以if(你有整数情结){不要受整数情结的影响}。

  Bootstrap的栅格系统是一个三层结构,除了外围的container和内部的column,中间还有一个夹层row,并且Bootstrap要求所有的column必须包含在row里面,这是为什么呢?

  原来Bootstrap将所有元素的盒模型设置为了border-box:

  因此container宽度为1170px,减去左右共30px的padding,于是container的内容宽度就只剩1140px,这下所有col栅格的百分比乘的都是1140而不是1170,为解决此问题,Bootstrap在container中新增了一个夹层row,通过使用负的margin增加row的宽度至1170px。这里用到了盒模型尺寸的计算原理:块元素左右外边距、左右border、左右内边距和width这七个值之和必须等于包含块的content width。row的包含块container的content width为1140px,因此对于row而言,就存在如下等量关系:

  -15px+0+0+width+0+0+(-15px)= 1140

  于是row的width就自动扩展到1170px了。

  这样是不是显得有点多此一举呢?既然container左右两边都有15px的外边距了,为什么还要设计15px的内边距?如果没有这个内边距,不就不需要额外添一个夹层row了吗?

  这里就是Bootstrap设计的精巧之处:因为栅格之间需要间隔,因此每个column栅格都设置了15px的padding:

  这意味着每个column实际上也可以看成一个container!我们可以在任意一个column内再嵌套一个栅格系统,而无需再添加container,只需添加一个row即可,不要将row理解成“行”,它就是一个包含块而已。这样的三层结构使得Bootstrap成为了一个可以无限嵌套的响应式系统,每一个栅格都可以看做一个独立的系统,container只不过是那个最大的栅格而已。

  另外,Bootstrap栅格系统预设的数值,如列数、槽宽以及媒体查询阈值都是可以修改的。可定制化是所有优秀框架的另一个共同品质。

 2、列排序与列偏移

  Bootstrap将所有列的position都设成了relative,就在于可对列进行定位或排序,比如要将某一个列定位到12分之3处(即从第三、四列交界处开始),可以设置left:25%或者right:75%。Bootstrap已经预设好了相应的类名:

  列偏移的不同之处在于使用margin,而被margin挤占的区域没办法安放其它的列。

bootstrap中栅格系统的原理的更多相关文章

  1. Bootstrap 12 栅格系统

    栅格系统简介 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列.它包含了易于使用的预定义类,还有强大的mix ...

  2. MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

    文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...

  3. Bootstrap的栅格系统

    Bootstrap的栅格系统 上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 源码下载:点我下载 要做一个完整的系统,除了需要MVC这样的B/S框架及EF这 ...

  4. bootstrap课程2 bootstrap的栅格系统的主要作用是什么

    bootstrap课程2  bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...

  5. 深入理解BootStrap之栅格系统(布局)

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

  6. Bootstrap(5)栅格系统

    一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放 ...

  7. bootstrap的栅格系统和响应式工具

    关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下 一:meta标签的引用 < ...

  8. Bootstrap之栅格系统

    bootstrap 移动优先 中文官网  http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...

  9. Bootstrap学习--栅格系统

    响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...

随机推荐

  1. c# 关于一些数值转换的整理(部分)

    1.c#整型转字符型,不足2位的在前面补0. //1->01 1.ToString().PadLeft(2,'0'); 2.Convert.ToString(str1)和str1.ToStrin ...

  2. 混淆时报:Proguard returned with error code 1. See console

    发生这个错误是因为打包混淆时找不到我们的引用包,有的人可能说我没有引用什么Library啊,事实上,我们现在的项目创建时就默认有v4包,这是google提供的兼容包,主要为了应对Android3.0以 ...

  3. 【PA 2014】Kuglarz

    [题目链接]            点击打开链接 [算法]            sum[i]表示前i个杯子中,杯子底下藏有球的杯子总数            那么,知道[i,j]这段区间中,藏有球的 ...

  4. python-----模糊搜索文件

    告诉计算机文件在哪  →  使用路径描述位置 描述文件的特征  →  用条件判断来筛选 比对后打印文件名  →  用循环来实现逐个比对 #!/usr/bin/env python # -*- codi ...

  5. JSP:目录

    ylbtech-JSP:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.c ...

  6. JS复制文件(转)

    <script type="text/javascript"> var fso, f; function copyFile() { fso = new ActiveXO ...

  7. 【第三届强网杯】write up

    一,鲲or鳗orGame 从浏览器里拿到game.gb 用 VisualBoyAdvance ,搜索内存变量,然后改变量就完事了,但是改变量他们说直接利用添加代码功能有bug,所以要在工具里的内存查看 ...

  8. layui 动态左树导航栏显示样式BUG规避

    先看问题现象: 使用 layui 的左树功能,先在html页面添加左树功能引入 <ul class="layui-nav layui-nav-tree layui-nav-side&q ...

  9. 转 awr自动收集脚本

    1. remote get awr report #!/usr/bin/ksh ####sample: sh awr.sh 20170515 20170516 AWR ### default it w ...

  10. Storm概念学习系列之storm的可靠性

    这个概念,对于理解storm很有必要. 1.worker进程死掉 worker是真实存在的.可以jps查看. 正是因为有了storm的可靠性,所以storm会重新启动一个新的worker进程. 2.s ...