bootstrap中栅格系统的原理
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中栅格系统的原理的更多相关文章
- Bootstrap 12 栅格系统
栅格系统简介 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列.它包含了易于使用的预定义类,还有强大的mix ...
- MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统
文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...
- Bootstrap的栅格系统
Bootstrap的栅格系统 上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 源码下载:点我下载 要做一个完整的系统,除了需要MVC这样的B/S框架及EF这 ...
- bootstrap课程2 bootstrap的栅格系统的主要作用是什么
bootstrap课程2 bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...
- 深入理解BootStrap之栅格系统(布局)
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
- Bootstrap(5)栅格系统
一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放 ...
- bootstrap的栅格系统和响应式工具
关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下 一:meta标签的引用 < ...
- Bootstrap之栅格系统
bootstrap 移动优先 中文官网 http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...
- Bootstrap学习--栅格系统
响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...
随机推荐
- 【HDU4706】Children's Day
http://acm.hdu.edu.cn/showproblem.php?pid=4706 水题,也不知道有没有spj // <4706.cpp> - 11/03/16 14:11:21 ...
- Mac os x下配置 Android ndk 开发环境
1.阅读下面之前,请确保你android sdk的开发环境已经搭建好,ADT也最好是目前最新的. 2.到http://developer.android.com/tools/sdk/ndk/index ...
- java 语法 —— 数组
1. 编译器不允许指定数组的大小 int[] a1; 既然编译器不允许指定数组的大小,现在 a1 拥有的只是对数组的一个引用,且未给该数组对象本身分配任何空间.为了给数组创建对应的存储空间,必须写初始 ...
- DNS域名记录
DNS域名记录 DNS数据库 在DNS的解析过程中用到域名的解析资源的记录,这个解析记录在DNS当中称为DNS数据库. 这个数据库又分为正解和反解,正解就是从主机名到ip的过程,反解就是从ip反响解析 ...
- samba - linux客户端访问samba服务器的指令(转载)
转自:http://linux.sheup.com/linux/linux5303.htm linux客户端访问samba服务器的指令2004-04-23 15:18 pm来自:Linux文档现载:W ...
- Python基础 — Pandas
Pandas -- 简介 Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的. Pandas ...
- bzoj 1724: [Usaco2006 Nov]Fence Repair 切割木板【堆】
如果反着看,看成合并木板,就和合并果子一样了,把若干块放进一个小根堆,然后每次取出两个合并,把合并结果加进答案和堆里 代码里小根堆用优先队列实现(懒 #include<iostream> ...
- mysql 的索引hash和b+tree 区别
索引hash相当于数组,键值对组合,对于id = 6或者status= 2这样条件查询,但是对于id>12等这样,用btree索引最好.
- Uva 10766 Organising the Organisation (Matrix_tree 生成树计数)
题目描述: 一个由n个部门组成的公司现在需要分层,但是由于员工间的一些小小矛盾,使得他们并不愿意做上下级,问在满足他们要求以后有多少种分层的方案数? 解题思路: 生成树计数模板题,建立Kirchhof ...
- BFS(倒水问题) HDU 1495 非常可乐
题目传送门 /* BFS:倒水问题,当C是奇数时无解.一共有六种情况,只要条件符合就入队,我在当该状态vised时写了continue 结果找了半天才发现bug,泪流满面....(网上找份好看的题解都 ...