Bootstrap Demo

按钮

类	描述
.btn	为按钮添加基本样式
.btn-default	默认/标准按钮
.btn-primary	原始按钮样式（未被操作）
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示需要谨慎操作的按钮
.btn-danger	表示一个危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	制作一个大按钮
.btn-sm	制作一个小按钮
.btn-xs	制作一个超小按钮
.btn-block	块级按钮(拉伸至父元素 100%的宽度)
.active	按钮被点击
.disabled	禁用按钮

常规按钮

					
<button type="button" class="btn btn-default">default 按钮</button>
<button type="button" class="btn btn-primary">primary 按钮</button>
<button type="button" class="btn btn-success">success 按钮</button>
<button type="button" class="btn btn-info">info 按钮</button>
<button type="button" class="btn btn-warning">warning 按钮</button>
<button type="button" class="btn btn-danger">danger 按钮</button>
<button type="button" class="btn btn-link">link 按钮</button>

按钮大小

.btn-lg 大按钮

					
<button type="button" class="btn btn-default btn-lg">default 按钮</button>
<button type="button" class="btn btn-primary btn-lg">primary 按钮</button>
<button type="button" class="btn btn-success btn-lg">success 按钮</button>
<button type="button" class="btn btn-info btn-lg">info 按钮</button>
<button type="button" class="btn btn-warning btn-lg">warning 按钮</button>
<button type="button" class="btn btn-danger btn-lg">danger 按钮</button>
<button type="button" class="btn btn-link btn-lg">link 按钮</button>

.btn-sm 小按钮

					
<button type="button" class="btn btn-default btn-sm">default 按钮</button>
<button type="button" class="btn btn-primary btn-sm">primary 按钮</button>
<button type="button" class="btn btn-success btn-sm">success 按钮</button>
<button type="button" class="btn btn-info btn-sm">info 按钮</button>
<button type="button" class="btn btn-warning btn-sm">warning 按钮</button>
<button type="button" class="btn btn-danger btn-sm">danger 按钮</button>
<button type="button" class="btn btn-link btn-sm">link 按钮</button>

.btn-xs 超小按钮

					
<button type="button" class="btn btn-default btn-xs">default 按钮</button>
<button type="button" class="btn btn-primary btn-xs">primary 按钮</button>
<button type="button" class="btn btn-success btn-xs">success 按钮</button>
<button type="button" class="btn btn-info btn-xs">info 按钮</button>
<button type="button" class="btn btn-warning btn-xs">warning 按钮</button>
<button type="button" class="btn btn-danger btn-xs">danger 按钮</button>
<button type="button" class="btn btn-link btn-xs">link 按钮</button>

.btn-block 块级按钮

					
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-default btn-block">default 按钮</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-primary btn-block">primary 按钮</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-success btn-block">success 按钮</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-info btn-block">info 按钮</button>
</div>

.active 激活按钮

					
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-default btn-block active">default 按钮</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-primary btn-block active">primary 按钮</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-success btn-block active">success 按钮</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-info btn-block active">info 按钮</button>
</div>

.disabled 禁用按钮

					
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-default btn-block disabled">default 按钮</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-primary btn-block disabled">primary 按钮</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-success btn-block disabled">success 按钮</button>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
	<button type="button" class="btn btn-info btn-block disabled">info 按钮</button>
</div>