以下是一些常用的 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