Bootstrap 4 JS 按钮
按钮 CSS 类
要了解有关按钮的教程,请阅读我们的Bootstrap 按钮教程。
下面的类可用于设置任何 <a>、<button> 或 <input> 元素的样式
类 | 描述 | 示例 |
---|---|---|
.btn |
为任何按钮添加基本样式 | 试一试 |
.btn-block |
制作块级按钮(跨越父元素的全部宽度) | 试一试 |
.btn-danger |
表示危险或潜在的负面操作 | 试一试 |
.btn-dark |
深灰色按钮 | 试一试 |
.btn-default |
表示默认/标准按钮 | 试一试 |
.btn-info |
用于信息警报消息的上下文按钮 | 试一试 |
.btn-lg |
制作大号按钮 | 试一试 |
.btn-light |
浅灰色按钮 | 试一试 |
.btn-link |
使按钮看起来像链接(仍具有按钮功能) | 试一试 |
.btn-outline-* |
创建带边框的按钮。使用任何上下文类作为*(btn-outline-primary, btn-outline-success, etc) | 试一试 |
.btn-primary |
提供额外的视觉权重,并识别一组按钮中的主要操作 | 试一试 |
.btn-sm |
制作小号按钮 | 试一试 |
.btn-success |
表示成功或积极的操作 | 试一试 |
.btn-secondary |
表示一个“不太重要”的操作 | 试一试 |
.btn-toolbar |
将按钮组组合成按钮工具栏,以构建更复杂的组件 | 试一试 |
.btn-warning |
表示此操作应谨慎进行 | 试一试 |
.active |
使按钮显示为按下状态 | 试一试 |
.disabled |
使按钮失效 | 试一试 |
通过 JavaScript
使用以下命令手动启用:
$('.btn').button();
按钮选项
无 |
按钮方法
下表列出了所有可用的按钮方法。
注意:方法也可以通过数据属性传递;将方法名称附加到 data-,例如 data-toggle 或 data-dispose。
方法 | 描述 | 试一试 |
---|---|---|
.button("toggle") | 使按钮看起来处于按下状态 | 试一试 |
.button("dispose") | 销毁元素的按钮 |