文档章节

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

珲少
 珲少
发布于 2016/12/10 12:22
字数 682
阅读 21
收藏 0
点赞 0
评论 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

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

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

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

珲少 ⋅ 2016/12/11 ⋅ 0

十大前端开发框架(上)

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

伯乐在线 ⋅ 2013/07/16 ⋅ 0

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

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

珲少 ⋅ 2016/12/08 ⋅ 0

Bootstrap响应式前端框架笔记十七——下拉列表交互

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

珲少 ⋅ 2016/12/27 ⋅ 0

Bootstrap响应式前端框架笔记十五——面板与井

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

珲少 ⋅ 2016/12/22 ⋅ 0

Bootstrap响应式前端框架笔记十四——媒体对象与列表组

Bootstrap响应式前端框架笔记十四——媒体对象与列表组 在移动开发中经常会使用到列表,使用媒体对象可以方便的创建列表中每一行元素,常规的媒体对象实例如下:

珲少 ⋅ 2016/12/20 ⋅ 0

十大前端开发框架(下)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:Site Point。欢迎加入翻译组。 在《十大前端开发框架(上)》中我们了解了跟Bootstrap相关的一系列前端开发框架,如果你对于Boo...

伯乐在线 ⋅ 2013/07/01 ⋅ 0

Bootstrap响应式前端框架笔记十二——巨幕与缩略图

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

珲少 ⋅ 2016/12/14 ⋅ 0

Bootstrap响应式前端框架笔记七——下拉菜单

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

珲少 ⋅ 2016/12/09 ⋅ 0

Bootstrap响应式前端框架笔记十三——警告框与进度条

Bootstrap响应式前端框架笔记十三——警告框与进度条 在Bootstrap中,使用alert相关类可以实现简洁的警告框控件,示例如下: 效果如下图所示: 警告框上面也可以添加有一个关闭按钮,示例如下...

珲少 ⋅ 2016/12/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

面试-JVM 内存结构

JVM 内存结构

秋日芒草 ⋅ 3分钟前 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 26分钟前 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 57分钟前 ⋅ 0

Spring JavaConfig 注解

JavaConfig注解允许开发者将Bean的定义和配置放在Java类中。它是除使用XML文件定义和配置Bean外的另一种方案。 配置: 如一个Bean如果在XML文件可以这样配置: <bean id="helloBean" class="...

霍淇滨 ⋅ 今天 ⋅ 0

Spring clound 组件

Spring Cloud技术应用从场景上可以分为两大类:润物无声类和独挑大梁类。 润物无声,融合在每个微服务中、依赖其它组件并为其提供服务。 Ribbon,客户端负载均衡,特性有区域亲和、重试机制。...

英雄有梦没死就别停 ⋅ 今天 ⋅ 0

Confluence 6 重新获得站点备份文件

Confluence 将会创建备份,同时压缩 XML 文件后存储熬你的 <home-directory>/backups> 目录中。你需要自己访问你安装的 Confluence 服务器,并且从服务器上获得这个文件。 运行从 Confluence...

honeymose ⋅ 今天 ⋅ 0

informix的常用SQL语句

1、创建数据库 eg1. 创建不记录日志的库testdb,参考语句如下: CREATE DATABASE testdb; eg2. 创建带缓冲式的记录日志的数据库testdb(SQL语句不一定在事务之中,拥有者名字不被用于对象的解...

wangxuwei ⋅ 今天 ⋅ 0

matplotlib画图

最简单的入门是从类 MATLAB API 开始,它被设计成兼容 MATLAB 绘图函数。 from pylab import *from numpy import *x = linspace(0, 5, 10)y = x ** 2figure()plot(x, y, 'r')...

Dr_hu ⋅ 今天 ⋅ 0

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 今天 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

小致dad ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部