Bootstrap4 按钮组

Bootstrap是一个流行的前端框架，适用于快速构建具有响应式特性的网站和应用。Bootstrap4按钮组件是一个重要的组件之一，用于在页面上创建各种类型的按钮，如操作按钮、链接按钮、导航按钮等。

按钮组组件的解释

按钮组是一组彼此紧密关联且共享某些样式属性的按钮的集合。按钮组件提供了灵活性和多种可定制的样式选项。

按钮组类型

Bootstrap4按钮组组件提供了多种类型:

按钮组（button group）
工具栏（toolbar）
大小（size）
垂直排列（vertical）

1. 按钮组

按钮组用于将一组按钮按照一定的排版方式组合在一起。它提供了一组工具，使按钮看起来非常紧密，用户可以单独选择其中一个。

2. 工具栏

工具栏用于将一组相关的按钮组合在一起，通常与导航组件结合使用。

3. 大小

Bootstrap4按钮组组件天然支持按钮的大小调整。提供了三种可用的按钮大小选项: 大（lg）、默认大小(md)和小（sm），通过添加按钮大小类，将按钮大小更改为所需大小。

4. 垂直排列

在垂直排列中，按钮垂直排列。可通过添加按钮排列类来实现垂直按钮。

如何使用按钮组件

要使用Bootstrap4按钮组件，只需添加相应的HTML和CSS类即可。

1. 基本按钮组

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

2. 工具栏

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

3. 按钮大小

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

4. 垂直排列

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-secondary">Top</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Bottom</button>
</div>

总结

Bootstrap4 按钮组件为开发人员提供了一组非常灵活的工具，用于创建各种样式和排版的按钮。按钮组件易于使用和定制，因此，即使您没有深入的CSS技能，也可以轻松地创建漂亮的按钮样式。

Bootstrap4 按钮 Bootstrap4 提示框