.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,