Bootstrap响应式前端框架笔记五——按钮
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> 效果如下：
可以为按钮元素添加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>效果如下图：
使用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>效果如下：
需要注意：当button标签被用户点击时，按钮周围会出现边框，如果不需要这个边框，可以使用a标签来创建按钮。
另外，本篇博客中所有的实例代码及显示效果，在如下地址中，需要的可以自行对照学习。
http://zyhshao.github.io/bootStrapDemo/button.html。
前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016/12/08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录