Bootstrap3 Grid system原理及应用详解


Posted in Javascript onSeptember 30, 2016

刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题:

我的页面中有这样一个布局

Bootstrap3 Grid system原理及应用详解

我希望当屏幕的宽度小于他们俩宽度之和的时候,右边的部分会掉下来,他们垂直摆放。

而我用col-xs-6的话,右边的盒子永远都不会掉下来。

Bootstrap3 Grid system原理及应用详解

文字就变得这么丑。

如果我用col-sm-6的话,右边的盒子又会太早掉下来。

Bootstrap3 Grid system原理及应用详解

此时的屏幕宽度是766px,他就已经堆叠排放了,两边留下了大片空白,还是很丑。

而Bootstarp没有提供中间的选项了。

想要解决这个问题,必须要弄清楚这种响应式布局的是如何工作的。

Bootstarp将这种机制成为Grid system

思想:

将屏幕划分成相等大小的格子,一般划分成12,24,或32份。Bootstrap选择默认划分成12份。

规则:

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

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

3.列与列之间有30px的间距。

4.提供4种不同类型的列:

Bootstrap3 Grid system原理及应用详解

在我看来,这张图就是Grid system的精髓所在,通过试验可以发现:

当屏宽小于768px(即小屏)时,列的划分以.col-xs-后面的数字为准。如果没定义.col-xs-,就会变成单列且宽度和row相等。

当屏宽在768px和992px之间(即平板屏)时,列的划分以.col-sm-后面的数字为准。如果没有定义col-sm-,以.col-xs-为准。

当屏宽在992px和1200px之间(即中屏)时,列的划分以.col-md-后面的数字为准。如果没有定义.col-md-,以col-sm-或col-xs-为准。

当屏宽大于1200px(即大屏)时,列的划分以.col-lg-后面的数字为准。如果没有定义.col-md-,以.col-md-或col-sm-或col-xs-为准。

核心原理:

这种响应机制是怎么实现的呢?

用一个例子来研究一下,在HTML中写一个这样的结构:

<div class="container">
 <div class="row">
 <div class="col-xs-3 col-md-4 col-sm-6 col-lg-2">col-xs-3 col-sm-6 col-md-4 col-lg-2</div>
 <div class="col-xs-3 col-md-8 col-sm-6 col-lg-10">col-xs-3 col-sm-6 col-md-8 col-lg-10</div> 
 </div>
</div>

当屏幕宽为1280px(大屏)时,这一行是二十分,md sm xs的宽度都失效了

Bootstrap3 Grid system原理及应用详解

当屏幕宽为996px(中屏)时,这一行是四八分,可以看到sm xs的宽度失效。

Bootstrap3 Grid system原理及应用详解

当屏幕宽为980px(平板屏)的时候 ,这一行是六六分。xs的宽度失效。

Bootstrap3 Grid system原理及应用详解

当屏幕宽为600px(小屏)时,

Bootstrap3 Grid system原理及应用详解

所以他的源码应该是这样的:

//其他.col-xs-
.col-xs-3 {
 width: 25%;
}
//其他.col-xs-

所有xs {
 float:left;
}

@media (min-width: 768px){
所有sm {
 float:left;
}
//其他.col-sm-
.col-sm-6 {
 width: 50%;
}
//其他.col-sm-
}

@media (min-width: 992px){
所有md {
 float:left;
}
//其他.col-md
.col-md-8{
 width: 66.66666667%;
}
//其他.col-md
}

@media (min-width: 1200px){
所有lg {
 float:left;
}
//其他.col-lg-

.col-lg-10 {
 width: 83.33333333%;
}
//其他.col-lg-
}

顺序不能改变,因为boostrap3的原则就是mobile first。

col-xs-*永远都是单行是因为,他的width和float都不定义在@media里面,不管屏幕怎么变,他都有自己的宽度和浮动。

所以,如果我想要让屏幕小于450px时两个盒子堆叠排列的话,我需要让xs失去自己的宽度。

@media(max-width: 450px){
 .col-xs-6 {
 width: 100%;
 }
}

添加一个这样的代码,我想要的效果就可以实现了。

其他原理:

1.列的划分和嵌套是用百分比+浮动实现的。

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
 float: left;
 }
.col-md-12 {
 width: 100%;
 }
 .col-md-11 {
 width: 91.66666667%;
 }
 .col-md-10 {
 width: 83.33333333%;
 }
 .col-md-9 {
 width: 75%;
 }
 .col-md-8 {
 width: 66.66666667%;
 }
 .col-md-7 {
 width: 58.33333333%;
 }
 .col-md-6 {
 width: 50%;
 }
 .col-md-5 {
 width: 41.66666667%;
 }
 .col-md-4 {
 width: 33.33333333%;
 }
 .col-md-3 {
 width: 25%;
 }
 .col-md-2 {
 width: 16.66666667%;
 }
 .col-md-1 {
 width: 8.33333333%;
 }

2.列与列之间的间距是由每一列(column)的padding实现的,最两边的列的padding由(.row)的负margin抵消:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
 position: relative;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
}
.row {
 margin-right: -15px;
 margin-left: -15px;
}

3.列偏移是通过在列的左边添加margin实现的。

.col-md-offset-12 {
 margin-left: 100%;
}
 .col-md-offset-11 {
 margin-left: 91.66666667%;
 }
 .col-md-offset-10 {
 margin-left: 83.33333333%;
 }
 .col-md-offset-9 {
 margin-left: 75%;
 }
 .col-md-offset-8 {
 margin-left: 66.66666667%;
 }
 .col-md-offset-7 {
 margin-left: 58.33333333%;
 }
 .col-md-offset-6 {
 margin-left: 50%;
 }
 .col-md-offset-5 {
 margin-left: 41.66666667%;
 }
 .col-md-offset-4 {
 margin-left: 33.33333333%;
 }
 .col-md-offset-3 {
 margin-left: 25%;
 }
 .col-md-offset-2 {
 margin-left: 16.66666667%;
 }
 .col-md-offset-1 {
 margin-left: 8.33333333%;
 }
 .col-md-offset-0 {
 margin-left: 0;
 }

4..col-md-push-*和 .col-md-pull-*是通过设置relative定位的盒子的left和right实现的。

.col-md-pull-12 {
 right: 100%;
 }
 .col-md-pull-11 {
 right: 91.66666667%;
 }
 .col-md-pull-10 {
 right: 83.33333333%;
 }
 .col-md-pull-9 {
 right: 75%;
 }
 .col-md-pull-8 {
 right: 66.66666667%;
 }
 .col-md-pull-7 {
 right: 58.33333333%;
 }
 .col-md-pull-6 {
 right: 50%;
 }
 .col-md-pull-5 {
 right: 41.66666667%;
 }

 .col-md-pull-4 {
 right: 33.33333333%;
 }

 .col-md-pull-3 {
 right: 25%;
 }

 .col-md-pull-2 {
 right: 16.66666667%;
 }
 .col-md-pull-1 {
 right: 8.33333333%;
 }
 .col-md-pull-0 {
 right: 0;
 }

 .col-md-push-12 {
 left: 100%;
 }
 .col-md-push-11 {
 left: 91.66666667%;
 }
 .col-md-push-10 {
 left: 83.33333333%;
 }
 .col-md-push-9 {
 left: 75%;
 }
 .col-md-push-8 {
 left: 66.66666667%;
 }
 .col-md-push-7 {
 left: 58.33333333%;
 }
 .col-md-push-6 {
 left: 50%;
 }
 .col-md-push-5 {
 left: 41.66666667%;
 }
 .col-md-push-4 {
 left: 33.33333333%;
 }
 .col-md-push-3 {
 left: 25%;
 }
 .col-md-push-2 {
 left: 16.66666667%;
 }
 .col-md-push-1 {
 left: 8.33333333%;
 }
 .col-md-push-0 {
 left: 0;
 }

知道了这些原理,也就知道了他的功能和局限,也就可以改动任何地方,让他为你效劳了。

应用:

如果想要让中屏幕切换到平板屏幕之后,布局从三列变成两列,可以写成:

<div class="row">
 <div class="col-sm-6 col-md-4">1</div>
 <div class="col-sm-6 col-md-4">2</div>
 <div class="col-sm-6 col-md-4">3</div>
 <div class="col-sm-6 col-md-4">4</div>
 <div class="col-sm-6 col-md-4">5</div>
 <div class="col-sm-6 col-md-4">6</div>
</div>

效果:

Bootstrap3 Grid system原理及应用详解

Bootstrap3 Grid system原理及应用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
js实现随机数小游戏
Jun 28 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 #Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 #Javascript
javascript的几种写法总结
Sep 30 #Javascript
Vue.js实现拖放效果的实例
Sep 30 #Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 #Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 #Javascript
关于List.ToArray()方法的效率测试
Sep 30 #Javascript
You might like
Php header()函数语法及使用代码
2013/11/04 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
限制文本字节数js代码
2007/03/06 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Python字典对象实现原理详解
2019/07/01 Python
简单了解python变量的作用域
2019/07/30 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
史上最牛的辞职信
2015/02/28 职场文书
小学校长个人总结
2015/03/03 职场文书
应聘教师自荐信
2015/03/26 职场文书
新娘婚礼致辞
2015/07/27 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技