bootstrap-less源码分析：行和列

一、行
grid.less文件中有关行的全部源码

.row {.make-row();//调用
}

//进mixin/grid.less找到行的定义

.make-row(@gutter: @grid-gutter-width) {margin-left:  ceil((@gutter / -2));//负的槽宽的一半 -15
margin-right: floor((@gutter / -2));
&:extend(.clearfix all);
}

二、列（最复杂）
grid.less文件中有关列的全部源码

.make-grid-columns();//第一步
.make-grid(xs);//第2.1步
@media (min-width: @screen-sm-min) {.make-grid(sm);
}
@media (min-width: @screen-md-min) {.make-grid(md);
}
@media (min-width: @screen-lg-min) {.make-grid(lg);
}

然后逐行分析
//进mixin/grid-framework.less找到行的定义（包括3个定义,1个调用,由参数的个数可以判断调用的是1）

.make-grid-columns() {// Common styles for all sizes of grid columns, widths 1-12
//定义1
.col(@index) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
//~" "里面的内容是避免编译的 但是@{index}会被替换成调用时的实参值
.col((@index + 1), @item);//“递归”调用，但从参数个数可看出调用的是定义2、3
}
//定义2
//@grid-columns是栅格的列数，默认值为12
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");//真正递归调用，函数名和参数类型个数都一样，第二个参数是拼接成的字符串
}
//定义3
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {//这里将@list这个变量当成了选择器去用
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left:  ceil((@grid-gutter-width / 2));
padding-right: floor((@grid-gutter-width / 2));
}
}
//调用
.col(1); // kickstart it
}

.make-grid(xs);//这是列的第2.1步
//可以看出bootstrap里面移动优先
//进mixin/grid-framework.less找到make-grid()的定义

.make-grid(@class) {.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}

//再在mixin/grid-framework.less找到float-grid-columns(@class)的定义

//和列的第一步非常相像
//先递归，产生.col-xs-1,.col-xs-2,...,.col-xs-12
//再加选择器
.float-grid-columns(@class) {.col(@index) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {float: left;
}
}
.col(1); // kickstart it
}

//再在mixin/grid-framework.less找到loop-grid-columns的定义

//@index==12,@class==xs,@type==width/pull/push/offset
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);//递归
}

//再在mixin/grid-framework.less找到.calc-grid-column(@index, @class, @type)的定义
//发现是1组共6个,注意到@index在递减

//每次调用.calc-grid-column(@index, @class, width)都会产生一个类似
//.col-xs-12{width:12/12}
//直到.col-xs-1{width:1/12}停下来
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {.col-@{class}-@{index} {width: percentage((@index / @grid-columns).calc-grid-column(@index, @class, @type));
}
}

//.calc-grid-column(@index, @class, pull)与.calc-grid-column(@index, @class, pull)都属于列排序

//.calc-grid-column(@index, @class, pull)每次执行会产生一个类似
//.col-xs-push-12{left: 12/12}
//直到.col-xs-push-1{left: 1/12}
//加上@type==width时没有的.col-xs-push-0{left: auto}
//.calc-grid-column(@index, @class, push)就是pull改成push,把left换成right
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {//会被执行12次
.col-@{class}-push-@{index} {left: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {//会被执行1次
.col-@{class}-push-0 {left: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {//会被执行12次
.col-@{class}-pull-@{index} {right: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {//会被执行1次
.col-@{class}-pull-0 {right: auto;
}
}

//.calc-grid-column(@index, @class, offset)属于列偏移

//每次执行会产生.col-xs-offset-12{margin-left: 12/12}
//直至.col-xs-offset-0{margin-left: 0}
.calc-grid-column(@index, @class, @type) when (@type = offset) {.col-@{class}-offset-@{index} {margin-left: percentage((@index / @grid-columns));
}
}

余下三个类似，不过是把xs换成了sm,md,lg

@media (min-width: @screen-sm-min) {.make-grid(sm);
}
@media (min-width: @screen-md-min) {.make-grid(md);
}
@media (min-width: @screen-lg-min) {.make-grid(lg);
}

视频地址：https://www.bilibili.com/video/BV1YW411T7yy?p=3

bootstrap-less源码分析：行和列相关推荐

NEO从源码分析看数字资产
0x00 引言比特币是泡沫么?也许是的.毕竟这东西除了用来炒,干什么实事都感觉肉疼.但是有人将比特币泡沫和郁金香泡沫相提并论就很气人了,郁金香什么鬼,长那么一年,开那么几天,泡沫还没破呢,郁金香已经 ...
NEO源码分析之UTXO全局资产
作者:廖京辉原文链接:https://mp.weixin.qq.com/s?__biz=MzUzNDQwNDQ0Mw==&mid=2247483941&idx=1&sn=4a ...
Appium Android Bootstrap源码分析之简介
在上一个系列中我们分析了UiAutomator的核心源码,对UiAutomator是怎么运行的原理有了根本的了解.今天我们会开始另外一个在安卓平台上基于UiAutomator的新起之秀--Appium ...
手机自动化测试：appium源码分析之bootstrap八
手机自动化测试:appium源码分析之bootstrap八 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大 ...
手机自动化测试：appium源码分析之bootstrap十二
手机自动化测试:appium源码分析之bootstrap十二 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请 ...
手机自动化测试：appium源码分析之bootstrap七
手机自动化测试:appium源码分析之bootstrap七 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest测试开发 ...
Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
Appium Server源码分析之作为Bootstrap客户端
Appium Server拥有两个主要的功能: 它是个http服务器,它专门接收从客户端通过基于http的REST协议发送过来的命令他是bootstrap客户端:它接收到客户端的命令后,需要想办法把 ...
bootstrap源码分析之Carousel
源码文件: Carousel.scss Carousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应源码分析: 1.Html结构:主要分为以四个部分 ...
PostgreSQL源码分析
PostgreSQL源码结构 PostgreSQL的使用形态 PostgreSQL采用C/S(客户机/服务器)模式结构.应用层通过INET或者Unix Socket利用既定的协议与数据库服务器进行通信 ...

bootstrap-less源码分析：行和列

bootstrap-less源码分析：行和列相关推荐

最新文章

热门文章