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 相关文章推荐
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 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之COOKIE支持详解
2010/09/20 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
javascript FormatNumber函数实现方法
2008/12/30 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
python实现的简单抽奖系统实例
2015/05/22 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python中的元组介绍
2019/01/28 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
python简单实现插入排序实例代码
2020/12/16 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
初一地理教学反思
2014/01/16 职场文书
关于长城的导游词
2015/01/30 职场文书
湘江北去观后感
2015/06/15 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android