当前位置：网站首页 > 技术文章 > 正文

定制你的bootstrap之--修改less文件1

zhezhongyun 2025-09-12 06:01 6 浏览

今天来聊聊定制你的bootstrap文件，换句话说就是修改css文件，大家知道bootstrap文件是有less书写的，好吧，我们从源头开始吧！

1、下载bootstrap源文件：

在bootstrap中文网上下载源码，不要选错呀。

2、解压后看到less文件夹，打开，找到variables.less文件，这个文件基本上存的都是变量；用sublime打开。

3、看到了从第4行开始：

4、我们今天就说这一段，基本的less语法，等说完了，再说如何解析成css文件。

第1,2,3行是注释，在less中，注释有2中，一种是css的格式注释，一种是//注释；
区别1：/**/是多行注释 // 是单行注释
区别2：/**/编译的时候写入css文件 //注释的不写入css文件
@gray-base: #000; 定义一个变量@gray-base值为#000；
@gray-darker: lighten(@gray-base, 13.5%); // #222
定义一个变量@gray-darker 值是多少呢？
先看(@gray-base, 13.5%); 上面的变量

@gray-base 是#000；16进制是 0；
0的13.5%，黑色的就是 22呀！
所以 lighten默认的就是#222；
整个是什么意思呢？就是@gray-darker的值为 lighten(@gray-base, 13.5%);，如果变量没有传参数，那么就是默认的222；如果传了参数，则为（@gray-base, 传入的参数）

这样的好处是什么呢？

你想想，你在做一个项目的时候，客户今天说就定这个颜色了，过了几天，改了，换颜色了！

如果你用css写的，O(∩_∩)O~，你就挨个改吧。如果你用less写的，只需要修改一处，就可以了，分分钟的事！惬意吧！

今天就先说到这里，改天说说如何让less文件编译为css文件！

相关推荐