文档章节

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

珲少
 珲少
发布于 2016/12/10 12:22
字数 682
阅读 26
收藏 0

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

    在Bootstrap定义的Css样式中,开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件,组合后的控件左右两侧的按钮将被圆角处理,示例代码如下:

		<p>正常的按钮组</p>
		<div class="btn-group">
			<button class="btn btn-default">左按钮</button>
			<button class="btn btn-danger">中心按钮</button>
			<button class="btn btn-primary">右按钮</button>
		</div>

效果如下:

    也可以将一组按钮组包裹在btn-toolbar类中,使其组合成为按钮组工具栏,示例如下:

		<p>按钮组工具栏</p>
		<div class="btn-toolbar">
			<div class="btn-group">
				<button class="btn btn-default">左按钮</button>
				<button class="btn btn-danger">中心按钮</button>
				<button class="btn btn-primary">右按钮</button>
			</div>
			<div class="btn-group">
				<button class="btn btn-default">左按钮</button>
				<button class="btn btn-primary">右按钮</button>
			</div>
			<div class="btn-group">
				<button class="btn btn-primary">独立按钮</button>
			</div>
		</div>

效果如下:

按钮组也可以进行嵌套,使用按钮组嵌套的方式也可以实现下拉菜单效果,示例如下:

		<div class="btn-group">
			<button class="btn btn-default">左按钮</button>
			<button class="btn btn-danger">中心按钮</button>
			<div class="btn-group">
				<button class="btn btn-info dropdown-toggle">菜单
				<span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a>金牛</a></li>
					<li><a>狮子</a></li>
				</ul>
			</div>
		</div>

效果如下:

    默认的按钮组是水平排列的,为其设置btn-group-vertical类可以将其设置为竖直排列的,示例如下:

		<p>竖直排列的按钮组</p>
		<div class="btn-group-vertical">
			<button class="btn btn-default">左按钮</button>
			<button class="btn btn-danger">中心按钮</button>
			<button class="btn btn-primary">右按钮</button>
		</div>

效果如下:

    如果需要使按钮组填充其父容器,需要设置btn-group-justified类,并且使用a标签作为按钮,示例如下:

		<p>设置按钮组宽度充满父容器</p>
		<div class="btn-group btn-group-justified">
			<a class="btn btn-default">左按钮</a>
			<a class="btn btn-danger">中心按钮</a>
			<a class="btn btn-primary">右按钮</a>
		</div>

效果如下:

    通过按钮组,可以十分方便的实现分裂式下拉菜单,示例如下:

		<p>分裂式下拉菜单</p>
		<div class="btn-group">
			<button type="button" class="btn btn-danger">金牛</button>
			<button type="button" class="btn btn-danger dropdown-toggle">
    			<span class="caret"></span>
    			</button>
			<ul class="dropdown-menu">
				<li>
					<a href="#">金牛</a>
				</li>
				<li>
					<a href="#">狮子</a>
				</li>
				<li>
					<a href="#">摩羯</a>
				</li>
				<li class="divider"></li>
				<li>
					<a href="#">无</a>
				</li>
			</ul>
		</div>

效果如下:

   另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/buttonGroup.html

前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 842
博文 376
码字总数 441694
作品 0
上海
iOS工程师
Bootstrap响应式前端框架笔记九——输入框组

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

珲少
2016/12/11
130
0
十大前端开发框架(上)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:site point。欢迎加入翻译组。 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部...

伯乐在线
2013/07/16
0
0
Bootstrap响应式前端框架笔记五——按钮

Bootstrap响应式前端框架笔记五——按钮 Bootstrap中预设了default,primary,info,warning,danger和link6种按钮风格,示例如下: 效果如下: 可以为按钮元素添加btn-lg,btn-sm,btn-xs类...

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

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

珲少
2016/12/27
101
0
Bootstrap响应式前端框架笔记十五——面板与井

Bootstrap响应式前端框架笔记十五——面板与井 Bootstrap中的面板由pannel相关类来创建,一个完整的面板分为面板头部、面板体和面板注脚,并且Bootstrap中默认定义了一些面板风格,示例如下:...

珲少
2016/12/22
22
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

C++ gflags

###定义参数 gflags主要支持的参数类型包括bool,int32, int64, uint64, double, string等,定义参数通过DEFINE_type宏实现, 该宏的三个参数含义分别为命令行参数名,参数默认值,以及参数的...

SibylY
19分钟前
0
0
intellij IDEA Properties中文unicode转码问题

在IDEA中创建了properties文件,发现默认中文不会自动进行unicode转码。如下 在project settings - File Encoding,在标红的选项上打上勾,确定即可 效果图如下: unicode转码后效果...

muzi1994
20分钟前
0
0
Java IO类库之PipedWriter

一、PipedWriter介绍 PipedWriter是字符管道输出流,继承自Writer,功能与PipedOutputStream类似,通过与PipedReader组合使用实现类似管道的功能,在多线程环境下,一个线程使用PipedWriter...

老韭菜
24分钟前
0
0
精简分页组件(手写)

需要引入CSS(没错就是这4行) .pagelist { text-align: center; color: #666; width: 100%; clear: both; margin: 20px 0; padding-top: 20px }.pagelist a { color: #666; margin: 0 2px;......

AK灬
25分钟前
3
0
29 岁成为阿里巴巴 P8,工作前 5 年完成晋升 3 连跳,他如何做到?

泡泡是我的好朋友。今年 31 岁,毕业后就进了阿里巴巴,工作五年内从 P4 晋升至 P6、P7、P8。 和他很少聊到工作,但总觉得他有很棒的职场心得,应该分享出来,于是有了这次采访。希望对职场新...

Java填坑之路
27分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部