Bootstrap 基础CSS - 按钮（Buttons）

默认按钮

建议只在<a>和<button>标签上应用.btn。

Button	class=""	Description
Default	btn	Standard gray button with gradient
Primary	btn btn-primary	Provides extra visual weight and identifies the primary action in a set of buttons
Info	btn btn-info	Used as an alternative to the default styles
Success	btn btn-success	Indicates a successful or positive action
Warning	btn btn-warning	Indicates caution should be taken with this action
Danger	btn btn-danger	Indicates a dangerous or potentially negative action
Inverse	btn btn-inverse	Alternate dark gray button, not tied to a semantic action or use
Link	btn btn-link	Deemphasize a button by making it look like a link while maintaining button behavior

按钮大小

可以通过以下类来控制按钮大小。

<p>
  <button class="btn btn-large btn-primary" type="button">Large button</button>
  <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Default button</button>
  <button class="btn" type="button">Default button</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Small button</button>
  <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  <button class="btn btn-mini" type="button">Mini button</button>
</p>

块级按钮会占用整个父元素的宽度。只需添加.btn-block即可。

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

禁用状态

可以向<a>添加.disabled。

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>

注意：此处的禁用状态只是显示效果，需要用JavaScript来真正禁用链接。

可以向<button>添加.disabled类或者disabled属性。

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