bootstrap-1-栅格源码阅读

目录
  • 老师的桌面 - 2018年1月30日
  • 引子
  • 容器
  • 栅格布局
  • grid源码
  • 阅读container的源码
    • .container-fixed()
    • 固定容器中的媒体查询
  • 阅读row的源码
    • ☆ tips
  • 阅读列的源码
    • 1 - .make-grid-columns混合
    • 2 - .make-grid()混合
      • 2.1 - .float-grid-columns混合
      • 2.2 - .loop-grid-columns混合
      • 2.3 列排序
      • 2.4 列偏移
  • 老师其他学生的笔记
  • 栅格源码分析总结
  • 栅格组合
  • layui

老师的桌面 - 2018年1月30日

引子

之前同学们是写过原生轮播图的。

  • webpack
  • gulp
  • grunt
  • rollup
  • parcel

上面五个都是打包工具。

  • 国内的vue
  • 印度的angular
  • 欧洲的react

我们建议的技术栈是react+vue。

angular的技术学习曲线太陡峭，需要学习typescript。

这个就叫做响应式，不同的设备一套代码适配好多个终端，核心就是媒体查询。

bootstrap上来就将所有的盒子模型重置了，变成了border-box。

为了增强跨浏览器表现的一致性，使用了normalize.css，这是由nicolas gallagher 和 jonathan neal维护的一个css重置样式库。

这个人就是nicolas gallagher。

这个人就是jonathan neal。

www.cssreset.com，这也是一个跟normalize.css一样的玩意。

这就是搭建一个bootstrap最简单的做法。

容器

可以看到是有padding-left和padding-right的。margin right: auto margin left: auto，这个就是左右居中的。

什么叫做流体容器，就是弹性布局的。

流体布局就相当于width=auto。

768、992、1200

这里也就是说width的默认值是auto，width是auto和width是100%的意思是不一样的，width为auto的时候，加上padding的时候，是往内加padding，width是100%的时候，加padding的时候，是往外加padding。

一般我们都是使用固定容器，很少去使用流体容器。

我们到了这里学习了两个class，一个叫做container，一个叫做container-fluid。

栅格布局

栅格布局真的跟flex很像的，就是因为有了栅格布局之后，才会有flex的，这个是我个人意淫的。

div[class|=col] { // 这个叫做属性选择器，div的class属性，以col开头的元素。
	border: 1px solid;
}


    

        
col-lg-10

 	    
col-lg-2

得到的效果如下所示：

这里说明了一行分为12列。

在bootstrap当中默认会把栅格分成12块。

页面变小的时候，就变成流体容器了。

慢慢拉过来，还是没有什么变化。

再次慢慢拉过来的情况，就变成了上面的固体容器的样子了。

通过上面的演示，说明了lg应该是一个标识，lg实际的意思就是表示大屏，就是large的意思。

我们后面是需要看看栅格的源码，然后最终我们自定义一个栅格系统。

grid源码

在整个bootstrap源码当中跟栅格系统相关的mixin就是下面的两个：

我们阅读bootstrap的栅格源码的时候，是阅读下面的四个文件，两个mixins，一个入口less，一个变量的less文件。

阅读container的源码

在入口的grid.less当中，全部的源码如下所示：

// 固定容器

.container { // 这是一个类
  .container-fixed(); //这是调用了mixins/grid.less当中的混合

  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}

// 流体容器

.container-fluid {
  .container-fixed(); // 这是调用了mixins/grid.less当中的混合
}

// 行
.row {
  .make-row(); // 这是调用了mixins/grid.less当中的混合make-row。
}

// 列

.make-grid-columns(); // 这是调用了mixins/grid-framework.less当中的混合
.make-grid(xs); // 这是调用了mixins/grid.less当中的混合
@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);
}

.container-fixed()

我们可以看到在源码当中都是调用了一个mixins，叫做.container-fixed()，这个是在mixins/grid.less当中定义的。

固定容器中的媒体查询

通过上面的代码阅读，我们得到下面的结论：

阅读row的源码

container的padding是+槽宽

row的margin是-槽宽

☆ tips

一般像是在less或者是sass当中，我们复用代码就是通过mixins和继承两种方式。

像是清除浮动这样的css代码，我们最好就是用继承的方式，这样的话很多的选择器直接都可以复用了。

像是其他有业务逻辑的，我们就使用mixins的方式。

这就是bootstrap开发者推荐我们编写的方式。

阅读列的源码

下面是列的代码：

1 - .make-grid-columns混合

.make-grid-columns这个混合，不是在mixins/grid.less中，而是在mixins/grid-framework.less中。

这个.make-grid-columns的混合写法，很经典，里面用到了less的条件、递归循环，要记住这个代码。

// 这个文件都是列的定义
.make-grid-columns() { // less当中没有提供循环的写法，less当中的循环都是递归

  //------------------------------------【index = 1 的处理】------------------------------------------------
  // 这是定义混合
  // @index是一个局部变量，属于块级作用域，变量调用使用{}。
  // 这个混合不是递归，混合的形参个数不一样
  .col(@index) { 
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; // 这是定义变量@item，~表示避免编译
    .col((@index + 1), @item);
	// index=1: .col(1+1, ".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1")，需要调用.col(@index, @list)混合
  }
  
  //------------------------------------【index = 2 ~ 12 的处理】------------------------------------------------
  // 这是定义混合。
  // 这就是less当中的判断，@grid-columns定义在variables.less中，值为12
  // 这个混合是递归。
  .col(@index, @list) when (@index =< @grid-columns) { 
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
	/*
	index=2
	.col(2+1, ".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
		       .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2")
	index=3： 
	.col(3+1, ".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")
	
	......
	
	index=12： 
	.col(12+1, ".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-5, .col-sm-3, .col-md-3, .col-lg-3,
			   .col-xs-6, .col-sm-4, .col-md-4, .col-lg-4,
			   .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)
	
	*/
  }
  
  
  //------------------------------------【index = 13 的处理】------------------------------------------------
  // 这是定义混合
  // 这个不是递归。
  .col(@index, @list) when (@index > @grid-columns) { 
    @{list} { // 这里是将list变量当成选择器使用，赋予样式
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      padding-left:  ceil((@grid-gutter-width / 2));
      padding-right: floor((@grid-gutter-width / 2));
    }
  }
  .col(1); //这是调用混合，触发。
}

最终这个混合形成的css代码就是这样的：

.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-5, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-6, .col-sm-4, .col-md-4, .col-lg-4,
.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-left: 15px;  // 槽宽的一半
	padding-right: 15px; // 槽宽的一半
}

2 - .make-grid()混合

参数：xs，sm，md，lg，这就是bootstrap当中很重要的概念：移动优先。

2.1 - .float-grid-columns混合

// 这个混合也是应用递归
.float-grid-columns(@class) {
  // 初始化
  .col(@index) { // initial
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), @item);
  }
  
  // 递归
  .col(@index, @list) when (@index =< @grid-columns) { 
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  
  // 终止递归
  .col(@index, @list) when (@index > @grid-columns) {
    @{list} {
      float: left;
    }
	/*
	 .col-xs-1, .col-xs-2, .col-xs-3, ...... .col-xs-12  {float: left;}
	 .col-sm-1, .col-sm-2, .col-sm-3, ...... .col-sm-12  {float: left;}
	 .col-md-1, .col-md-2, .col-md-3, ...... .col-md-12  {float: left;}
	 .col-lg-1, .col-lg-2, .col-lg-3, ...... .col-lg-12  {float: left;}
	*/
  }
  
  .col(1); // 触发递归
}

2.2 - .loop-grid-columns混合

上面的代码最终形成的css的效果，就是这样的：

2.3 列排序

上图中.col-{xs,sm,md,lg}-{push,pull}-{0,...12}设置的就是列排序。

2.4 列偏移

上图中.col-{xs,sm,md,lg}-offset-{0,...12}设置的就是列偏移。

老师其他学生的笔记

栅格源码分析总结

1、流体溶体和固定容器的公共样式：
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2)); // 15px 槽宽
  padding-right: ceil((@gutter / 2)); // 15px 槽宽
2、固定容器的特定样式：
  主要是固定容器的width。
  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
3、行：
  margin-left:  ceil((@gutter / -2)); // -15px 槽宽
  margin-right: floor((@gutter / -2)); // -15px 槽宽
4、列：

//------------.make-grid-columns混合：这是4×12的效果，4通过变量，12通过递归
.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-5, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-6, .col-sm-4, .col-md-4, .col-lg-4,
.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-left: 15px;  // 槽宽的一半
	padding-right: 15px; // 槽宽的一半
}

//------------.make-grid()混合中的.float-grid-columns混合，这是4×12的效果，4通过变量，12通过递归
.col-xs-1, .col-xs-2, .col-xs-3, ...... .col-xs-12  {float: left;}
.col-sm-1, .col-sm-2, .col-sm-3, ...... .col-sm-12  {float: left;}
.col-md-1, .col-md-2, .col-md-3, ...... .col-md-12  {float: left;}
.col-lg-1, .col-lg-2, .col-lg-3, ...... .col-lg-12  {float: left;}

//------------.make-grid()混合中的.loop-grid-columns混合，这是4×12×4的效果，4通过变量，12通过递归，4通过混合
形成的效果，如下图所示：

列的样式，总结起来举例如下：

栅格组合

到这个位置的时候，我们等于是了解了bootstrap当中栅格系统的核心原理，这是一套牛逼的逻辑。

layui

从上面看，这跟bootstrap非常相似，所以说bootstrap一直被模仿。

web

相关

【OF框架】定义框架标准WebApi，按照规范返回状态信息及数据信息

JavaWeb的三大作用域

nginx下配置多个web服务

一、Asp.Net Core WebAPI——修改默认监听端口

WEBAPI AuthenticateAttribute 基于Basic 验证

腾讯云服务器简单配置web项目

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

HBuilder webApp热更新（在线升级）的实现

nginx反向代理websocket wss或ws端口

webrtc编译

nodejs 一个简单的web服务器，用于前端自己快速测试部署

web框架们~Django~Flask~Tornado

标签