按钮(Buttons)

将Bootstrap的自定义按钮样式用于表单,对话框等中的操作,并支持多种尺寸,状态等。

例子

Bootstrap包括几种预定义的按钮样式,每种样式都有其自己的语义目的,并添加了一些额外的按钮以进行更多控制。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

禁用文字换行

如果您不希望按钮文字换行,则可以向按钮添加.text-nowrap类。 在Sass中,您可以设置$btn-white-space:nowrap以禁用每个按钮的文本换行。

按钮标签

.btn类被设计为与<button>元素一起使用。 但是,您也可以在<a><input>元素上使用这些类(尽管某些浏览器可能会使用略有不同的呈现方式)。

当在用于触发页内功能(如折叠内容)的元素“ ”上使用按钮类时,而不是链接到当前页面中的新页面或新部分,应为这些链接赋予一个“ role =“ button “`将其目的适当传达给屏幕阅读器等辅助技术。

Link
<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">
<input class="btn btn-primary" type="reset" value="Reset">

按钮轮廓

需要一个按钮,但是他们不需要带来沉重的背景颜色吗? 用.btn-outline- *替换默认修饰符类,以删除任何按钮上的所有背景图像和颜色。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

尺寸(Sizes)

喜欢更大或更小的按钮吗? 添加.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>

活跃状态

处于活动状态时,按钮将显示为按下状态(背景更深,边框更深且有阴影)。 **由于使用伪类,因此无需在

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

禁用状态

通过将disabled'布尔属性添加到任何

<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类以使其在外观上显示为禁用。
  • 包括一些未来友好的样式,以禁用锚点按钮上的所有“指针事件”。 在支持该属性的浏览器中,您根本看不到禁用的光标。
  • 禁用按钮应包含“ aria-disabled =“ true”`属性,以向辅助技术指示元素的状态。
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

按钮插件

使用按钮执行更多操作。 控制按钮状态或为更多组件(如工具栏)创建按钮组。

切换状态

添加data-toggle =“ button”来切换按钮的有效状态。 如果要预切换按钮,则必须手动将.active aria-pressed =“ true”添加到

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

复选框和单选按钮

Bootstrap的.button样式可以应用于其他元素,例如

这些按钮的选中状态仅通过按钮上的click事件更新。 如果您使用其他方法更新输入(例如,使用<input type =“ reset”>或通过手动应用输入的checked`属性),则需要在

注意,预先检查的按钮需要您手动将.active类添加到输入的

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

方法

方法 描述
$().button('toggle') Toggles push state. Gives the button the appearance that it has been activated.
$().button('dispose') Destroys an element’s button.