Bootstrap 按钮
本文将向大家讲解一下bootstrap框架的按钮样式及使用方式。
bootstrap框架中的按钮样式是基于类：btn来实现的。按钮样式可以用于以下样式可用于a,、button或 input元素上。
一、类的介绍
类 | 说明 |
.btn | 为按钮添加基本样式 |
.btn-default | 默认/标准按钮 |
.btn-primary | 原始按钮样式 |
.btn-success | 表示成功按钮 |
.btn-info | 表示信息按钮，可用于弹层 |
.btn-warning | 表示谨慎操作按钮 |
.btn-danger | 表示危险操作按钮，较多应用于删除操作 |
.btn-link | 链接样式按钮 |
.btn-lg | 制作大按钮 |
.btn-xs | 制作小按钮 |
.btn-sm | 制作超小按钮 |
.btn-block | 块级按钮（拉伸至父元素100%宽度） |
.active | 激活状态按钮 |
.disabled | 禁用状态按钮 |
二、按钮样式演示
<button class="btn">为按钮添加基本样式</button> <button class="btn btn-default">默认/标准按钮</button> <button class="btn btn-primary">原始按钮样式</button> <button class="btn btn-success">表示成功按钮</button> <button class="btn btn-info">表示信息按钮，可用于弹层</button> <button class="btn btn-warning">表示谨慎操作按钮</button> <button class="btn btn-danger">表示危险操作按钮，较多应用于删除操作</button> <button class="btn btn-link">链接样式按钮</button>
三、按钮的大小演示
<button class="btn btn-lg">基本样式 - 大按钮</button> <button class="btn btn-xs">基本样式 - 小按钮</button> <button class="btn btn-sm">基本样式 - 超小按钮</button>
四、按钮状态演示
<button class="btn btn-info">基本按钮</button> <button class="btn btn-info active">激活按钮</button> <button class="btn btn-info disabled">禁用按钮</button>
