• 使用前缀类 .btn 和叠加类 .default / primary / secondary / thirdly / disabled / links 可以快速创建一个带有预定义样式的按钮，适应用户体验场景，如 class="btn primary"。
• 为按钮添加不同的颜色只是一种视觉上的信息表达方式，但是，对于使用辅助技术 -- 例如屏幕阅读器 -- 的用户来说，颜色是不可见的。建议，确保通过颜色表达的信息或者通过内容自身表达出来（按钮上的文字），或者通过其他方式；
  BrickPlus 项目暂时候还没有作出对使用屏幕阅读器的用户的需求处理。
• 跨浏览器兼容性，如果为 <button> 元素添加 disabled 属性或叠加类 .disabled，Internet Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有恶心的阴影，目前还没有解决办法；
  <a> 元素的 class="btn links" 样式并不支持 [disabled] / .disabled。

                    
<button type="button" class="btn ( default / primary / secondary / thirdly / disabled / links )">...</button>
<button type="button" class="btn ( default / primary / secondary / thirdly ) current">...</button>
                     
                

典型尺寸类型

• BrickPlus 提供了四种不同的按钮尺寸，以备适应不同的特殊设计，其中三种非常规尺寸需通过叠加类 .large-btn / .small-btn / .smaller-btn 展示。

                    
<button type="button" class="btn default ( large-btn / small-btn / smaller-btn )">...</button>
                     
                

块化按钮

• 叠加类 .block-btn 可以将其拉伸至父元素 100% 的宽度，而且按钮也变为了块级 block 元素。
• <a> 元素构成的按钮，在使用叠加类 .links 之后，并不支持再套用 .block-btn 叠加类。

                    
<button type="button" class="btn ( default / primary / secondary / thirdly / disabled ) block-btn">...</button>
                     
                

典型行内排版

• 当需要作出多个按钮并行的页面排版时，需要包裹这些按钮的元素中引用 .plural-btns 工具类，使这些按钮有统一的间隔样式；
  按钮的行内排列，由工具类 .text-align-( left / right / center ) 在其最近的父结构样式中控制。
• 当行内排列为左对齐时，父层样式引用可以省略 .text-align-left。
• BrickPlus 工具类 .text-align-justify 并不支持典型行内排列的组合。

                    
<div class="text-align-( left / center / right ) plural-btns">...</div>
                     
                

特殊行内排版

• 当一个或者多个按钮或按钮组需要在父结构中居中，然后再附加一个超链接，但超链接并不占用父结构宽度，则需要在父亲结构中加入 .btn-with-viceLink 样式；
  父结构中用作附加超链接的 <a> 元素加入 .btn-vicelink 样式。
• 典型的按钮样式 class="btn links" 和这里展示的类 class="btn-vicelink" 两者完全不一样，别搞错。
• 特殊排版对 Dom 树的结构和样式引用都有一定的要求，详细请参考代码演示。

                    
<div class="text-align-center">
    <div class="btn-with-viceLink text-align-center ( plural-btns )">
        ...
        <a href="..." class="btn-vicelink">...</a>
    </div>
</div>
                     
                

典型按钮组

• 将多个 .btn 系列的元素放在 .btn-group-box 中，得到一个样式意义上的按钮组。
• 多个 .btn-group-box 和 .btn 的行内排版方法是一样的，因此可以很方便的组合按钮组和按钮，做成有用的组件。

                        
<div class="btn-group-box">
    <button type="button" class="btn default">...</button>
    ...
</div>


<div class="plural-btns text-align-( left / center / right)">
    <div class="btn-group-box">
        <button type="button" class="btn default">...</button>
        ...
    </div>
    <button type="button" class="btn default">...</button>
</div>
                        
                    

按钮组的尺寸

• 按钮组的尺寸类通过继承按钮的尺寸样式得到和同样的四种尺寸，
  其中三种非常规尺寸需要通过工具类 ( large / small / smaller )-btn-gb 展示。
• 这里需要注意的是，按钮组和按钮的尺寸类不同点在于，按钮组的尺寸类作为工具类存在，即使放在按钮组元素的父层也能起效，并且影响父层内的所有按钮组和按钮系列，
  而按钮的尺寸类则作为单独按钮样式的叠加样式使用，并不能影响其他同类。

                        
<div class="btn-group-box ( large / small / smaller )-btn-gb">
    <button type="button" class="btn default">...</button>
    ...
</div>


<div class="plural-btns text-align-( left / center / right) ( large / small / smaller )-btn-gb">
    <div class="btn-group-box">
        <button type="button" class="btn default">...</button>
        ...
    </div>
    <button type="button" class="btn default">...</button>
</div>
                        
                    

按钮组的排版

• BrickPlus 按钮组的排版分为三种：水平排列（典型的按钮组），垂直排列（.vertical-btn-gb），两端对齐排列（.justified-btn-gb）。
• 和按钮组的尺寸类不同，排版类是叠加类，只能应用于一个按钮组。
• 为了将 <button> 元素用于两端对齐的按钮组中，必须将每个 .btn 系列的 <button> 包裹进一个 .btn-group-box 中。

            
<div class="btn-group-box vertical-btn-gb">
    <button type="button" class="btn default">...</button>
    ...
</div>


<div class="btn-group-box justified-btn-gb">
    <a role="button" href="..." class="btn default">...</a>
    ...
</div>


<div class="btn-group-box justified-btn-gb">
    <div class="btn-group-box">
        <button type="button" class="btn default">...</button>
    </div>
    ...
</div>
            
          

单按钮下拉菜单

• 把任意一个叠加有 .dropdown-menu-btn类的 .btn 放入 .btn-group-box 中，然后加入 BrickPlus 的 .dropdown-menu 下拉菜单结构，就可以让按钮作为菜单的触发器了。
• 同样是基于 .btn 的组件样式，所以任何作用于的按钮样式系列的工具类，对按钮式下拉菜单同样起效。

            
<div class="btn-group-box">
  <button type="button" class="btn default dropdown-menu-btn">...</button>
  <ul class="dropdown-menu">
    <li>
      <a href="#">
        ...
      </a>
    </li>
    ...
  </ul>
</div>
            
          

分裂式按钮下拉菜单

• 分裂式下拉菜单按钮很简单，在 .btn-group-box 中包裹两个 .btn，在你需要作为下拉菜单开关的按钮上叠加 .dropdown-menu-btn。
• 在同一层 .btn-group-box 下，BrickPlus 并不支持并列多个 .dropdown-menu-btn。
• 分裂式下拉菜单按钮中的 .dropdown-menu-btn 不建议出现文本内容，BrickPlus 没有预先定义出现文本时候的按钮内补距离，请自行用内补工具类重置，例如 .fn-p*-**；
  或将分裂式下拉菜单按钮拆分为两个单按钮下拉菜单，当然别忘了给他们的父层引用 .plural-btns，告诉浏览器这里面有多个 .btn-group-box。
• 当你需要用到分裂式下拉菜单按钮的时候，.dropdown-menu-btn 请不要引用到 第一个 .btn 当中，这样的情况 BrickPlus 并没有作出处理。
• 同样是基于 .btn 的组件样式，所以任何作用于的按钮样式系列的工具类，对按钮式下拉菜单同样起效。

            
<div class="btn-group-box">
  <button type="button" class="btn default">...</button>
  <button type="button" class="btn default dropdown-menu-btn"></button>
  <ul class="dropdown-menu">
    <li>
      <a href="#">
        ...
      </a>
    </li>
    ...
  </ul>
</div>
            
          

向上弹出式菜单

• 在 .dropdown-menu-btn 外的一层 .btn-group-box 中引用 .dropup 类，能使触发的下拉菜单朝上方打开。

            
<div class="btn-group-box dropup">
  ...
</div>
            
          

在按钮组中嵌套

• 把包裹 .dropdown-menu-btn 的那组 .btn-group-box 结构正题看作一个 .btn，然后在上一层再包裹 .btn-group-box。
• 通过 .plural-btns 能和多个按钮的排版一样，对多个 .btn-group-box 进行有条理的排版，从而得到更好的用户体验。
• 分裂式按钮下拉菜单组合不能嵌套在 .vertical-btn-gb 和 .justified-btn-gb 之中。

            
<div class="plural-btns">
  <div class="btn-group-box">
  </div>
  ...
</div>