Bootstrap5 按钮学习笔记

Bootstrap5 是一个流行的前端框架，提供了简单快速地创建响应式布局、美观的样式和交互性的组件。在 Bootstrap 中，按钮是最基本和常用的组件之一，下面将详细讲解 Bootstrap5 按钮。

基本按钮

基本的按钮样式是在 <button> 标签上添加 .btn 类来实现的。以下是一些例子：

markdownCopy Code
<button class="btn btn-primary">Primary</button>

<button class="btn btn-secondary">Secondary</button>

<button class="btn btn-success">Success</button>

<button class="btn btn-danger">Danger</button>

<button class="btn btn-warning">Warning</button>

<button class="btn btn-info">Info</button>

<button class="btn btn-light">Light</button>

<button class="btn btn-dark">Dark</button>

以上代码将生成 8 个不同颜色的按钮。

链接按钮

Bootstrap 还提供了用 <a> 标签作为按钮的样式。你可以在 <a> 标签内添加 .btn 和 .btn-* 类来实现以下效果：

markdownCopy Code
<a href="#" class="btn btn-primary">Primary</a>

<a href="#" class="btn btn-secondary">Secondary</a>

<a href="#" class="btn btn-success">Success</a>

<a href="#" class="btn btn-danger">Danger</a>

<a href="#" class="btn btn-warning">Warning</a>

<a href="#" class="btn btn-info">Info</a>

<a href="#" class="btn btn-light">Light</a>

<a href="#" class="btn btn-dark">Dark</a>

按钮尺寸

Bootstrap5 还提供了三种不同的按钮尺寸：大号、默认和小号。在 .btn 类后面添加 .btn-lg、.btn-sm 或 .btn-block 类即可实现不同尺寸的按钮。

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

<button class="btn btn-primary">Normal button</button>

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

<button class="btn btn-primary btn-block">Block level button</button>

禁用按钮

你还可以将按钮置为禁用状态，只需要在 <button> 或 <a> 标签上添加 disabled 属性即可。

markdownCopy Code
<button class="btn btn-primary" disabled>Primary button</button>

<a href="#" class="btn btn-primary disabled">Primary link</a>

按钮组

如果你需要将一组按钮放在一起，可以使用按钮组。在一个包含按钮的元素上添加 .btn-group 类即可。

markdownCopy Code
<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
</div>

以上代码将生成一个包含三个按钮的按钮组。

实例

以下是一个演示 Bootstrap5 按钮的简单示例：

markdownCopy Code
# Bootstrap5 按钮示例

这是一个包含各种不同类型和尺寸的按钮示例：

## 基本按钮

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

## 链接按钮

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

## 按钮尺寸

<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-primary">Normal button</button>
<button class="btn btn-primary btn-sm">Small button</button>
<button class="btn btn-primary btn-block">Block level button</button>

## 禁用按钮

<button class="btn btn-primary" disabled>Primary button</button>
<a href="#" class="btn btn-primary disabled">Primary link</a>

## 按钮组

<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
</div>

以上代码将生成一个包含各种类型和尺寸的按钮示例。