1、使用less的准备工作
1.1 安装npm工具
![bootstrap less css bootstrap less css](https://cdn.ancii.com/article/image/v1/xu/R7/E9/9ERu7xJyTqCFW_cllJux0Mp_80uPLRnGBDUptGwNa0NX5uUrsVEbj9XYPXhKPtqzDeZhvAM4sQ2Jz7RiIwITFWpiq1sExroYkXZrQez46IAJFeWpr9tEgjcc5xJVenmK.png)
下载完毕后,点击安装,默认安装在c:/program files中,安装比较简单,一直点击next,安装完毕之后,系统环境的path会添加
C:\Program Files\nodejs\,此时可以运行cmd,检验npm是否安装成功,操作如下:
![bootstrap less css bootstrap less css](https://cdn.ancii.com/article/image/v1/mQ/zY/dc/cdzQYmHRzTkHxSGx2NKOWgTN7JgLgYjQPAaqYx9rFvWN24bDRzKtCCf8Zh-InSdS.jpg)
如下表示安装成功完成。继续在任意位置执行如下命令
![bootstrap less css bootstrap less css](https://cdn.ancii.com/article/image/v1/xu/R7/E9/9ERu7xJyTqCFW_cllJux0Mp_80uPLRnGBDUptGwNa0P-Vq2EeK2CXL_x171FXHHgSE0W0NL2U5QodyaFUhQd6I6IOdnafGaC_a99mIsVbr5VZYWyneCprBXIF_mFL1WG.png)
![bootstrap less css bootstrap less css](https://cdn.ancii.com/article/image/v1/xu/R7/E9/9ERu7xJyTqCFW_cllJux0Mp_80uPLRnGBDUptGwNa0PzkLCkrCHnoxAVQR72iIpfUsUAm6o5U6oSsFvE99rmwYMjjKpEUDbpTJTtqtNE1WIX8AXZgDWGUw2kOMtlr5-c.png)
表示成功。
4、接下来介绍如何来更改less文件,将less文件编译成css文件,进而更改bootstrap的默认样式
在D:/bootstrap/less文件夹有一个variables.less文件,该文件中就是定义的默认样式。举个例子:
![bootstrap less css bootstrap less css](https://cdn.ancii.com/article/image/v1/xu/R7/E9/9ERu7xJyTqCFW_cllJux0Mp_80uPLRnGBDUptGwNa0MXv0FRBpdadTqcaX8g_KlYkTLynetOX9wDNajcP8H-zUjqH2f5qzAiDrGytC0TsTLvwedNrfZcPNV6Hydls-OU.png)
![bootstrap less css bootstrap less css](https://cdn.ancii.com/article/image/v1/mQ/zY/dc/cdzQYmHRzTkHxSGx2NKOWgTN7JgLgYjQPAaqYx9rFvWN24bDRzKtCCf8Zh-InSdS.jpg)
,背景颜色默认为白色,现在我们将其改为蓝色,及将35行改为@bodyBackground: @blue;
然后再在cmd中执行
![bootstrap less css bootstrap less css](https://cdn.ancii.com/article/image/v1/xu/R7/E9/9ERu7xJyTqCFW_cllJux0Mp_80uPLRnGBDUptGwNa0OfGsGWaZL9wlSitez7DFeDlKvIfeu9OngYgDfVGN0X7rgL9WaCKHVtjPJulaEBOhTCBpbrsgxLoAO8nRIQpu_j.png)
![bootstrap less css bootstrap less css](https://cdn.ancii.com/article/image/v1/mQ/zY/dc/cdzQYmHRzTkHxSGx2NKOWgTN7JgLgYjQPAaqYx9rFvWN24bDRzKtCCf8Zh-InSdS.jpg)
,完成之后,将less文件夹中的bootstrap.css拷贝到项目中,覆盖以前的bootstrap.css文件,刷新页面,此时页面的背景即变为蓝色了。