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文件,该文件中就是定义的默认样式。举个例子:
,背景颜色默认为白色,现在我们将其改为蓝色,及将35行改为@bodyBackground: @blue;
然后再在cmd中执行
,完成之后,将less文件夹中的bootstrap.css拷贝到项目中,覆盖以前的bootstrap.css文件,刷新页面,此时页面的背景即变为蓝色了。
,完成之后,将less文件夹中的bootstrap.css拷贝到项目中,覆盖以前的bootstrap.css文件,刷新页面,此时页面的背景即变为蓝色了。
相关推荐
前端 2020-08-03
骷髅狗 2020-08-02
wghou 2020-06-21
wghou 2020-06-16
覆雪蓝枫 2020-06-16
骷髅狗 2020-06-14
骷髅狗 2020-06-12
sixyearsorless 2020-05-27
zhanghaibing00 2020-05-27
maiktom 2020-05-26
比格杰森 2020-05-26
e度空间 2020-05-17
maiktom 2020-05-11
buttonChan 2020-05-10
Enjoyendless 2020-05-08
sixyearsorless 2020-05-07
骷髅狗 2020-04-24