在 Bootstrap 4 中,按钮是非常重要和常用的组件之一。Bootstrap 提供了多种按钮样式和大小,同时还支持按钮组、工具栏等功能。

以下是一些常用的 Bootstrap 4 按钮类和用法:

1. 基本按钮样式

   使用 .btn 类可以创建基本按钮。可以结合其他类,如 .btn-primary、.btn-secondary 等,来应用不同的颜色和样式。
   <button type="button" class="btn btn-primary">Primary Button</button>
   <button type="button" class="btn btn-secondary">Secondary Button</button>

2. 按钮大小

   使用 .btn-lg、.btn-sm、.btn-xs 等类可以调整按钮的大小。
   <button type="button" class="btn btn-primary btn-lg">Large Button</button>
   <button type="button" class="btn btn-secondary btn-sm">Small Button</button>

3. 块级按钮

   使用 .btn-block 类可以创建块级按钮,占据父容器的整个宽度。
   <button type="button" class="btn btn-primary btn-block">Block Level Button</button>

4. 激活状态

   使用 .active 类可以设置按钮的激活状态。
   <button type="button" class="btn btn-primary active">Active Button</button>

5. 禁用状态

   使用 disabled 属性或 .disabled 类可以将按钮设置为禁用状态。
   <button type="button" class="btn btn-primary" disabled>Disabled Button</button>

   或者使用类:
   <button type="button" class="btn btn-primary disabled" disabled>Disabled Button</button>

6. 按钮组

   使用按钮组可以将一组按钮组织在一起。
   <div class="btn-group" role="group" aria-label="Button group">
     <button type="button" class="btn btn-secondary">Button 1</button>
     <button type="button" class="btn btn-secondary">Button 2</button>
     <button type="button" class="btn btn-secondary">Button 3</button>
   </div>

7. 工具栏

   使用工具栏可以将多个按钮组合在一起。
   <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-secondary">1</button>
       <button type="button" class="btn btn-secondary">2</button>
       <button type="button" class="btn btn-secondary">3</button>
     </div>
     <div class="btn-group" role="group" aria-label="Second group">
       <button type="button" class="btn btn-secondary">4</button>
       <button type="button" class="btn btn-secondary">5</button>
     </div>
   </div>

8. 按钮下拉菜单

   使用按钮下拉菜单可以实现点击按钮弹出菜单的功能。
   <div class="btn-group">
     <button type="button" class="btn btn-secondary">Action</button>
     <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
     <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Item 1</a>
       <a class="dropdown-item" href="#">Item 2</a>
       <a class="dropdown-item" href="#">Item 3</a>
     </div>
   </div>

以上是 Bootstrap 4 中一些常见的按钮类和用法。你可以根据具体的需求在不同的按钮上应用这些类来调整样式。确保查阅 [Bootstrap 4 文档中的 Buttons 部分](https://getbootstrap.com/docs/4.6/components/buttons/) 以获取更多详细的信息和选项。


转载请注明出处:http://www.pingtaimeng.com/article/detail/5489/Bootstrap