按钮

在表单、对话框等需要用到的场合使用Bootstrap的自定义按钮样式。Bootstrap按钮支持一系列上下文变量、尺寸、状态和其它。

示例

Bootstrap包括了六种预定义的按钮样式，每种样式服务于它们各自的语义目的。

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

向使用辅助技术的人传达含义

对一个按钮使用色彩以添加其含义，只是提供了视觉表达，但是不会传达给使用辅助技术的用户——比如说使用屏幕阅读器的用户。请确保按钮自身的内容（即按钮上的文本）也表达了这些由颜色表达出来的信息，或者通过替补的文字表达它，比如说添加额外的文本，用.sr-only类隐藏它。

按钮标签

.btn类本是设计用在<button>元素上的。然而，你同样可以在<a>或者<input>元素上使用这个类（虽然一些浏览器可能产生稍微不同的外观）。

如果在<a>元素上使用按钮类，这个<a>只能用来触发页面内的功能（比如折叠内容），而不是链接到一个新页面或者当前页面的另一章节。这些链接必须给一个role="button"从而向使用辅助技术（比如屏幕阅读器）的用户恰当地传达它们的目的。

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">

描边按钮

需要一个按钮，但是不要他们自带的背景颜色？请用 .btn-*-outline 代替默认的修饰类，移除这些按钮上面的所有的背景底图和底色。

<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-secondary-outline">Secondary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>

按钮尺寸

更喜欢大一点或者小一点的按钮？给按钮添加.btn-lg或者.btn-sm类以实现额外的大小。

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

给按钮添加.btn-block类，可以创建一个块区域按钮——即那种延展到父元素全宽的按钮。

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

激活状态

激活的按钮将呈现按下的外观（一个更深的底色、更深的边框，以及嵌入的影子）。没有必要为<button>添加一个类，因为他们使用伪类。然而，如果你需要程序化重设按钮的状态，你还可以用.active（以及aria-pressed="true"属性）强迫按钮呈现激活的外观。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>

禁用状态

给任何<button>元素添加disabled布尔属性，能使按钮呈现非激活的状态。

注意！ IE 9以及更低的版本会把禁用的按钮的文字渲染成灰色的、带阴影的文字，这是我们改变不了的。

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

因为<a>元素不支持disabled属性，所以你必须添加.disabled类以伪装它。

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>

链接功能警告

这个类使用pointer-events:none会试图禁用<a>的链接功能。但是那个CSS特性还没有标准化，因此在Opera 18以及以下版本中不完全支持，IE 11中也没有完全支持。另外，即使在支持pointer-events:none的浏览器中，键盘导航依然不受影响。这意味着不盲的键盘用户以及使用辅助技术的用户依然能够激活那些链接。所以为了安全起见，使用自定义JavaScript来禁用这些链接吧。

按钮插件

还可以对按钮做更多。可以控制按钮的状态或者为更多组件创建按钮组，像工具栏之类的。

切换状态

添加data-toggle="button"以切换一个按钮的active状态。如果你想提前切换一个按钮的状态，你必须为<button>人为添加.active类以及aria-pressed="true"。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

复选框和单选钮按钮

Bootstrap的.button样式可以应用到别的元素上，比如说<label>，它提供了复选框或单选钮切换。在一个包含了那些按钮的.btn-group上添加data-toggle="button"，可以在他们各自的样式中启用切换。

这些按钮的checked状态只能通过按钮上的click事件更新。如果你使用别的方法更新这个按钮——比如说，用<input type="reset">或者手动修改输入控件的checked属性——你就必须手动切换<label>的.active类。

注意：提前选中的按钮要求你手动在输入控件的<label>上添加.active类。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

方法