按钮组
框架用.button-group
样式,将多个.button
按钮组合在一起形成按钮组。
默认按钮组
多个按钮的组合,激活按钮状态可加.active
样式。
<div class="button-group"> <button class="button">按钮</button> <button class="button active">按钮</button> <button class="button">按钮</button> </div>
按钮工具栏
多个按钮组排列,可组成按钮工具栏,可用于分页,编辑器等。
<div class="button-group"> <button class="button">按钮</button> </div> <div class="button-group"> <button class="button">按钮</button> <button class="button">按钮</button> </div> <div class="button-group"> <button class="button">按钮</button> <button class="button active">按钮</button> <button class="button">按钮</button> </div>
纵向按钮组
在按纽组的基础上,叠加样式.button-group-y
样式,可使按钮组样式纵向显示。
<div class="button-group button-group-y"> <button class="button">按钮</button> <button class="button active">按钮</button> <button class="button">按钮</button> </div>
按钮组颜色
可使用颜色的文本色、边框色、背景色对按钮组的颜色做调整。
文本色
给按钮加上.text
-颜色,可改变按钮的文本色:
<div class="button-group"> <button class="button text-main">按钮</button> <button class="button text-main active">按钮</button> <button class="button text-main">按钮</button> </div>
边框色
给按钮加上.border
-颜色,可同时改变按钮的边框色和文本色:
<div class="button-group"> <button class="button border-main">按钮</button> <button class="button border-main active">按钮</button> <button class="button border-main">按钮</button> </div>
背景色
给按钮加上.bg
-颜色,可同时改变按钮的边框色和文本色:
<div class="button-group"> <button class="button bg-main">按钮</button> <button class="button bg-main active">按钮</button> <button class="button bg-main">按钮</button> </div>
按钮组尺寸
给按钮添加.button
-尺寸样式,尺寸包含mini
、small
、big
、large
;可改变按钮组尺寸大小。
<div class="button-group"> <button class="button button-big">按钮</button> <button class="button button-big active">按钮</button> <button class="button button-big">按钮</button> </div>
文字字号
同样,也可以通过改变文字字号大小来改变按钮组尺寸大小,样式为.size
-尺寸,尺寸包含mini
、small
、big
、large
:
<div class="button-group size-small"> <button class="button bg-sub">按钮</button> <button class="button bg-sub active">按钮</button> <button class="button bg-sub">按钮</button> </div>