Bootstrap响应式前端框架笔记五——按钮

    Bootstrap中预设了default，primary，info，warning，danger和link6种按钮风格，示例如下：

    <p>Bootstrap中预设的按钮样式如下</p>
<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>

效果如下：

Bootstrap响应式前端框架笔记五——按钮_按钮

可以为按钮元素添加btn-lg，btn-sm，btn-xs类来进行按钮尺寸的设置，示例如下：

    <p>设置按钮的大小</p>
<button type="button" class="btn btn-default btn-lg">正常</button>
<button type="button" class="btn btn-primary">重要</button>
<button type="button" class="btn btn-success btn-sm">成功</button>
<button type="button" class="btn btn-info btn-xs">信息</button>

效果如下图：

Bootstrap响应式前端框架笔记五——按钮_按钮_02

使用btn-block类可以将按钮设置为充满整个父元素，示例如下：

    <p>使用btn-block类可以将按钮设置为充满父元素</p>
<button type="button" class="btn btn-default btn-block">正常</button>
<button type="button" class="btn btn-primary btn-block">重要</button>

效果如下：

Bootstrap响应式前端框架笔记五——按钮_button标签_03

需要注意：当button标签被用户点击时，按钮周围会出现边框，如果不需要这个边框，可以使用a标签来创建按钮。