按钮类

Created: November-22, 2018

Bootstrap 为样式按钮提供了多个类，使它们脱颖而出。

可以通过将 .btn 类添加到元素来创建引导按钮。

Bootstrap 类	角色（颜色）
`.btn-default`	标准按钮（白色）
`.btn-primary`	提供额外的视觉重量并识别主要动作（蓝色）
`.btn-success`	用于表示成功的操作（绿色）
`.btn-info`	用于提供信息的上下文按钮（浅蓝色）
`.btn-warning`	表示用户应该小心谨慎（黄色）
`.btn-danger`	表示危险或消极行为（红色）
`.btn-link`	让你的按钮看起来像一个锚标签。

按钮大小

你还可以使用 .btn-size 类创建不同大小的按钮

Bootstrap 类	结果
`.btn-lg`	创建一个更大的按钮
`.btn-sm`	创建一个较小的按钮
`.btn-xs`	创建一个超小按钮
`.btn-block`	按钮成为块级元素并跨越其父级的整个宽度

使按钮激活

active 类将按下按钮。

<button type="button" class="btn btn-primary active">Active Primary</button>

禁用按钮

将 disabled 类添加到按钮将使按钮不可单击，并在将鼠标悬停在其上时显示禁用的光标。

<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

一起水平渲染按钮

使用 .btn-group 类可以水平渲染多个按钮。只需将按钮包装在容器元素中，并将该元素赋予 btn-group 类。

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apples</button>
  <button type="button" class="btn btn-primary">Oranges</button>
  <button type="button" class="btn btn-primary">Pineapples</button>
</div>

垂直渲染按钮

将 .btn-group-vertical 类应用于容器元素

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apples</button>
  <button type="button" class="btn btn-primary">Oranges</button>
  <button type="button" class="btn btn-primary">Pineapples</button>
</div>

使按钮组占据全宽

包裹在 .btn-group 元素内的按钮只占用所需的宽度。要使组跨越屏幕的整个宽度，请使用 .btn-group-justified 代替。

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apples</a>
  <a href="#" class="btn btn-primary">Oranges</a>
  <a href="#" class="btn btn-primary">Pineapples</a>
</div>