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. 【HDU4706】Children's Day

    http://acm.hdu.edu.cn/showproblem.php?pid=4706 水题,也不知道有没有spj // <4706.cpp> - 11/03/16 14:11:21 ...

  2. Mac os x下配置 Android ndk 开发环境

    1.阅读下面之前,请确保你android sdk的开发环境已经搭建好,ADT也最好是目前最新的. 2.到http://developer.android.com/tools/sdk/ndk/index ...

  3. java 语法 —— 数组

    1. 编译器不允许指定数组的大小 int[] a1; 既然编译器不允许指定数组的大小,现在 a1 拥有的只是对数组的一个引用,且未给该数组对象本身分配任何空间.为了给数组创建对应的存储空间,必须写初始 ...

  4. DNS域名记录

    DNS域名记录 DNS数据库 在DNS的解析过程中用到域名的解析资源的记录,这个解析记录在DNS当中称为DNS数据库. 这个数据库又分为正解和反解,正解就是从主机名到ip的过程,反解就是从ip反响解析 ...

  5. samba - linux客户端访问samba服务器的指令(转载)

    转自:http://linux.sheup.com/linux/linux5303.htm linux客户端访问samba服务器的指令2004-04-23 15:18 pm来自:Linux文档现载:W ...

  6. Python基础 — Pandas

    Pandas -- 简介 Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.        Pandas ...

  7. bzoj 1724: [Usaco2006 Nov]Fence Repair 切割木板【堆】

    如果反着看,看成合并木板,就和合并果子一样了,把若干块放进一个小根堆,然后每次取出两个合并,把合并结果加进答案和堆里 代码里小根堆用优先队列实现(懒 #include<iostream> ...

  8. mysql 的索引hash和b+tree 区别

    索引hash相当于数组,键值对组合,对于id = 6或者status= 2这样条件查询,但是对于id>12等这样,用btree索引最好.

  9. Uva 10766 Organising the Organisation (Matrix_tree 生成树计数)

    题目描述: 一个由n个部门组成的公司现在需要分层,但是由于员工间的一些小小矛盾,使得他们并不愿意做上下级,问在满足他们要求以后有多少种分层的方案数? 解题思路: 生成树计数模板题,建立Kirchhof ...

  10. BFS(倒水问题) HDU 1495 非常可乐

    题目传送门 /* BFS:倒水问题,当C是奇数时无解.一共有六种情况,只要条件符合就入队,我在当该状态vised时写了continue 结果找了半天才发现bug,泪流满面....(网上找份好看的题解都 ...