栅格系统源码分析(一)

栅格源码用less写的
我们分析栅格源码可以使我们掌握一些less书写技巧。

在栅格源码里有一个variables.less的文件是用来存储栅格里面的变量的,当他需要使用这些变量的时候就可以来这里调用,而且变量全写在一个文件里容易后期维护,我们在写项目的时候也可以这样

然后有一个入口文件grid.less即这是栅格系统的入口,我们用的栅格系统就是从这里出发,可以看作是一个接口,即这里这个文件调用其他整个栅格系统的文件代码程序,这里面写的很简单但是调用的东西很多,可以把他比作文件向外的枢纽中心。

固体和流体容器的公共样式
栅格系统源码分析(一)这里面后两行的语句是定义的槽宽,什么是槽宽?看这里面

栅格系统的行

行的源码写在.row的规则集中,他会调用下面的.make-row
栅格系统源码分析(一)这里是定义的行的一部分源码,这里设置了两个外边距为负槽宽的一半

就是这种情况
栅格系统源码分析(一)栅格会超出页面大小

后面是继承.clearfix的规则集,带个all表示全部继承,就等于把.clearfix里面的代码全部复制过来,make-row会调用.clearfix这个是用于清除浮动的
所以我们写代码,可以专门写一个规则集用于放清除浮动的,然后其他某些混合要调用的话可以继承这个规则集,这也是bootstrap开发者推荐的方式

栅格系统的列

列其实简单来说也就是用浮动写的,他的换行也是浮动互相挤压,一行挤不进去了然后换行
栅格系统的列,反正就是下图这样,就是一列一列的东西
栅格系统源码分析(一)
我们这里设置的是class=col-xs-1他对应的是移动端,所以不会轻易的换行,除非真的放不下了才会换行
栅格系统源码分析(一)这里是被挤的太狠了放不下了,所以换行

栅格系统源码分析(一)这是列的定义的一部分源码,但也是个入口混合通过这个混合来调用其他混合规则集,来实现列的功能

列实现的第一步

下面的作用是选定含有相关属性的容器并为他添加指定的样式

下面是make-grid-columns
栅格系统源码分析(一)用的是递归调用,这是less中唯一的循环方式,首先第三行定义.col()带有一个参数的混合,第二十一行调用这个带一个参数的混合,然后在这个混合当里面第五行又调用带两个参数的混合,这个带两个参数的混合在下面有两个定义,具体掉=调用哪个要看后面的when判断条件

后面第八行和第十二行是less中的判断语句类似于if...else...,即这里是满足后面的when()中括号里的内容时才会调用这个函数,这里的@grid-columns是12

后面第10行,再次调用带一个参数的.col()函数,即递归,此时块级作用域中的@index形参的值增加1,再递归再增加1,慢慢的会超过12,这里是递归循环

下面这里就选出了相关需要加样式的容器
栅格系统源码分析(一)当这里的形参@index变为13即大于12的时候,就会变成15到18行里面的东西

下面就是根据他的属性值来选择容器并为他添加样式
栅格系统源码分析(一)然后调用下面的两个参数的.col()混合,然后就变成了红线圈着的东西

第二步

调用.make-grif()混合
栅格系统源码分析(一)调用.make-grif()混合,bootstrap中移动优先,即就图中那样,代码执行下来,先判断是不是移动端是的话就不会执行下面的代码,不是的话一步步向下执行(这里有页面怎么判断是什么端的内容—>地址)

栅格系统源码分析(一)这是.make-grid()混合

栅格系统源码分析(一)这是.float-grid-columns混合跟上面一模一样的东西,不过这里设置的样式不一样,这里社会的是float:left浮动样式

栅格系统源码分析(一)这是.loop-grid-columns().calc-grid-column()混合

还是一个递归,递归结果如下
栅格系统源码分析(一)这里设置他们的宽度

这里有一个写响应式页面的技巧

即我们如果想要我们写的页面在不同终端展现不同的效果,那么我们可以给每个栅格列多加几个类,使他在不同的尺寸下有不同的效果,如下
栅格系统源码分析(一)我们设置这个列在xs(移动端)端的时候是一列占3格一列占9格,当尺寸达到lg端的时候,我们这两个列各占6格

栅格系统源码分析(一)这是xs端

栅格系统源码分析(一)这是尺寸在lg端

匿名

发表评论

匿名网友