文档章节

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

珲少
 珲少
发布于 2016/12/08 10:42
字数 424
阅读 45
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 852
博文 384
码字总数 452377
作品 0
上海
iOS工程师
私信 提问
Bootstrap响应式前端框架笔记八——按钮组

Bootstrap响应式前端框架笔记八——按钮组 在Bootstrap定义的Css样式中,开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件,组合后的控件左右两侧的按钮将被圆角处理,示例代...

珲少
2016/12/10
19
0
Bootstrap响应式前端框架笔记十七——下拉列表交互

Bootstrap响应式前端框架笔记十七——下拉列表交互 为dropdown-toggle类添加data-toggle="dropdown"属性可以实现其下拉列表功能的绑定,示例如下: 点击此按钮后,可以自动实现下拉列表的显示...

珲少
2016/12/27
101
0
Bootstrap响应式前端框架笔记九——输入框组

Bootstrap响应式前端框架笔记九——输入框组 将input标签与input-group-addon类组合使用可以为输入框添加前后挂件,需要注意,Bootstrap不支持在输入框控件一侧添加多个挂件,示例如下: 效果...

珲少
2016/12/11
130
0
Bootstrap响应式前端框架笔记十二——巨幕与缩略图

Bootstrap响应式前端框架笔记十二——巨幕与缩略图 巨幕用于创建一块区域,此区域可以用来展示网页页头或者需要重点提示的地方,使用jumbotron类来创建巨幕,示例如下: 效果如下: 除了使用...

珲少
2016/12/14
232
0
Bootstrap响应式前端框架笔记七——下拉菜单

Bootstrap响应式前端框架笔记七——下拉菜单 在Bootstrap的Css框架中,下拉菜单属于组件。一个完整的下拉菜单应该有两部分组成,一个触发按钮与一个选项列表。触发按钮dropdown-toggle类来创...

珲少
2016/12/09
52
0

没有更多内容

加载失败,请刷新页面

加载更多

数据集可视化---张量场的可视表示

中国龙-扬科
21分钟前
1
0
JavaScript创建对象方法实例小结

本文实例讲述了JavaScript创建对象方法。分享给大家供大家参考,具体如下: 最简单的方式就是创建一个Object对象,并为其添加属性和方法。 //示例代码var person=new Object()person.name=...

peakedness丶
23分钟前
1
0
GO 读写锁实现原理剖析

前言 TODO:简单说明读写锁用法及规则。 读写锁数据结构 类型定义 TODO: 源码中数据结构 TODO:讲解每个成员作用 接口定义 获取写锁 释放写锁 获取读锁 释放读锁 场景分析 写锁阻止写锁 TODO...

恋恋美食
27分钟前
1
0
Java核心(二)深入理解线程池ThreadPool

本文你将获得以下信息: 线程池源码解读 线程池执行流程分析 带返回值的线程池实现 延迟线程池实现 为了方便读者理解,本文会由浅入深,先从线程池的使用开始再延伸到源码解读和源码分析等高...

王磊的博客
28分钟前
3
0
web项目中的乱码问题原理分析

Java web开发过程经常遇到乱码,本篇我们探讨一下乱码产生的原因与解决思路。 一次完整的Web请求会有4次编解码转换,如下所示。 第一次:客户端(通常为浏览器)将字符转换成TCP字节流发向服...

fame_yao
32分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部