bootstrap为什么不直接使用.btn-default而要使用.btn.btn-default实现同样的效果?

.btn 是按钮的基础，主要是调整盒模型的，.btn-default 以及其他 .btn-* 系列则是视觉样式的调整，如颜色、大小等等。因此你想到的好处是对的，基础结构和视觉变量分离。

至于说如何使用起来简单，这就带出了一件事：多数 Bootstrap 的用户使用该框架的姿势都是错的！默认提供的 class 直接拿来用？Too Young Too Simple！

默认提供的 class 只适用于快速搭建原型，理论上当产品进入正式的开发阶段，Bootstrap 就可以丢弃不用了。当然你可以选择基于 Bootstrap 进行正式开发，但此时就不要拿默认的 class 来搞，一是 class 老长一串写起来用起来不方便，二是直接使用默认的 class 不便于扩展和微调，往往必须再另写规则去覆盖，这不合道理。

正确的姿势是什么呢？首先，你得把 bootstrap.css 去掉，换成 less／sass 版本的 Bootstrap，于是接下来你的样式开发就要基于某种预处理语言了。

然后，把你的原型整理好，开始替换里面各组件的样式。比如按钮，你可以重写一个（或几个，视设计而定）按钮的样式，使用预处理语言的机制把 Bootstrap 的 mixin 混入进来再加以自己的扩展或修改，随手举个例子：

.btn-standout {
    @extend .btn;
    @extend .btn-block;

    @media (max-width: $screen-xs-max) {
        @include button-size(
            $padding-large-vertical,
            $padding-large-horizontal,
            $font-size-large,
            $line-height-large,
            $border-radius-large
        );
    }

    &.sell {
        @extend .btn-primary;
    }
}

这是我随手搜索的一个例子，可以看出最终生成的是一个独立的 class：.btn-standout，首先它扩展了默认的 .btn 和 .btn-block，然后又设置了一个响应式规则，在某种情况下改变了这个按钮的尺寸，接着如果追加 .sell 的话，则使用 .btn-primary 的颜色定义。当然，这里面的变量就要你预先自定义好了。

像 button-size 这样的 mixin，在 bootstrap-sass 的源码里就可以找到，你可以通过默认的那些 class 的定义顺藤摸瓜搞清楚它们都是做什么的，然后依照自己的需要灵活使用它们。这才是使用 Bootstrap 的正确姿势，会用的人写出来的东西，单从 HTML 上引用的 class 你根本就看不出他是否使用了 Bootstrap，