Bootstrap入门（三）：Less

很多时候我们需要定制Bootstrap的样式，然后根制入门初步中，每次都定制网页（http://v3.bootcss.com/customize/）生成我们需要的Css是一件很麻烦又不方便的事件。幸好Bootstrap源中包含了Less文件，能让我方便的修改与定制：

Less:一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更容易维护、方便制作主题、扩充。使用Less文件，我们只需要修改文件中的变量值，再通过插件就能自动生成对应的Css文件了。

 

把Less文件夹拷贝到项目文件夹（TouchingVip.Blog）下：

基本的项目已经出来，现在单靠记事本已经不能很难编码，我们得使用一个编辑工具去组织管理好这些文件，而且提高我们的编码效率。Visual Studio Code，微软出的跨平台IDE开发编辑工具（https://code.visualstudio.com/ ），下载安装。

 

 

打开项目文件夹 TouchingVip.Blog

 

 

回到之前自动生成Css的话题，如下图搜索 Easy Less 插件并安装，重新载入生效

 

 

这时候，我们还得配的东西。如果不，它自动生成的CSS会在Less目录（与所编辑的less文件位于同一目录）

 

如何配置插件详情里有说明：

 

 

打开 settings.json 文件，写入并保存以下配置。这是配置在项目下的Css 文件夹中

 

 

 

配置好。现在可以修改Less 中定义的样式了。比如要修改导航菜单的颜色，主要是以下样式：

.navbar-inverse

 

全局搜索该样式：输入.navbar-inverse 回车

 

 

 

因为样式是Less生成的，所以要我们需要的是 .less 文件。这里我们改的是navbar.less 文件。因为我们页面引用的时bootstrap.css 而对应的bootstrap.less 里引用了该文件。所以最终我们改完对应的less文件，还要随便改一下bootstrap.less 比如说输入个空格，保存触发插件生成.css 文件

 

 

我们把它的值改成红色：#ff0000

保存文件

打开bootstrap.less 文件，输入空格再保存

刷新页面