第九章【超入门】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>

使用颜色来添加含义仅提供视觉指示，不会传达给屏幕阅读器等辅助技术的用户。确保以颜色显示的信息要么从内容本身（例如可见文本）中显而易见，要么.visually-hidden通过其他方式包含，例如隐藏在类中的附加文本

禁用文本换行

如果你不想让按钮文字换行，可以加一个[.text-nowrap]。

按钮标签

.btn虽然这些类<button>是为与元素一起使用而设计的，但这些类也可以与元素一起使用<a>。<input>（根据您的浏览器，渲染可能略有不同）

<a>如果您在当前页面中的元素上使用按钮类，这些元素不是指向新页面或部分的链接，而是用作页面内功能的触发器（例如折叠内容），则应为这些链接提供一个它应该正确传达role="button"其屏幕阅读器等辅助技术的目的。

<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">

Link

轮廓按钮

轮廓按钮：.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>

一些按钮样式使用相对较浅的前景色，并且应该只在深色背景上使用，以便有足够的对比度。

尺码

您可以通过应用.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>

禁用状态

<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>停用元素的按钮略有不同。:

<a>不支持 disabled 属性。 disabled你必须使用这个类。
包含禁用锚点按钮的样式。如果您的浏览器支持该功能，则光标将不可见。
将 aria-distabled=”true” 属性添加到禁用按钮（用于屏幕阅读器）
禁用按钮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>

Primary link Link

链接功能警告

.disabled该Class使用禁用<a>功能，但此 CSS 属性未标准化。pointer-events: none如果浏览器pointer-events: none不支持，键盘导航将不受影响，使用键盘或屏幕阅读器等辅助功能的用户仍然可以打开此链接。为了安全起见，将 tabindex=”-1″ 属性（以防止键盘焦点）添加到这些链接aria-disabled =" true "并使用自定义 JavaScript 禁用这些功能。

块按钮

结合 display 和 gap 实用程序来创建类似 Bootstrap4 的全角“块按钮”响应堆栈。通过使用实用程序而不是特定于按钮的类，您可以更好地控制间距、对齐和响应行为。

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

响应变体。调整您的浏览器大小并检查。替换类并禁用实用程序md直到断点。 .d-md-block.d-gridgap-2

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

您可以使用网格列来调整块按钮的宽度。例如，对于半角“块按钮”，.col-6使用 .mx-auto也水平居中。\

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

其他实用程序可用于调整水平情况下的按钮对齐方式。以前面的响应式示例为例，向按钮添加一些 flex 和 margin 实用程序，以便在按钮不再堆叠时右对齐按钮。

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

链接功能警告

关联内容