定制bootstrap样式

一直纠结如何定制bootstrap的样式，官网的表示不爽，记录下自己修改bootstrap样式的过程。

开发工具：webstrom

bootstrap采用的是less定义样式，然后把不同的组件通过grunt打包成一个bootstrap.min.js文件。grunt百度了一下，主要就是编译前台js文件，合并，压缩等操作。其实这个大部分用不上，因为我们不需要删除一些组件。官方源码下packge.json文件都写好了。要编译也很简单。

这里介绍一下自己的方式。主要是不修改js文件，直接修改less文件，通过webstrom自定义插件，执行一键打包。

1.安装nodejs，less这个过程很简单了，百度一下你就知道。

2.配置webstrom自定义工具。

• 项目创建

        例如我创建一个demo。建立几个文件夹：css,less,js，fonts

        css：用来存放编译后的bootstrap的css文件。

        less：放入官方下载源码中的less文件夹下的所有less文件。

        js：放入源码中dist文件中下面js里面的两个bootstrap开头的js文件。

        fonts：放入源码中fonts中的字体图标文件。

• 工具配置

        配置如下图：

        

        添加一个外部工具。点击上图中的加号，进入配置界面。

                

        上面配置追中的是parameters，里面实际上是一句less执行代码，大概是“less路径 文件路径 输出路径“ 贴上详细文字如下：

        /usr/local/lib/node_modules/less/bin/lessc $FilePath$ $ProjectFileDir$/css/$FileNameWithoutAllExtensions$.css

        配置好后基本就ok了。可以去修改bootstrap的less代码了。选中bootstrap.less文件右键，执行工具编译就好了。如下图

      

       可能会有人问，为什么是bootstrap.less文件，打开这个文件看下就理解了。他是把其他的less文件都加载进来。

       允许external tools下面的less后就会自动编译一个bootstrap.css到css文件夹中了。