上一節(jié)介紹了按鈕的定制風格，也就是如何實現Web頁面中多種風格按鈕。在Bootstrap框架中，對于按鈕的大小，也是可以定制的。類似于input一樣，通過在基礎按鈕“.btn”的基礎上追加類名來控制按鈕的大小。

在Bootstrap框架中提供了三個類名來控制按鈕大?。?/p>

從上表中不難發(fā)現，在Bootstrap框架中控制按鈕的大小都是通過修改按鈕的padding、line-height、font-size和border-radius幾個屬性。
/*源碼查閱bootstrap.css文件中第2319行～第2339行*/

.btn-lg,
.btn-group-lg> .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}

那么在實際使用中，這幾個類名可以配合按鈕中其他顏色類名一起使用，但唯一一點不能缺少“.btn”類名：

<button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button>
<button class="btn btn-primary" type="button">正常按鈕</button>
<button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按鈕.btn-xs</button>

效果如下圖或查看右側結果窗口：