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

你的名字 2022-04-04 10:38 392阅读 0赞

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编译程序——效率太低，不推荐使用。

(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中使用转换程序

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70][]

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文件

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70]: /images/20220404/e91bf226fd404a63b1e8317bb412d36a.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 bootstrap学习笔记02-公共样式

相关 Bootstrap的less

相关 bootstrap框架学习笔记

相关 bootstrap表格样式

相关 bootstrap笔记 —— @media 与 Bootstrap 网格系统

相关 bootstrap样式变形

相关 bootstrap学习笔记

相关 bootstrap 学习笔记

相关 Bootstrap学习笔记（二）全局CSS样式

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