按钮组

默认按钮组

多个按钮的组合，激活按钮状态可加.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>