controls.html

---
layout: default
title: 控件
slug: controls
lead: "基本控件设计."
base_url: "./"
---

<section id="buttons" class="page-section">
  <div class="page-header">
    <h2>按钮</h2>
  </div>
  <p>按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。</p>
  <h3>按钮的类型</h3>
  <p>按钮根据表现形式有如下类型：</p>
  <table class="table">
    <tr>
      <th class="col-md-4">按钮</th>
      <th>描述</th>
    </tr>
    <tr>
      <td><button class="btn btn-primary">主要按钮</button></td>
      <td>指示用户完成当前页面主要操作，例如提交表单，搜索，确认选择等。通常在一个页面里面仅包含一个主要按钮。</td>
    </tr>
    <tr>
      <td><button class="btn btn-default">标准按钮</button></td>
      <td>页面上的普通按钮，例如取消表单、重置输入等。</td>
    </tr>
    <tr>
      <td><button class="btn btn-link">链接按钮</button></td>
      <td>链接按钮的外观和超链接一样，所不同的是用户点击时不是导向超链接指示的地址，而是触发一个操作。链接按钮通常用于页面上的次要操作，例如取消表单。</td>
    </tr>
    <tr>
      <td>
        <div class="btn-group">
          <button class="btn btn-default">按钮组</button>
          <button class="btn btn-default">第二个</button>
          <button class="btn btn-default">第三个</button>
        </div>
      </td>
      <td>按钮组能够将相关的按钮并排展示，并且紧密相邻体现某些共同之处。通常会使用图标来代替按钮上的文字。</td>
    </tr>
  </table>
  <h3>按钮的大小</h3>
  <table class="table">
    <tr>
      <th class="col-md-6">实例</th>
      <th>描述</th>
    </tr>
    <tr>
      <td>
        <button class="btn btn-large btn-primary" type="button">较大的按钮</button>
        <button class="btn btn-large" type="button">较大的按钮</button>
      </td>
      <td>较大的按钮，通常用在英雄页面或者大屏幕中。</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-primary" type="button">默认大小</button>
        <button class="btn btn-default" type="button">默认大小</button>
      </td>
      <td>默认大小</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-small btn-primary" type="button">较小的按钮</button>
        <button class="btn btn-small" type="button">较小的按钮</button>
      </td>
      <td>较小的按钮</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-mini btn-primary" type="button">迷你按钮</button>
        <button class="btn btn-mini" type="button">迷你按钮</button>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-large btn-block btn-primary" type="button">块状按钮</button>
        <button class="btn btn-large btn-block btn-default" type="button">块状按钮</button>
      </td>
      <td>块状按钮会占据整个水平宽度，适合较窄面板中的重要操作。</td>
    </tr>
  </table>
  <h3>按钮的不同状态</h3>
  <table class="table">
    <tr>
      <th class="col-md-4">实例</th>
      <th>描述</th>
    </tr>
    <tr>
      <td>
        <button class="btn btn-default"><i class="icon-edit"></i> 带图标的按钮</button>
      </td>
      <td>在按钮上使用图标有时能起到点睛之笔的效果。</td>
    </tr>
    <tr>
      <td>
        <button type="button" class="btn btn-primary active" data-toggle="button">状态切换按钮</button>
      </td>
      <td>
        状态切换按钮提供一个类似复选框的机制，当点击后切换为选中状态，再次点击取消选中状态。
      </td>
    </tr>
    <tr>
      <td>
        <div class="btn-group" data-toggle="buttons-checkbox">
          <button type="button" class="btn btn-default">Left</button>
          <button type="button" class="btn btn-default">Middle</button>
          <button type="button" class="btn btn-default">Right</button>
        </div>
      </td>
      <td>当多个状态切换按钮组成一个按钮组时也就组成了一个状态切换组。其机制同于表单中的多项选择控件（复选框）。</td>
    </tr>
    <tr>
      <td>
        <div class="btn-group" data-toggle="buttons-radio">
          <button type="button" class="btn btn-default">Left</button>
          <button type="button" class="btn btn-default">Middle</button>
          <button type="button" class="btn btn-default">Right</button>
        </div>
      </td>
      <td>当同一组中的状态切换按钮设置为仅允许有一个按钮为选中状态则组成一个互斥的状态切换组。其机制同于表单中的单项选择控件。</td>
    </tr>
    <tr>
      <td>
        <div class="btn-group" data-toggle="buttons-radio">
          <button type="button" class="btn btn-default"><i class="icon-align-left"></i></button>
          <button type="button" class="btn btn-default"><i class="icon-align-center"></i></button>
          <button type="button" class="btn btn-default"><i class="icon-align-right"></i></button>
        </div>
      </td>
      <td>在互斥的状态切换组中使用图标更加简洁明了。</td>
    </tr>
    <tr>
      <td>
        <button type="button" class="btn btn-primary" data-loading-text="正在加载...">加载状态</button>
      </td>
      <td>当一个操作需要花费一定时间时，使用加载按钮会在用户触发后按钮文本更换"正在加载"，直至操作完成。</td>
    </tr>
    <tr>
      <td>
        <a href="#" class="btn btn-primary disabled">已禁用的操作</a>
        <a href="#" class="btn disabled">禁用的操作</a>
      </td>
      <td>当按钮指代的操作在某些情景下不可用时这时就要给按钮切换到禁用状态，让用户知道按钮不可点击。</td>
    </tr>
  </table>
  <h3>按钮的颜色</h3>
  <p>按钮的颜色赋予按钮以感情色彩能够在视觉上首当其冲的体现按钮的功能意向。例如重要按钮和标准按钮的颜色不同而体现其重要程度。使用更多的颜色来使得目的更加明确，与用户期望一致。</p>
  <table class="table">
    <tr>
      <th class="col-md-3">实例</th>
      <th>描述</th>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-default">默认</button></td>
      <td>带渐变的标准灰色按钮</td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-primary">主要</button></td>
      <td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-info">信息</button></td>
      <td>默认样式的替代样式</td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-success">成功</button></td>
      <td>表示成功或积极的动作</td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-warning">警告</button></td>
      <td>提醒应该谨慎采取这个动作</td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-danger">危险</button></td>
      <td>表示这个动作危险或存在危险</td>
    </tr>
    <tr>
      <td><button type="button" class="btn btn-inverse">反向</button></td>
      <td>备用的暗灰色按钮，不依赖于语义和用途</td>
    </tr>
  </table>
</section>

<section id='progressBars' class="page-section">
  <div class="page-header"><h1 id="progress">进度条</h1></div>
  <p class="lead">提供工作或动作的实时反馈，只用简单且灵活的进度条。</p>
  <p>进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。 </p>

  <h3>类型</h3>
  <h4>基本类型</h4>
  <table class="table col-md-12" style='text-align:center'>
    <tr>
      <th width='40%'>进度条</th>
      <th>描述</th>
    </tr>
    <tr>
      <td>
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
          </div>
        </div>
      </td>
      <td>默认的进度条</td>
    </tr>
  </table>

  <h3>变化</h3>
  <h4>颜色</h4>
  <p>为了一致的样式，进度条颜色使用与按钮相同的类。</p>
  <table class="table col-md-12"  style='text-align:center'>
    <tr>
      <th width='40%'>进度条</th>
      <th>描述</th>
    </tr>
    <tr>
      <td>
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
          </div>
        </div>
      </td>
      <td>主要/默认</td>
    </tr>
    <tr>
      <td>
        <div class="progress">
          <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
          </div>
        </div>
      </td>
      <td>信息</td>
    </tr>
    <tr>
      <td>
        <div class="progress">
          <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
          </div>
        </div>
      </td>
      <td>成功</td>
    </tr>
    <tr>
      <td>
        <div class="progress">
          <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
            <span class="sr-only">60% Complete (warning)</span>
          </div>
        </div>
      </td>
      <td>警告</td>
    </tr>
    <tr>
      <td>
        <div class="progress">
          <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
          <span class="sr-only">80% Complete (danger)</span>
        </div>
      </td>
      <td>危险</td>
    </tr>
    <tr>
      <td>
        <div class="progress">
          <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
          </div>
        </div>
      </td>
      <td>成功</td>
    </tr>
  </table>

  <h4>效果</h4>
  <p>用一个渐变可以创建条纹效果，在IE8中不可用。</p>
  <table class="table col-md-12" style='text-align:center'>
    <tr>
      <th width='40%'>进度条</th>
      <th>描述</th>
    </tr>
    <tr>
      <td>
        <div class="progress progress-striped" >
          <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
          </div>
        </div>
      </td>
      <td>条纹效果</td>
    </tr>
    <tr>
      <td>
        <div class="progress progress-striped active">
          <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
            <span class="sr-only">45% Complete</span>
          </div>
        </div>
      </td>
      <td><p>运动效果。给<code>.progress-striped</code>加上<code>.active</code>使它由右向左运动。在IE的所有版本不可用。</p></td>
    </tr>
    <tr>
      <td>
        <div class="progress">
          <div class="progress-bar progress-bar-success" style="width: 35%">
            <span class="sr-only">35% Complete (success)</span>
          </div>
          <div class="progress-bar progress-bar-warning" style="width: 20%">
            <span class="sr-only">20% Complete (warning)</span>
          </div>
          <div class="progress-bar progress-bar-danger" style="width: 10%">
            <span class="sr-only">10% Complete (danger)</span>
          </div>
        </div>
      </td>
      <td><p>堆叠效果。把多个进度条放入同一个<code>.progress</code>，使它们堆叠。</p></td>
    </tr>
  </table>
</section>