Bootstrap5 按钮组学习笔记

Bootstrap 是一种流行的 CSS 框架，具有一些内置组件，例如按钮、表单和导航。其中，按钮组件是一个常用的组件，可用于创建可交互的用户界面。在本文中，我们将探讨 Bootstrap 5 中的按钮组件。

基本用法

按钮组件可以使用 <button>、<a> 或 <input> 标签创建。以下是一个使用 <button> 标签创建按钮组件的示例代码：

htmlCopy Code
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Primary</button>
  <button class="btn btn-secondary" type="button">Secondary</button>
  <button class="btn btn-success" type="button">Success</button>
  <button class="btn btn-danger" type="button">Danger</button>
  <button class="btn btn-warning" type="button">Warning</button>
  <button class="btn btn-info" type="button">Info</button>
  <button class="btn btn-light" type="button">Light</button>
  <button class="btn btn-dark" type="button">Dark</button>
  <button class="btn btn-link" type="button">Link</button>
</div>

此代码段将创建一个包含不同颜色和样式的按钮组件。在这里，我们使用了 d-grid 和 gap-2 类来实现网格布局并添加间距。

尺寸和状态

Bootstrap 5 提供了几个类来设置按钮组件的尺寸和状态。以下是一些示例代码：

小号按钮

htmlCopy Code
<button class="btn btn-primary btn-sm" type="button">Small button</button>

大号按钮

htmlCopy Code
<button class="btn btn-primary btn-lg" type="button">Large button</button>

禁用按钮

htmlCopy Code
<button class="btn btn-primary" type="button" disabled>Disabled button</button>

激活状态按钮

htmlCopy Code
<button class="btn btn-primary active" type="button" aria-pressed="true">Active button</button>

链接按钮

可以使用 <a> 标签创建带有链接的按钮组件。以下是一个示例代码：

htmlCopy Code
<div class="btn-group" role="group" aria-label="Basic example">
  <a class="btn btn-primary" href="#" role="button">Link</a>
  <a class="btn btn-secondary" href="#" role="button">Link</a>
  <a class="btn btn-success" href="#" role="button">Link</a>
</div>

总结

以上是一些 Bootstrap 5 中按钮组件的基本用法、尺寸和状态、链接按钮等等。通过这些例子，我们可以了解如何在自己的项目中使用按钮组件。