Bootstrap - 按钮

Bootstrap按钮 - 从概述，环境设置，基本结构，全局样式，网格系统，流体网格系统，布局，响应式设计，排版，表格，按钮，图像，图标，下拉列表，按钮组开始，简单易学地学习Bootstrap ，导航元素，导航栏，面包屑，分页，标签，徽章，版式，缩略图，警报，进度栏，媒体对象，Javascript插件像过渡，模态，下拉列表，Scrollspy，选项卡，工具提示，弹出，警报，按钮，折叠，旋转木马，Typeahead，Affix，Glyphicons，Jumbotron，Demos。

本章介绍了Bootstrap按钮的使用年限和示例.任何给出 .btn 类的东西都会继承带圆角的灰色按钮的默认外观.但是，Bootstrap为样式按钮提供了一些选项，这些选项总结在下表和减号中;

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

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

Default ButtonPrimary ButtonSuccess ButtonInfo ButtonWarning ButtonDanger ButtonLink Button

Button Size

下表总结了用于获取各种大小按钮的类:

Class	Description
.btn-lg	This makes the button size large.
.btn-sm	This makes the button size small.
.btn-xs	This makes the button size extra small.
.btn-block	This creates block level buttons—those that span the full width of a parent.

The following example demonstrates this −

Large Primary button Large button

Default size Primary button Default size button

Small Primary button Small button

Extra small Primary button Extra small button

Block level Primary button Block level button

Button State

Bootstrap提供的类允许您将按钮状态更改为活动状态，禁用状态等，以下各节将对此进行讨论。

Active State

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

Element	Class
Button element	Use .active class to show that it is activated.
Anchor element	Use .active class to buttons to show that it is activated.

The following example demonstrates this −

Default Button Active Button

Primary button Active Primary button

Disabled State

禁用按钮时，它会淡化50％的颜色，并失去渐变。

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

Element	Class
Button element	Add the disabled attribute to
Anchor element	Add the disabled class to buttons. Note − This class will only change the 's appearance, not its functionality. You need to use custom JavaScript to disable links here.

Element

Class

Button element

Add the disabled attribute to

Anchor element

Add the disabled class to buttons.

Note − This class will only change the 's appearance, not its functionality. You need to use custom JavaScript to disable links here.

The following example demonstrates this −

Default Button Disabled Button

Primary button Disabled Primary button

Link Disabled Link

Primary link Disabled Primary link

按钮标记

您可以将按钮类与< a>，< button>或< input>一起使用元件.但建议您使用< button>元素主要是为了避免跨浏览器的不一致问题.

以下示例演示了这个 :

LinkButton