Web前端——bootstrap源码定制之环境搭建

概述

项目中开发web，对于bootstrap，我想说确实好用，但是有些时候要做一些个性化定制样式，比如按钮大小、颜色，表格样式等等，在全局使用bootstrap的同时，还要有自己的定制样式，有三种方法可以做到：

• 引用css层叠样式表时，先引用bootstrap.min.css，再引用私有样式表文件private.css，这样自定义的样式会覆盖bootstrap本身的样式
• 到bootstrap官网，进入定制页面，可对多个组件的样式进行定制，输出定制版的bootstrap文件
• 下载boostrap源码，修改源码，编译生成bootstrap.min.css

本文记录第三种方法的环境搭建

环境搭建

我的环境：VMware虚拟机，Ubuntu14.0.4

大概要做这样几件事

1. 安装npm
2. 安装node.js
3. 安装grunt
4. 编译源码

安装npm

虚拟机中原本没有npm命令，apt-get install npm，要安装一会儿
安装好之后，就可以使用npm命令了，安装npm的目的是为了安装后面的东西

安装node.js

apt-get install node.js

安装node.js的目的是为了安装grunt

安装grunt

npm install -g grunt-cli

grunt是一个用于构建web前端项目的工具，基于node.js，不懂百度搜搜就知道了，非常火热的前端构建工具，好东西！为什么要使用grunt，因为bootstrap就是使用grunt工具来构建

编译bootstrap源码

下载官方bootstrap源码，注意这里一定是bootstrap源码，而不是预编译版本，unzip bootstrap-3.3.7.zip，进入bootstrap-3.3.7文件夹，如图

因为我这里已经编译过了，所以有node_modules文件夹，刚解压后是没有这个文件夹的

在此目录下执行npm install命令，该命令会读取当前文件夹下的package.js文件，从中解析并从网络获取各种插件，以用于编译源码，至于为什么要这样做，可以去看grunt是怎么用的

nmp install需要等待一会儿，中间如果出错，则删除node_modules文件夹，重新npm install，改命令完成后，执行grunt dist命令，会将bootstrap各种css、js等源文件编译并在./dist下生成压缩文件bootstrap.min.css

bootstrap的css源文件在bootstrap-3.3.7/less下，使用less语法构成，修改源文件中各个组件的代码，编译后即可生成自定制的bootstrap