开发者学堂课程【移动 Web 前端开发：less-bootstrap 定制（o2o）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8490
less-bootstrap定制（o2o）
内容介绍
一、 线下定制
二、 线上定制
一、线下定制
Bootstrap 定制分为线上定制和线下定制，线下定制必须读懂代码，从源码的角度进行定制。
举例：定制栅格系统
栅格系统的列数是12，但是一些情况下12列无法满足产品需求，如果要把栅格系统划分细致，就要重新定制栅格系统。定制就是通过修改 bootstrap 的源码，达到适合产品所需的需求。比如把 bootstrap 中所有危险颜色改为主体颜色就需要定制。
从源码的角度进行定制。要求：把栅格系统的槽宽变窄，变为10px，把列数变为18列。
如果通过 bootstrap.css 进行修改，12列共有48种样式，每种设备都有偏移，推，拉等，需要修改上百个样式，工作量太大。所以 bootstrap 通过 less 进行编译，非常便于维护。
定制过程：找到 bootstrap 的源码文件，槽距和列数都是通过变量进行控制的，所以可以通过变量进行修改，在 bootstrap-less-variables.less 中找到栅格系统的变量，修改为：
@grid-columns:18
@grid-gutter-width:20px
这就是从源码的角度进行修改。
在 bootstrap.less 中已经引用过 grid.less 和 variables.less
变量改完需要在 bootstrap.less 中重新编译，做法是 shift +鼠标右键：在此处打开命令窗口，直接打开目录，把 bootstrap .less 文件编译成 css 文件，写法是:
lessc bootstrap.less bootstrap.less bootstrap.css.
编译完成出现 bootstrap.css 文件，bootstrap.css 文件中所有的代码都是 css 文件，查找栅格系统，因为之前的代码已经被注释掉，没有编译进源文件中，在这里不能查找，所以可以通过查找 col- 查看代码。
.col_xs_18{
Width:100%
.col-xs-1{
Width:5.5555%//每列占多少
对应的还有 pull push offset 等很多样式，还有 web 中响应的一些样式。在源码中修改困难，可以在 less 中修改，以上通过 less 源码达成了线下定制。
二、线上定制
在官网定制中查找到 less 文件，通过勾选引入需要的组件。相当于
Input 的功能，勾选表示需要，不勾选表示不需要。
还可以定制 js ，js 文件中有很多组件，也是通过勾选选择需要的组件。在less 变量中可以自定义颜色，尺寸等。
通过线上修改，把栅格系统列数变为18列，槽距变为20px。在 less 变量中，首先找到 Grid system 栅格系统的变量。
在以上方框中直接把列数变为18列，槽距改为 20px
线上定制和线下定制都是通过修改变量进行定制。以上勾选组件的过程就相当于修改 input。
修改完成之后，点击最下方的编译并下载，这一步相当于线下定制的编译。下载完成之后，打开 bootstrap.css 文件，查找
col-，查找到 col-xs-18。
以上是 bootstrap 的源码定制，一般情况下不需要进行定制，使用原来的即可。
