Bootstrap源码解读网格系统(3)


Posted in Javascript onDecember 22, 2016

源码解读Bootstrap网格系统

工作原理

数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:

<div class="container">
 <div class="row"></div>
</div>

.container的实现源码:

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}
@media (min-width: 992px) {
 .container {
 width: 970px;
 }
}
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
}

在行中可以添加列,但列数之和不能超过平分的总列数,比如12。如:

<div class="container">
 <div class="row">
 <div class="col-md-4"></div>
 <div class="col-md-8"></div>
 </div>
</div>

列的实现源码如下:

.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;
}

1、具体内容应当放置在列容器之内,而且只有列才可以作为行容器的直接子元素。
2、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响。

.row的实现源码:

.row {
 margin-right: -15px;
 margin-left: -15px;
}

列组合

列组合就是更改数字来合并,不过列总和数不能超12,有点类似于表格的colspan属性。实现列组合方式非常简单,只涉及两个CSS两个特性:浮动与宽度百分比。以xs为例,源码如下:

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

列偏移

例如,在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。
实现原理非常简单,就是利用十二分之一的margin-left,有多少个offset,就有多少个margin-left。以xs为例,实现源码如下:

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

列排序

可以使用类名“col-xs-pull-数字”,“col-xs-push-数字”来实现这个效果。
Bootstrap仅通过设置left和right来实现定位效果。以xs为例,实现源码如下:

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

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

Javascript 相关文章推荐
Javascript JSQL,SQL无处不在,
May 05 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
js微信支付实现代码
Dec 22 #Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 #Javascript
Html中 IFrame的用法及注意点
Dec 22 #Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 #Javascript
BootStrap3使用错误记录及解决办法
Dec 22 #Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 #Javascript
Angular-Touch库用法示例
Dec 22 #Javascript
You might like
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
基于JQuery的多标签实现代码
2012/09/19 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
详解python深浅拷贝区别
2019/06/24 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
css3绘制百度的小度熊
2018/10/29 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
2014年社团工作总结范文
2014/11/27 职场文书
财务稽核岗位职责
2015/04/13 职场文书
社会实践单位意见
2015/06/05 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers