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