bootstrap按钮 - 码农教程

bootstrap提供了其中按钮样式:默认(.btn-default),主要(.btn-primary),成功(.btn-success),警告(.btn-warning),危险(.btn-danger),信息(.btn-info),链接(.btn-link)其中基础颜色样式按钮.

代码使用如下:

<button class="btn btn-default">默认按钮</button>
	<button class="btn btn-success">成功按钮</button>
	<button class="btn btn-danger">危险按钮</button>
	<button class="btn btn-info">信息按钮</button>
	<button class="btn btn-warning">警告按钮</button>
	<button class="btn btn-link">链接按钮</button>
	<button class="btn btn-primary">主要按钮</button>

bootstrap除了提供基础颜色按钮外还提供了按钮的带下样式大按钮(.btn-lg),正常按钮(无需强调),小按钮(.btn-sm),超小按钮)(.btn-xs),还提供了按钮块状化(btn-block),这样使得按钮变为块元素,独占一行.

下面演示大小样式的使用:

<button class="btn btn-success btn-lg">成功按钮 大按钮</button>
<button class="btn btn-danger btn-sm">中等危险按钮</button>
<button class="btn btn-info btn-xs">小按钮信息按钮</button>
<button class="btn btn-warning btn-lg btn-block">块状大警告按钮</button>

当然按钮也提供了其他的一些属性,按钮禁用,按钮默认激活(active)等状态

<div class="btn-group">
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-danger active">默认激活active危险按钮</button>
<button class="btn btn-info" disabled>禁用按钮(disabled)信息按钮</button>
</div>