Bootswatch 是一些自定义的 Bootstrap 的主题，你可以在项目里面直接使用它们，也可以定制它们的样式。下面一起去试一下 ...

先进入到某个目录的下面 ...

cd desktop/ninghao-playground

然后可以克隆一份 bootswatch 的 Git 仓库 ...

git clone https://thomaspark/bootswatch.git

查看一下：

ls

进入到这个 bootswatch 的目录的下面 ...

cd bootswatch

再用 npm install 去安装 Bootswatch 需要的一些东西 ...

npm install

完成以后用编辑器打开这个目录 ..

atom .

这里面你会看到很多的目录，这些目录里存储的就是 Bootswatch 定制的 Bootstrap 样式 .. 这个 index.html 应该是项目的首页 ..

在 custom 这个目录的下面，你可以自己定制一下 Bootstrap ，可以修改 variables.less .. 或者在这个 bootswatch.less 里面添加新的东西 ..

回到命令行 .. 输入 grunt ... 这样可以预览一下这些 Bootstrap 的主题 ... 在这个页面的下面 ... 会有一些截图 ... 上面显示了不同的主题的样式 ...

再打开 Themes 菜单 ... 在这里你可以选择想要预览的主题 ... 在这些页面上会显示当前这个 Bootstrap 主题的样式 ..

回到编辑器，再编辑一下在 custom 这个目录下的 variables.less .. 保存 ... 这样 Bootswatch 定义的 grunt 任务会自动去编译 Bootstrap ，生成一个新的 Bootstrap 的样式表 ...

同样我们也可以去编辑一款 Bootstrap 主题里的 variables.less .. Grunt 会监视文件的变化，然后生成新的样式表 ..

比如这里我修改一下页面的背景颜色 ... 保存 ... 再打开 bootstrap.css ... 你会看到在这个样式表里，已经使用了我修改之后的这个背景颜色 ...

你也可以手工去编译这些 Bootstrap 主题 ... 回到终端 ... 新建一个标签 ... 用的命令是 grunt swatch 后面是一个冒号，然后可以再加上主题的名字　... 比如我要重新编译 paper 这个主题 ... 输入 paper ... 再回车执行一下 ...

这里会显示重新生成了 bootstrap.css ，另外还有它的压缩之后的版本 .. bootstrap.min.css ...