快速修改bootstrap

Bootstrap并不是单单意味着HTML/CSS界面框架，更确切的说，它改变了整个游戏规则。这个囊括了应有尽有的代码框架使得许多应用和网站的设计开发变得简便许多，而且它将大量的HTML框架普及成了产品。但是，Bootstrap的真谛是“基石”。Bootstrap框架，并不意味着它是全部终结解决方案。

但bootstrap提供的默认样式往往不能满足我们的需求，从而定制化bootstrap成为我们经常需要做的工作，本文就如何更高效更可维护地定制bootstrap做一下探讨。 如下图，在你的button 中加入bootstrap的class: btn btn-primary,就可以将默认的button（左边）变成右边的样式。 可如果我们想应用自己的样式呢？比如我们想要拥有圆角的button。 通常，我们可以直接覆盖bootstrap的样式。 我们在自己的项目目录下新建my-custom.css文件，加入如下代码： .btn { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;} 将my-custom.css文件引用放到bootstrap.css文件后面，我们定义的btn样式就会覆盖原有的样式（注：这里的‘覆盖’指的是增量叠加式的覆盖）。 <link rel="stylesheet" href="boostrap.css"><link rel="stylesheet" href="my-custom.css"> 但这种方法有它的优缺点， 优点：不会改变你的工作流程。你可以快速直接修改你的样式，即使是你的网站引用了其他的类似bootstrap的框架样式，你都可以在同一个地方进行统一的定制。 缺点：但是对于更彻底的修改(比如重新设计导航栏)或是非局部的修改(比如修改适用于整个网站的高亮颜色)来说，这样东一块，西一块的覆盖样式更像是一种打补丁式的解决方案。而且你的新样式要添加到Bootstrap的默认样式表里，让本已经100 KB的文件越发臃肿。如果你不仅仅想要做一些覆盖，那就要考虑一种更具扩展性的方法了。

可视化修改

最后提供两个可视化修改bootsrap变量的网站 bootswatchr 通过修改变量值实现。 stylebootstrap 通过组件化组织内容

另一种方法是生成一个自定义构建的bootstrap。 我们可以使用官方的构建器，你可以对bootstrap中样式变量进行自定义。