文档章节

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

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 844
博文 380
码字总数 447278
作品 0
上海
iOS工程师
Bootstrap响应式前端框架笔记十七——下拉列表交互

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

珲少
2016/12/27
101
0
Bootstrap响应式前端框架笔记八——按钮组

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

珲少
2016/12/10
19
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

没有更多内容

加载失败,请刷新页面

加载更多

window.parent,top,window.self,parent,opener

在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。 wind...

inidcard
1分钟前
1
0
Linux下Redis的安装和部署

一、Redis介绍 Redis是当前比较热门的NOSQL系统之一 它是一个key-value存储系统。和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多,包括string、list、set...

曾大大胖
5分钟前
1
0
开源堡垒机jumpserver搭建

概述 之前说了国产良心kodexplorer,今天再说一个国内比较好的开源项目jumpserver,除此之外还可以的国内开源项目我觉得就是宝塔面板了。废话不多说上教程搭建。 虽然说你可以看下面的教程不...

bboysoulcn
10分钟前
1
0
iPhoneX 底部距离

iPhoneX 底部距离 CGFloat adjust = 0; if (@available(iOS 11.0, *)) { //Account for possible notch UIEdgeInsets safeArea = [[UIApplication sharedApplication] keyWindow].safeAreaIn......

壹峰
14分钟前
2
0
养生篇01 (饭水分离法)

作者简介❤李祥文,1939年出生于韩国庆尚北道尚州市成昌邑。 24岁时,偶遇奇人习得这种分别喝水吃饭的养生方法,从而治好了自己的胃病和哮喘。从此,李祥文对饮食之于人体的影响产生了极大的...

十九亿少女的梦
30分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部