转载

Bootstrap 按钮尺寸大小

Bootstrap 按钮-尺寸大小

下表列出了获得各种大小按钮的 class：

Class	描述
.btn-lg	这会让按钮看起来比较大。
.btn-sm	这会让按钮看起来比较小。
.btn-xs	这会让按钮看起来特别小。
.btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。

下面的实例演示了上面所有的按钮 class：

尺寸

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。

<p>   <button type="button" class="btn btn-primary btn-lg">Large button</button>   <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p>   <button type="button" class="btn btn-primary">Default button</button>   <button type="button" class="btn btn-default">Default button</button> </p> <p>   <button type="button" class="btn btn-primary btn-sm">Small button</button>   <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p>   <button type="button" class="btn btn-primary btn-xs">Extra small button</button>   <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>