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 ...
随机推荐
- c# 关于一些数值转换的整理(部分)
1.c#整型转字符型,不足2位的在前面补0. //1->01 1.ToString().PadLeft(2,'0'); 2.Convert.ToString(str1)和str1.ToStrin ...
- 混淆时报:Proguard returned with error code 1. See console
发生这个错误是因为打包混淆时找不到我们的引用包,有的人可能说我没有引用什么Library啊,事实上,我们现在的项目创建时就默认有v4包,这是google提供的兼容包,主要为了应对Android3.0以 ...
- 【PA 2014】Kuglarz
[题目链接] 点击打开链接 [算法] sum[i]表示前i个杯子中,杯子底下藏有球的杯子总数 那么,知道[i,j]这段区间中,藏有球的 ...
- python-----模糊搜索文件
告诉计算机文件在哪 → 使用路径描述位置 描述文件的特征 → 用条件判断来筛选 比对后打印文件名 → 用循环来实现逐个比对 #!/usr/bin/env python # -*- codi ...
- JSP:目录
ylbtech-JSP:目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech.c ...
- JS复制文件(转)
<script type="text/javascript"> var fso, f; function copyFile() { fso = new ActiveXO ...
- 【第三届强网杯】write up
一,鲲or鳗orGame 从浏览器里拿到game.gb 用 VisualBoyAdvance ,搜索内存变量,然后改变量就完事了,但是改变量他们说直接利用添加代码功能有bug,所以要在工具里的内存查看 ...
- layui 动态左树导航栏显示样式BUG规避
先看问题现象: 使用 layui 的左树功能,先在html页面添加左树功能引入 <ul class="layui-nav layui-nav-tree layui-nav-side&q ...
- 转 awr自动收集脚本
1. remote get awr report #!/usr/bin/ksh ####sample: sh awr.sh 20170515 20170516 AWR ### default it w ...
- Storm概念学习系列之storm的可靠性
这个概念,对于理解storm很有必要. 1.worker进程死掉 worker是真实存在的.可以jps查看. 正是因为有了storm的可靠性,所以storm会重新启动一个新的worker进程. 2.s ...