前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >bootstrap按钮

bootstrap按钮

作者头像
十月梦想
发布2018-08-29 10:59:16
1.5K0
发布2018-08-29 10:59:16
举报
文章被收录于专栏:十月梦想

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

代码使用如下:

代码语言:javascript
复制
<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),这样使得按钮变为块元素,独占一行.

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

代码语言:javascript
复制
<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)等状态

代码语言:javascript
复制
<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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档