可以看到CSS3 mix-blend-mode chrome firefox 支持良好，都不用私有前缀
mix-blend-mode: normal //正常mix-blend-mode: multiply //正片叠底
mix-blend-mode: screen //滤色
mix-blend-mode: overlay //叠加
mix-blend-mode: darken //变暗
mix-blend-mode: lighten //变亮
mix-blend-mode: color-dodge //颜色减淡
mix-blend-mode: color-burn //颜色加深
mix-blend-mode: hard-light //强光
mix-blend-mode: soft-light //柔光
mix-blend-mode: difference //差值
mix-blend-mode: exclusion //排除
mix-blend-mode: hue //色相
mix-blend-mode: saturation //饱和度
mix-blend-mode: color //颜色
mix-blend-mode: luminosity //亮度
mix-blend-mode: initial //初始
mix-blend-mode: inherit //继承
mix-blend-mode: unset //复原
自从一年前Twitter推出Bootstrap以来，它的推广程度就像火箭发射一样节节攀升。这个广受欢迎的CSS框架为众多网站提供了响应式网格系统，预定义样式的组件与JavaScript插件。Bootstrap的设计初衷之一就是实用。当你要新建网站时，Bootstrap绝对是一个节约时间的利器，以至于许多庞大的组织比如NBC，NASA还有白宫都选择了它。它甚至还可以让我们之中不懂设计的人也能做出很体面的网站。
举个例子，要想将下面左边的默认按钮变成右面漂亮的按钮，你只需要增加两个class：btn与btn-primary。
浏览器默认按钮(左)与Bootstrap按钮(右)
但如果你公司的logo使用了不一样的蓝色阴影呢？别担心，你没有必要坚持使用默认主题。这篇文章将介绍几种自定义Bootstrap的方法来满足你的需求，不管你是想微调一个按钮，还是一个完整的主题。
来自于Bootswatch的三种Bootstrap主题
使用CSS覆盖
最直接的方式是用CSS覆盖掉Bootstrap的默认样式。可以通过针对Bootstrap中使用的class编写你自己的样式来实现。比如说，可以通过增加以下代码来使你的按钮变得更圆滑：
[css] view plain copy
print?
<span style="font-size:18px"><span class="class">.btn</span><span class="rules">{
<span class="rule"><span class="attribute">-webkit-border-radius</span>:<span class="value"><span class="number">20</span>px</span></span>
<span class="rule"><span class="attribute">-moz-border-radius</span>:<span class="value"><span class="number">20</span>px</span></span>
<span class="rule"><span class="attribute">border-radius</span>:<span class="value"><span class="number">20</span>px</span></span>
<span class="rule">}</span></span>
</span>
一个增加了border radius的自定义的Bootstrap按钮。
为了能够成功覆盖，记得在Bootstrap的声明之后增加你的代码。
这种方法的优点在于它几乎不会改变你的工作流程。即便使用了Bootstrap，你还是需要自己的样式表来使框架适合你的内容。你可能没有意识到，Bootstrap自己的网站还依赖了除Bootstrap框架外的上千行样式。
但是对于更彻底的修改(比如重新设计导航栏)或是非局部的修改(比如修改适用于整个网站的高亮颜色)来说，这样东一块，西一块的覆盖样式更像是一种打补丁式的解决方案。而且你的新样式要添加到Bootstrap的默认样式表里，让本已经100 KB的文件越发臃肿。如果你不仅仅想要做一些覆盖，那就要考虑一种更具扩展性的方法了。
生成一个自定义构建
一个替代方案是创建一个彻底的自定义构建。借助官方的生成器，你可以将框架内使用的关键变量设置成自己需要的值，比如说 @linkColor，@navbarHeight 和 @baseFontFamily。点击生成器页面底部的大按钮就可以下载最终的样式表。你甚至还能对框架包含的组件进行挑选，这样能够减少文件的体积。
一些能够在官方生成器中设置的变量。
网上还有一些第三方生成器。与官方版本不同，它们提供了调整变量时的动态预览效果。Bootswatchr网站使用变量来组织，而StyleBootstrap则使用组件。BootTheme添加了扔骰子特性来随机设置值。如果幸运女神不站在你这边，Lavish能够根据你提供的任何图片来生成一个主题，PaintStrap则是根据已有的配色方案来生成。
深入挖掘LESS
即便有上百个能定制的变量，你可能还是会发现生成器有诸多限制。或者你不想在浏览器中完成这样的工作，因为这会减少与你的工作流程的集成度。无论处于哪种情况，都是时候深入研究下Bootstrap的源码了。
获得源码
作为一个开源项目，Bootstrap的源码可以自由(ZIP格式)下载。
打开源码，你会发现Bootstrap的样式是用LESS而不是CSS写的。LESS 是一种动态样式表语言，相比于CSS，它支持多种优秀特性，包括选择器嵌套，创建变量(就像在上面生成器中使用的)。一旦写完，你可以选择将LESS代码预先或在运行时编译成 CSS。如果你喜欢 Sass，可以使用这个适用于Sass的Bootstrap。
在 less 文件夹中，你会看到许多按照组件来划分的 LESS 文件。
组成Bootstrap源码的 LESS 文件
留意以下这些文件：
bootstrap.less:
这个是核心文件。它用来引入其他文件，最终由你来编译它。
reset.less:
始终是最先引入的文件。
variables.less 和 mixins.less:
这两个文件总是同时出现，因为其他文件都依赖于它们。前一个文件包含了在生成器网站上使用的相同的变量。
utilities.less
这个文件总是最后引入，你可以把想要覆盖的类写到这里。
打开 LESS 文件，看看Bootstrap是如何为每个组件设置样式的。举例来说，在buttons.less中，.btn-large类的规则是这样的：
[ruby] view plain copy
print?
<span style="font-size:18px">.btn-large {
<span class="symbol">padding:</span><span class="number">9</span>px <span class="number">14</span>px
font-<span class="symbol">size:</span><span class="variable">@baseFontSize</span>+ <span class="number">2</span>px
line-<span class="symbol">height:</span>normal
.border-radius(<span class="number">5</span>px)
}
</span>
如你所见，代码看起来和 CSS 非常像。但它也确实有一些 LESS 独有的功能。在font-size声明中，变量@baseFontSize——在variables.less中声明——与一个加法操作组合起来计算得到结果。在mixins.less中定义的.border-radius混合能够自动帮你处理浏览器前缀。
你可以通过修改这些 LESS 文件来实现自定义。先从variables.less中的值开始，然后再尝试下其余源码中的样式。好好享受吧！
安装LESS
在你做完修改并准备查看效果时，你需要把文件编译成 CSS。要完成这个工作，你需要先安装 LESS。关于安装有许多方式；对于初学者来说，我建议使用一个叫做LESS.app的客户端程序。如果你喜欢命令行，可以选择安装包含Node Package Manager(NPM)的Node.js。然后执行如下命令：
npm install less
当安装结束后，你可以这样来编译bootstrap.less：
lessc bootstrap.less >bootstrap.css
如果想编译压缩版本，使用这个命令：
[sql] view plain copy
print?
<span style="font-size:18px">lessc <span class="comment">--compress bootstrap.less >bootstrap.min.css </span>
</span>
无论你使用哪种方式编译，编译的目标只能是bootstrap.less，而并非其他任何文件。
模块化你的修改
你可能注意到了上面方法的缺陷。那就是你修改的内容与原始文件纠缠在了一起。结果当Bootstrap不可避免的因为修复bug或增加新功能而进行升级时，你根本不可能将自定义的内容更新到新的版本上。
为了避免出现这个问题，你需要模块化你的修改。这是我为Bootswatch制作主题时的采取的方法。
首先，我下载了Bootstrap的源代码，把它的名字修改为bootstrap后原封不动的放好。我并没有对它包含的文件进行任何修改，而是新创建了一个单独的文件夹，取名为custom，含有如下三个文件：
custom-variables.less:
我从Bootstrap源码中复制了一份variables.less并在这份拷贝中修改变量。
custom-other.less:
这个文件中包含了那些无法定义成变量的自定义内容。
custom-bootstrap.less
这是新的「核心」文件。我们将把它编译成CSS。与原始的 LESS文件一样，它使用下面的命令来引入上面那两个自定义文件：
[css] view plain copy
print?
<span style="font-size:18px"><span class="at_rule">@<span class="keyword">import</span><span class="string">"../bootstrap/less/bootstrap.less"</span></span>
<span class="at_rule">@<span class="keyword">import</span><span class="string">"custom-variables.less"</span></span>
<span class="at_rule">@<span class="keyword">import</span><span class="string">"custom-other.less"</span></span>
<span class="at_rule">@<span class="keyword">import</span><span class="string">"../bootstrap/less/utilities.less"</span></span>
</span>
修改内容被分隔开后，你可以很轻松的升级到Bootstrap的新版本。只需要将旧bootstrap文件夹替换，再重新编译即可。
我为这种方法创建了一个叫做swatchmaker的样板文件。它还包含了其他内容，例如测试页面和更新Bootstrap到最新版的命令，当修改被保存时执行自动编译，还可以重置你自定义的内容。
技巧与技术
下面介绍一些在你自定义Bootstrap时可能会用到的技巧与技术。
了解Bootstrap。
阅读官方文档，熟悉所有组件，深入学习源码。如果你经常需要自定义Bootstrap，在这些内容上的投入所带来的回报将会物超所值。
先从变量开始
当你使用生成器或者直接编辑源码时，先从它们支持的变量开始修改。你会发现它们就已经能够满足你的需求了。改变导航栏与基本颜色就是一个重大起步。
选择调色板
考虑网站的配色方案，特别是主要与次要颜色。这里有些优秀资源 能够提供帮助。你在调色板上选择好后，可以将这些颜色设置为变量。这样就不会看到散落在代码中的十六进制颜色值了。
增加一些资源
纹理背景与自定义字体能让世界变得大不相同。对于Web字体，你可以在代码中的任何位置加入@import语句，LESS会自动将生成的CSS代码提升到顶部。我比较喜欢将这些内容放到custom-other.less文件的顶部。
使用alpha透明
当增加box-shadow和text-shadow这样的效果时，颜色使用RGBa来定义，为旧的浏览器做好降级处理，始终使用这样的值。这会为你的组件增加内聚性。
匹配选择器
当要覆盖一个类时，试着采用Bootstrap中使用的选择器。这会保证你的类与原始类保持同步，还避免了不断升级的特异性战争。记住一点，特异性相同的情况下，后写的选择器生效。经过上面的模块化处理，你的自定义内容将始终覆盖掉原始内容。
封装你的代码
记住 LESS 允许嵌套选择器。利用这个特性来封装每个组件。我发现这对于保持代码的整洁与可读性有很大帮助。两段效果相同的代码里，不要这么使用...
[css] view plain copy
print?
<span style="font-size:18px"><span class="class">.navbar</span><span class="class">.brand</span><span class="rules">{
<span class="rule"><span class="attribute">color</span>:<span class="value">@white</span></span>
<span class="rule">}</span></span>
<span class="class">.navbar</span><span class="class">.nav</span>><span class="tag">li</span>><span class="tag">a</span><span class="rules">{
<span class="rule"><span class="attribute">color</span>:<span class="value">@grayLighter</span></span>
<span class="rule">}</span></span>
</span>
试试这个：
[ruby] view plain copy
print?
<span style="font-size:18px">.navbar {
.brand {
<span class="symbol">color:</span><span class="variable">@white</span>
}
.nav >li >a {
<span class="symbol">color:</span><span class="variable">@grayLighter</span>
}
}
</span>
善用混合(mixin)
LESS提供了便利的混合，比如说lighten()与darken()。Bootstrap在mixins.less中定义的内容也归你支配。并且不要忘记，你可以随时创建自己的混合。
配合实例学习
看看其他人是如何自定义Bootstrap的。例如，我所有的主题代码都能从GitHub获取到。
你想添加自己的技巧吗？请分享在下面的留言中吧。
总结
如果你注重性能——通常来说应该如此——那么你最好在一个更轻量级的基础上实现自己的解决方案。
但如果你的首要目标是尽快上线你的网站，或者前端开发并非你的强项，那么Twitter Bootstrap可能正适合你。许多人就是因为Bootstrap的人气而纷纷转向这个阵营。
鉴于Bootstrap在Web上的大量应用，你要学习它的所有优点并让其为你所用。
扩展阅读
How to Build a Website Using Twitter Bootstrap and SASS – Part 1
How to Build a Website Using Twitter Bootstrap and SASS – Part 2
GETTING STARTED WITH BOOTSTRAP: PART 1 OF SERIES
GETTING STARTED WITH BOOTSTRAP: PART 2 OF SERIES
GETTING STARTED WITH BOOTSTRAP: PART 3 OF SERIES
How to Customize Twitter Bootstrap’s Design in a Rails app
How to use Twitter Bootstrap to Create a Responsive Website Design
Twitter BootStrap:前端框架利器
CSS——Bootstrap From Twitter
Mark Otto（马克奥托）的BootStrap.less
Preboot
Twitter Bootstrap Tutorials
The Best BootStrap Resources
