1.定义button
<a>, <button>, <input>
均可以定义按钮
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
2.button分类
<button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-default">默认按钮</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>
3.button大小
- btn-lg (大按钮)Large button
- btn-default (默认尺寸)Default button
- btn-sm (小按钮)Small button
- btn-xs (超小尺寸)Extra small button
- btn-block (块级元素)Block level button,可以将按钮拉伸至父元素100%的宽度,变为块级(block)元素
<p>
<button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
<button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary"> 默认大小的原始按钮</button>
<button type="button" class="btn btn-default"> 默认大小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
<button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
<button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
<button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>
4.button状态
- 禁用状态
表现颜色变淡,无法点击,为按钮添加disabled="disabled"
实现
<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-default" disabled="disabled">禁用按钮</button>
<br/><br/>
<button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-primary" disabled="disabled">禁用的原始按钮</button>
- 激活状态
表现为 底色更深、边框夜色更深、向内投射阴影。通过 active 实现
<button type="button" class="btn btn-default ">默认按钮</button>
<button type="button" class="btn btn-default active">激活按钮</button>
<br/>
<button type="button" class="btn btn-primary ">原始按钮</button>
<button type="button" class="btn btn-primary active">激活的原始按钮</button>
```
![](https://img.haomeiwen.com/i3488005/443b0356ac41532b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###5.按钮组
将一组按钮放在同一行里
```
<div class="btn-group">
<button type="button" class="btn btn-default"> 1</button>
<button type="button" class="btn btn-default"> 2</button>
<button type="button" class="btn btn-default"> 3</button>
</div>
```
![](https://img.haomeiwen.com/i3488005/011cf3137141def8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
> 参考:http://v3.bootcss.com/css/#buttons
http://www.runoob.com/bootstrap/bootstrap-buttons.html
http://v3.bootcss.com/components/#btn-groups
网友评论