bootstrap less css

1、使用less的准备工作

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

bootstrap less css
下载完毕后,点击安装,默认安装在c:/program files中,安装比较简单,一直点击next,安装完毕之后,系统环境的path会添加
C:\Program Files\nodejs\,此时可以运行cmd,检验npm是否安装成功,操作如下:
bootstrap less css
 bootstrap less css如下表示安装成功完成。继续在任意位置执行如下命令
bootstrap less css

bootstrap less css
 表示成功。
2、安装npm之后,还需下载bootstrap的包,下载地址: https://codeload.github.com/twitter/bootstrap/legacy.zip/master   下载之后,解压目录结构有:bootstrap less css注意这个压缩包与通过http://twitter.github.io/bootstrap/下载的包不同,后者的目录结构:bootstrap less css
bootstrap less css
 3、将下载的bootstrap包解压在制定地方,我本机上解压在D盘,现在我们可以通过cmd进入该文件夹,这样就可以编译less文件了。bootstrap less css
bootstrap less css
 4、接下来介绍如何来更改less文件,将less文件编译成css文件,进而更改bootstrap的默认样式
     在D:/bootstrap/less文件夹有一个variables.less文件,该文件中就是定义的默认样式。举个例子:bootstrap less css
 
bootstrap less css,背景颜色默认为白色,现在我们将其改为蓝色,及将35行改为@bodyBackground:      @blue;
然后再在cmd中执行
bootstrap less css
bootstrap less css,完成之后,将less文件夹中的bootstrap.css拷贝到项目中,覆盖以前的bootstrap.css文件,刷新页面,此时页面的背景即变为蓝色了。
 

相关推荐