1. WIKI教程
2. 学习Bootstrap
3. Bootstrap - 按钮( Buttons)

Bootstrap - 按钮( Buttons)

本章介绍Bootstrap按钮的使用年限和示例。 任何给定.btn类的.btn都会继承带圆角的灰色按钮的默认外观。 但是，Bootstrap提供了样式按钮的一些选项，如下表所示 -

类	描述
btn	默认/标准按钮。
btn-primary	提供额外的视觉权重，并识别一组按钮中的主要操作。
btn-success	表示成功或积极的行动。
btn-info	信息警报消息的上下文按钮。
btn-warning	表示此操作应谨慎。
btn-danger	表示危险或潜在的负面行为。
btn-link	在保持按钮行为的同时，通过使按钮看起来像链接来强调按钮。

以下示例演示了上述所有按钮类 -

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

新页面打开

按钮大小

下表总结了用于获取各种尺寸按钮的类 -

类	描述
.btn-lg	这使按钮尺寸变大。
.btn-sm	这使按钮尺寸变小。
.btn-xs	这使按钮尺寸变得更小。
.btn-block	这将创建块级按钮 - 跨越父级的整个宽度的按钮。

以下示例演示了这一点 -

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>
<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>
<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>
<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>
<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

新页面打开

按钮状态

Bootstrap提供了一些类，允许您将按钮的状态更改为活动，禁用等，以下各节将讨论这些类。

Active State

活动时，按钮将显示为按下（背景较暗，边框较暗，内嵌阴影）。 下表总结了用于使按钮元素和锚元素处于活动状态的类 -

元件	类
Button element	使用.active类来显示它已激活。
Anchor element	将.active类用于<a>按钮以显示它已被激活。

以下示例演示了这一点 -

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>
<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

新页面打开

Disabled State

禁用按钮时，它将淡入淡出50％，并失去渐变。

下表总结了用于禁用按钮元素和锚元素的类 -

元件	类
Button element	将disabled attribute添加到<button>按钮。
Anchor element	将disabled class添加到“a”按钮。 Note - 此类仅更改“a”的外观，而不是其功能。 您需要使用自定义JavaScript来禁用此处的链接。

以下示例演示了这一点 -

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>
<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>
<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>
<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

新页面打开

按钮标签

您可以将按钮类与，或《input》元素一起使用。 但建议您将其与元素一起使用，以避免跨浏览器不一致问题。

以下示例演示了这一点 -

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

新页面打开