bootstrap less css
1、使用less的准备工作
1.1 安装npm工具
在http://nodejs.org/download/ 网站下载最新版本的,由于本机的系统是64位,所以选在windows installer 64-bit 下载


下载完毕后,点击安装,默认安装在c:/program files中,安装比较简单,一直点击next,安装完毕之后,系统环境的path会添加
C:\Program Files\nodejs\,此时可以运行cmd,检验npm是否安装成功,操作如下:

如下表示安装成功完成。继续在任意位置执行如下命令




表示成功。
2、安装npm之后,还需下载bootstrap的包,下载地址: https://codeload.github.com/twitter/bootstrap/legacy.zip/master 下载之后,解压目录结构有:
注意这个压缩包与通过http://twitter.github.io/bootstrap/下载的包不同,后者的目录结构:

3、将下载的bootstrap包解压在制定地方,我本机上解压在D盘,现在我们可以通过cmd进入该文件夹,这样就可以编译less文件了。



3、将下载的bootstrap包解压在制定地方,我本机上解压在D盘,现在我们可以通过cmd进入该文件夹,这样就可以编译less文件了。


4、接下来介绍如何来更改less文件,将less文件编译成css文件,进而更改bootstrap的默认样式
在D:/bootstrap/less文件夹有一个variables.less文件,该文件中就是定义的默认样式。举个例子:


然后再在cmd中执行

,完成之后,将less文件夹中的bootstrap.css拷贝到项目中,覆盖以前的bootstrap.css文件,刷新页面,此时页面的背景即变为蓝色了。


相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18