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

Question

从使用者角度上看我觉得使用.btn-default相比.btn.btn-default使用更方便，为什么bootstrap不只提供.btn-default样式呢?我能想到的一个好处是代码在实现基础样式和附加样式代码上的分离。但是我只是一个普通的开发者，我希望bootstrap能够使用起来简单, 那么请问还有其他什么重要的原因吗?
PS: 我承认我很懒。

Answer 1

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

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

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

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

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

css.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，朝着这个目标迈进吧～

Answer 2

btn的样式：

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

btn-default只设置颜色

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

Answer 3

自己改一改LESS文件就可以

Answer 4

一个是基础 一个是基础之上增强

Answer 5

楼上都说了。