Form表单

1. 标题(四个字及以下)、暗提示

   <div class="bx-cell">
   <div class="bx-cell-inner">
    <div class="bx-cell-label">标题</div>
    <div class="bx-cell-input">
      <input type="text" placeholder="暗提示内容"/>
    </div>
   </div>
   </div>
   

2. 标题(四个字以上下)、暗提示

<div class="bx-cell">
  <div class="bx-cell-inner">
    <div class="bx-cell-label bx-cell-label--lg">标题标题标</div>
    <div class="bx-cell-input">
      <input type="text" placeholder="暗提示内容"/>
    </div>
  </div>
</div>

1. 右侧图标、图片、按钮

<div class="bx-cell">
  <div class="bx-cell-inner">
    <div class="bx-cell-label">标题</div>
    <div class="bx-cell-input">
      <input type="text" placeholder="暗提示内容"/>
    </div>
    <div class="bx-cell-extra">
      <i class="bx-icon bx-icon-arrows-right"></i>
    </div>
  </div>
</div>

1. 标题展开、折叠

<div class="bx-accordion-cells bx-accordion-active">
  <div class="bx-accordion-header">
    <div class="bx-cell">
      <div class="bx-cell-inner">
        <div class="bx-cell-title">标题文字</div>
        <div class="bx-cell-extra">
          <i class="bx-icon"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="bx-accordion-body">
    <div class="bx-cell">
      <div class="bx-cell-inner">
        <div class="bx-cell-title">标题文字</div>
        <div class="bx-cell-extra">
          <i class="bx-icon bx-icon-arrows-right"></i>
        </div>
      </div>
    </div>
    <div class="bx-cell">
      <div class="bx-cell-inner">
        <div class="bx-cell-title">标题文字</div>
      </div>
    </div>
    <div class="bx-cell">
      <div class="bx-cell-inner">
        <div class="bx-cell-title">标题文字</div>
      </div>
    </div>
  </div>
</div>

1. 单项选择

<div class="bx-radio-cells">
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-radio">
        <input type="radio" class="bx-cell-input" name="radio-cells"/>
        <i class="bx-icon bx-icon-choose-none-line"></i>
      </div>
      <div class="bx-cell-title">单项选择</div>
    </label>
  </div>
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-radio">
        <input type="radio" class="bx-cell-input" name="radio-cells"/>
        <i class="bx-icon bx-icon-choose-none-line"></i>
      </div>
      <div class="bx-cell-title">单项选择</div>
    </label>
  </div>
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-radio">
        <input type="radio" class="bx-cell-input" name="radio-cells"/>
        <i class="bx-icon bx-icon-choose-none-line"></i>
      </div>
      <div class="bx-cell-title">单项选择</div>
    </label>
  </div>
</div>

1. 多项选择

<div class="bx-checkbox-cells">
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-checkbox">
        <input type="checkbox" class="bx-cell-input" name="checkbox-cells"/>
        <i class="bx-icon"></i>
      </div>
      <div class="bx-cell-title">多项选择</div>
    </label>
  </div>
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-checkbox">
        <input type="checkbox" class="bx-cell-input" name="checkbox-cells"/>
        <i class="bx-icon"></i>
      </div>
      <div class="bx-cell-title">多项选择</div>
    </label>
  </div>
  <div class="bx-cell">
    <label class="bx-cell-inner">
      <div class="bx-cell-checkbox">
        <input type="checkbox" class="bx-cell-input" name="checkbox-cells"/>
        <i class="bx-icon"></i>
      </div>
      <div class="bx-cell-title">多项选择</div>
    </label>
  </div>
</div>

1. 带开关

<div class="bx-cell">
  <div class="bx-cell-inner">
    <div class="bx-cell-title">开启(left)</div>
    <div class="bx-cell-extra">
      <input type="checkbox" class="bx-switch" checked="checked"/>
    </div>
  </div>
</div>

1. 数量

<div class="bx-cell">
  <div class="bx-cell-inner">
    <div class="bx-cell-title">数量>1</div>
    <div class="bx-cell-extra">
      <div class="bx-number-control">
        <div class="bx-number-minus"></div>
        <input type="text" class="bx-number-input" value="1"/>
        <div class="bx-number-plus"></div>
      </div>
    </div>
  </div>
</div>