一些关于表单控件的归纳

<div class="container">
  <h2>表单控件: textarea</h2>
  <p>以下实例演示了 textarea 的样式。</p>
  <form>
    <div class="form-group">
      <label for="comment">评论:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
  </form>

</div>

Bootstrap 复选框(checkbox)

<div class="container">

  <h2>表单控件: checkbox</h2>
  <p>以下实例包含了三个选项。最后一个是禁用的：</p>
  <form>
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">Option 1
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">Option 2
      </label>
    </div>
    <div class="form-check disabled">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="" disabled>Option 3
      </label>
    </div>
  </form>

</div>

使用 .form-check-inline 类可以让选项显示在同一行上

单选框

<div class="container">

  <h2>表单控件: radio</h2>
  <p>以下实例包含了三个选项。最后一个是禁用的：</p>
  <form>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 2</label>
    </div>
    <div class="radio disabled">
      <label><input type="radio" name="optradio" disabled>Option 3</label>
    </div>
  </form>

</div>

下拉菜单

<div class="container">
  <h2>表单控件: select</h2>
  <p>以下表单包含了两个下拉菜单 (select 列表):</p>
  <form>
    <div class="form-group">
      <label for="sel1">单选下拉菜单:</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>
      <label for="sel2">多选下拉菜单(按住 shift 键，可以选取多个选项):</label>
      <select multiple class="form-control" id="sel2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
  </form>

</div>