Bootstrap响应式前端框架笔记五——按钮
博客专区 > 珲少 的博客 > 博客详情
Bootstrap响应式前端框架笔记五——按钮
珲少 发表于11个月前
Bootstrap响应式前端框架笔记五——按钮
  • 发表于 11个月前
  • 阅读 35
  • 收藏 0
  • 点赞 0
  • 评论 0
摘要: Bootstrap框架允许对button,a,input标签设置按钮样式。Bootstrap中预设了多种按钮Css样式,开发者可以通过对应类直接使用。

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

共有 人打赏支持
粉丝 773
博文 360
码字总数 408800
×
珲少
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: