Bootstrap4 按钮学习笔记

在这个笔记中，我们将学习 Bootstrap4 中按钮的使用方法和示例。

基础按钮

默认情况下，Bootstrap4 提供了 3 种基本的按钮样式：primary、secondary 和 success。这些按钮可以通过添加相应的类来实现：

markdownCopy Code
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>

按钮大小

Bootstrap4 提供了不同大小的按钮，可以通过添加以下类之一来实现：btn-lg（大号按钮）、btn-sm（小号按钮）和btn-xs（极小按钮）。

markdownCopy Code
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-secondary btn-sm">Small Button</button>
<button class="btn btn-success btn-xs">Extra Small Button</button>

按钮样式

Bootstrap4 提供了多种类型的按钮，例如轮廓按钮、链接按钮、禁用按钮等。

轮廓按钮

轮廓按钮是一种带有边框的按钮，可以通过添加 .btn-outline-* 类来实现。例如，.btn-outline-primary 可以创建一个带有主题颜色边框的按钮。

markdownCopy Code
<button class="btn btn-outline-primary">Outline Primary Button</button>
<button class="btn btn-outline-secondary">Outline Secondary Button</button>
<button class="btn btn-outline-success">Outline Success Button</button>

链接按钮

链接按钮是一种看起来像普通超链接的按钮，点击后会导航到指定的 URL。可以通过添加 .btn-link 类来实现。

markdownCopy Code
<button class="btn btn-link">Link Button</button>

禁用按钮

禁用按钮用于在不可用状态下显示按钮。可以通过添加 disabled 属性来实现。

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

按钮组

按钮组允许将一组相关按钮组合在一起。可以通过添加 .btn-group 和 .btn-group-* 类来实现。 btn-group只是默认的 class， btn-group-* 是根据你想要将组中的按钮排列成水平或垂直的方式分别传递 vertical 和 horizontal 参数来使用的。

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

按钮工具栏

按钮工具栏允许将多个按钮组合在一起，并可选择水平或垂直排列。可以通过添加 .btn-toolbar 类来实现。

markdownCopy Code
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">5</button>
  </div>
</div>

这是一个基本的按钮工具栏示例，其中包含两个按钮组。第一个按钮组中包含 4 个按钮，第二个按钮组中包含一个按钮。

以上是 Bootstrap4 中按钮的一些常见用法，对于其他更高级的用法可以参考官方文档。