转载

Bootstrap 按钮组尺寸大小

按钮的尺寸大小

只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了。

 按钮尺寸（大） 语法：btn-group-lg 按钮尺寸（中） 语法：btn-group-sm 按钮尺寸（小） 语法：btn-group-xs

下面的实例演示了上面 'Bootstrap 按钮组语法' 中讨论到的 class .btn-group-* 的使用：

<div class="btn-group btn-group-lg">

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸：最大尺寸</button>

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸：最大尺寸</button>

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸：最大尺寸</button>

</div>

<div class="btn-group">

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示：默认尺寸</button>

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示：默认尺寸</button>

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示：默认尺寸</button>

</div>

<div class="btn-group btn-group-sm">

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示：尺寸中</button>

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示：尺寸中</button>

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示：尺寸中</button>

</div>

<div class="btn-group btn-group-xs">

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示：最小尺寸</button>

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示：最小尺寸</button>

  <button type="button" class="btn btn-default">Bootstrap按钮的尺寸大小演示：最小尺寸</button>

</div>