Bootstrap 按钮
按钮样式
Bootstrap 提供了不同风格的按钮:
为了实现上述按钮样式，Bootstrap 有以下样式类:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
下面的实例显示了不同按钮样式的代码:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>按钮风格</h2><button type="button" class="btn" style="color:#333;">基础</button><button type="button" class="btn btn-default">默认</button><button type="button" class="btn btn-primary">重要</button><button type="button" class="btn btn-success">成功</button><button type="button" class="btn btn-info">信息</button><button type="button" class="btn btn-warning">警告</button><button type="button" class="btn btn-danger">危险</button><button type="button" class="btn btn-link">链接</button></div></body></html>
这些按钮样式可以应用于 <a>, <button>, 或 <input> 元素:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>Button 标签</h2><a href="#" class="btn btn-info" role="button">Link Button</a><button type="button" class="btn btn-info">Button</button><input type="button" class="btn btn-info" value="Input Button"><input type="submit" class="btn btn-info" value="Submit Button"></div></body></html>
为什么我们要在链接的 href 属性中加 # ？因为我们没有任何页面可链接，也不想链接一个不存在的页面，因此我们在实例中将 # 作为链接。但它其实应该是指向特定页面的真实 URL。
按钮大小
Bootstrap 提供 4 种按钮大小样式:
定义不同大小的样式类是:
.btn-lg.btn-sm.btn-xs
下面的实例显示了不同按钮大小的代码:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>Button 大小</h2><button type="button" class="btn btn-primary btn-lg">大</button><button type="button" class="btn btn-primary">普通</button><button type="button" class="btn btn-primary btn-sm">小</button><button type="button" class="btn btn-primary btn-xs">非常小</button></div></body></html>
块级按钮
块级按钮将撑满父元素的整个宽度。
添加 .btn-block 来创建一个块级按钮:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>块级按钮</h2><button type="button" class="btn btn-primary btn-block">Button 1</button><button type="button" class="btn btn-default btn-block">Button 2</button><h2>大的块级按钮</h2><button type="button" class="btn btn-primary btn-lg btn-block">按钮 1</button><button type="button" class="btn btn-default btn-lg btn-block">按钮 2</button><h2>小的块级按钮</h2><button type="button" class="btn btn-primary btn-sm btn-block">按钮 1</button><button type="button" class="btn btn-default btn-sm btn-block">按钮 2</button></div></body></html>
启动/禁用按钮
按钮可以设置为激活（按下）或不可用（无法按下）状态:
使用 .active 类让一个按钮激活（显示按下）, 然后使用 .disabled 让一个按钮不可用（无法按下）:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>Button 状态</h2><button type="button" class="btn btn-primary">按钮</button><button type="button" class="btn btn-primary active">激活的按钮</button><button type="button" class="btn btn-primary disabled">可不用的按钮</button></div></body></html>
完整的 Bootstrap 按钮参考
有关所有按钮类的完整参考，请访问本站的完整 Bootstrap 按钮参考。