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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-1-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读