Bootstrap学习笔记（五）定制Bootstrap与动态样式语言Less基本用法

1、实现Bootstrap样式定制的步骤

  (1)编写自定义的css，覆盖bootstrap.css中提供的样式

缺点：产生大量的冗余/无用代码

  (2)直接修改bootstrap.css文件

缺点：任务量太大！   CSS的通病

  (3)修改Bootstrap开发者编写的Bootstrap源代码   bootstrap.less文件

目前是最好的办法

 

2、动态样式语言

   ① CSS：静态样式语言，作为一门语言并不称职！因为缺少一般语言必需的基本要素：变量、运算、循环/选择、函数等，导致了CSS代码的修改和维护非常麻烦。

   ②动态样式语言：在CSS的基础之上，添加了动态语言所必需的元素，如变量、运算、循环/选择、函数等，方便样式文件的修改和维护。

      /*浏览器默认只能处理静态样式语言，所有的动态样式语言必需设法转换为CSS才能被浏览器所理解！这个转换操作称为“编译”。*/

   ③常见的动态样式语言：

(1)Sass/SCSS

(2)Stylus

(3)Less

 

3、Less的使用

定义：是一种 动态 样式 语言.

LESS 为 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数。

LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

(1)运行方式1：在客户端运行Less转换程序——了解

在HTML中引入xx.less，同时再引入一个less.js——就是一个可以运行在客户端浏览器中的less编译程序——效率太低，不推荐使用。

<link rel=”stylesheet/less” href=”css/text.less”>

<script src=”js/less.min.js”></script>

(2)运行方式2：在服务器端运行Less转换程序——推荐

    步骤：

1)下载并安装一款服务器端的JS解释器——NodeJS或者Rhino

2)下载less文件的转换程序（lessc-Compiler）——一个JS脚本

3)在服务器端JS解释器中运行lessc转换器，把自己编写的.less文件转换为.css文件

   方式1：可以在命令行中使用转换程序

node.exe  lessc  my.less  my.css

   方式2：可以在WebStorm中使用转换程序

1. 继续编写HTML文件，引用编译得到的.css文件即可。

 

4、Less语法学习

  (1)Less完全支持CSS的所有语法

  (2)Less支持单行和多行注释，但只有多行注释会被转换到css文件中

  (3)Less支持变量(Variable)

语法：@变量名: 值;

使用：.class {  样式： @变量名;  }

  (4)Less支持样式混合(Mixin)——在一个样式中混入另一个样式

语法： .class1{ ... }

       .class2{

...

.class1;

...

            }

   (5)带参混合

语法： .class1(@参数1, @参数2, ...){ ... }

       .class2{

...

.class1(值1， 值2, ...);

...

            }

   (6)嵌套规则

语法：.class1 {

....

.class2 { ... }

    }

转换的结果：  .class1 {  ...  }

.class1  .class2 {  ...  }

  

   (7)Less可以对变量、常量进行算术运算

语法：  变量/值 +-*/ 变量/值

例：

@base-color:#111;

@the-birder:1px;

 

#header{

color:@base-color*3;

/*color:@base-color+#003333;*/

border-left:@the-border*2;

}

   

(8)Less为样式提供了几十个应用函数

lighten(颜色，亮度值)：将指定的颜色变亮指定的百分比

例：

@red-std：#e4393c;

@red-llight：lighten(@red-std,20%);

darken(颜色，亮度值)：将指定的颜色变暗指定的百分比

@red-dark:darken(@red-std,20%);

floor(数字)：对数值进行下取整

例：

@lg-container-width:1170px;

@lg-col-width:  floor(@lg-container-width/12);

ceil(数字)：对数值进行上取整

   (9)页面导入

     尽量避免使用CSS文件中的@import指令——会增加HTTP请求次数；

例：

1.css中内容

@import “xx.css”;

@import “yy.css”;

为了可以将一个样式文件拆分为多个小的样式文件，由多人同时编写，可以使用LESS中的@import——less中导入其他less文件，转换时会拼接为一个大的完整的CSS样式文件，故推荐在Less中@import其他的Less文件。

语法     @import  "xx.less";  

@import  "yy";

 

   示例：大型项目中的less文件结构（Bootstrap就是这个结构）

variables.less 放置所有的变量

mixin.less 放置所有的混合

reset.less 放置HTML元素重置样式

navbar.less 导航条相关样式

footer.less 页脚相关样式

....

object.less  => object.css 总样式文件  一大堆@import

 

5、通过修改Bootstrap的Less源文件实现样式定制

    定制的目标：

    (1)删除不需要的样式，如轮播广告、模态框...

       在bootstrap.less文件中，注释掉不需要的@import即可。

    (2)定制需要的组件的默认样式，如修改导航条的默认背景色

     修改variables.less文件中的变量即可。

    (3)在Bootstrap提供的默认样式基础上创建新样式，如定制dropdown中的divider的样式——组件的深度定制

       修改某个组件所对应的.less文件