美文网首页
bootstrap源码解析笔记

bootstrap源码解析笔记

作者: houxnan | 来源:发表于2019-11-08 10:31 被阅读0次

bootstrap的样式都在源码中写好的,所以可以通过一些源码来看我们所使用的的样式是怎么回事。

首先源码可以从官网下载下来,具体如图:

下载下来之后是这个文件夹:

打开这个文件夹,找到文件夹里less文件夹

打开less文件夹,找到grid.less、mixins、variables.less文件,在mixins文件夹里也有个grid.less文件

打开grid.less、mixins文件夹下的grid.less、还有variables.less

在grid.less里我们可以看到.container引用了.container-fixed();的样式,

在mixins文件夹里的grid里有.container-fixed();的具体样式,如图:

而这个.container-fixed()里写的padding-left:floor(@gutter/2)的值,在variables.less文件里,我们可以找到gutter的值为30px,则padding-left值为15px即在栅格系统中默认容器padding-left值为15px。

同样的道理,我们可以在grid.less文件里看到的内容,到mixins文件夹的grid.less中找详细信息,再到variables.less中找到具体值。就这样一层层的引用下来。

row、column、行偏移、列偏移等都可以从这3个文件里看到相关内容。

相关文章

网友评论

      本文标题:bootstrap源码解析笔记

      本文链接:https://www.haomeiwen.com/subject/gkribctx.html