Bootstrap 基础CSS - 旋钮（Buttons） _HTML/CSS

Bootstrap 基础CSS - 按钮（Buttons）

默认按钮

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

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use
	`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>