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 相关文章推荐
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
一个JavaScript继承的实现
2006/10/24 Javascript
用jscript启动sqlserver
2007/06/21 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
python元组的概念知识点
2019/11/19 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
化工工艺专业求职信
2013/09/22 职场文书
店长岗位的工作内容
2013/11/12 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
庆七一宣传标语
2014/10/08 职场文书
房屋买卖协议样本
2014/11/16 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android