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 相关文章推荐
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
JS实现日期加减的方法
Nov 29 Javascript
javascript与有限状态机详解
May 08 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
javaScript Array api梳理
Mar 31 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
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
javascript天然的迭代器
2010/10/29 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python深入06——python的内存管理详解
2016/12/07 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
Python面向对象编程基础实例分析
2020/01/17 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
小学生新学期寄语
2014/01/19 职场文书
体育口号大全
2014/06/18 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
小石潭记导游词
2015/02/03 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
元旦晚会开场白
2015/05/29 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
赤壁观后感(2)
2015/06/15 职场文书
发票退票证明
2015/06/24 职场文书
竞聘书的秘诀
2019/04/02 职场文书
教你用python实现12306余票查询
2021/06/30 Python
Python可视化学习之seaborn调色盘
2022/02/24 Python