Bootstrap4 按钮组
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技能,也可以轻松地创建漂亮的按钮样式。