BOOTSTRAP定制
1.补充：栅格系统中调整列的位置/顺序
(1)方法1：偏移量(col-*-offset-*)
(2)方法2：对列进行push/pull操作
col-lg-pull-1 ~ col-lg-pull-12
col-lg-push-1 ~ col-lg-push-12
col-md-pull-1 ~ col-md-pull-12
col-md-push-1 ~ col-md-push-12
col-sm-pull-1 ~ col-sm-pull-12
col-sm-push-1 ~ col-sm-push-12
col-xs-pull-1 ~ col-xs-pull-12
col-xs-push-1 ~ col-xs-push-12
提示：使用推拉操作对列修改列的顺序，可以对当前大小的屏幕以及更大的屏幕有效。
2.Bootstrap定制
定制方法：
(1)覆盖Bootstrap提供的默认样式：编写自己的CSS样式文件，放在bootstrap.css后面。问题：样式覆盖、影响渲染速度、覆盖不容易实现
(2)直接修改bootstrap.css文件。问题：修改效率太低
(3)直接修改bootstrap.css的源代码——bootstrap.less——推荐方式
3.动态样式语言
浏览器默认只能识别CSS这一门样式语言！
但CSS作为一门语言并不称职——没有变量、循环选择、函数...等最基本的特征都不具备——CSS称为“静态样式语言”。
动态样式语言：为CSS添加变量、循环选择、函数...等高级特性！注意：所有的动态样式语言语法默认都不被浏览器支持，必须转换/编译为CSS静态样式语言。
常见的动态样式语言：
(1)Sass / SCSS：最早期的样式语言 .sass/.scss
(2)Stylus：功能强大，语法与CSS相差较大 .styl
(3)LESS：较新，语法与CSS最接近 .less
4.LESS动态样式语言的使用方法
(1)客户端使用LESS——效率低——了解
让客户端下载less源文件，以及一个less语法转换程序——less.js
<link rel="stylesheet/less" href="css/2.less"/>
<script src="js/less.min.js"></script>
(2)服务器端使用LESS——效率高——掌握！
程序员在开发时编写.less源文件，并在自己的电脑上安装一款less语言转换程序，把.less=>.css；在HTML中直接使用.css即可。步骤：
1)安装node——服务器端JS解释器——保证命令行中可以运行node.exe
2)下载lessc编译程序——一个运行在服务器端的JS程序
3)//使用node运行lessc文件
把lessc转换程序配置为WebStorm中的一个FileWatcher，只要用户编写了一个.less文件，ws会自动的调用less转换程序，编译出.css文件。
5.LESS动态样式语言语法
(1)less文件支持所有的css语法
(2)less文件可以编写单行/多行注释，只有多行注释会出现在css文件中
(3)声明变量，实现“一改百改”，格式：
@变量名: 值;
(4)混入/混合(mixin)
.class1 { }
.class2 {
xx: yy;
.class1; //在一个样式中引用另一个样式
}
(5)带参混入/混合
.class1(@var1, @var2) { color: @var1; ... }
.class2 {
.class1(#aaa, 4px);
}
(6)样式的嵌套
.class1 {
xx: yy;
.class2 {
aa: bb;
}
}
.class1: { xx: yy; }
.class1 .class { aa: bb; }
(7)可以执行数学运算
(8)LESS语言预定义了若干函数
image-width('url')
image-height('url')
rgba() //构建一个rgb颜色值
hsl() //构建一个色相/饱和度/亮度颜色值
darken(@color, 百分比) 将指定的颜色变暗指定的百分比
lighten(@color, 百分比) 将指定的颜色变亮指定的百分比
作业：
(1)完成Intel首页的布局！！
(2)看Bootstrap的LESS源代码，熟悉文件和目录结构。
爱卡（深圳）管理有限公司
分享每一刻精彩
微信：iCafeYOJOY
微博：http://weibo.com/iCafeYOJOY
官网：www.icafe.im
