.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，朝著這個目標邁進吧～