Bootstrap 基础CSS - 表单（Forms）

样式

名称	类	描述
垂直式 (默认)	.form-vertical (非必填，默认)	堆叠式的，所有控件的标签文字都左对齐
行式	.form-inline	标签文字左对齐，控件以inline-block紧凑形式存在
搜索式	.form-search	经典的搜索美化方案，对文本框进行圆化
水平式	.form-horizontal	左浮动，标签与其对应的控件居于同一行，标签文字右对齐

支持的表单控件

Inputs

<input type="text" placeholder="Text input">

Textarea

<textarea rows="3"></textarea>

Checkboxes and radios

<label class="checkbox">
  <input type="checkbox" name="optionCheckbox" value="sure">
  Option one is this and that—be sure to include why it's great
</label>
 
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

向<label>添加.inline可以使它们放在一行里。

<label class="checkbox inline">
  <input type="checkbox" name="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
  <input type="checkbox" name="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
  <input type="checkbox" name="inlineCheckbox3" value="option3"> 3
</label>

Selects

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
 
<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

扩展表单控件

前置&后置输入框

使用文本：

<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>

也可使用按钮：

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>

下拉按钮：

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

分割的下拉按钮：

<form>
  <div class="input-prepend">
    <div class="btn-group">...</div>
    <input type="text">
  </div>
  <div class="input-append">
    <input type="text">
    <div class="btn-group">...</div>
  </div>
</form>

搜索框：

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">Search</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">Search</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

控制大小

向<input>或者<textarea>元素添加.input-block-level使之表现为块级元素。

<input class="input-block-level" type="text" placeholder=".input-block-level">

可以给<input>指定以下类来控制大小。

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

也可以使用.span1到.span12来控制大小。

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
  ...
</select>
<select class="span2">
  ...
</select>
<select class="span3">
  ...
</select>

使用.controls-row使多个<input>在一行内。

<div class="controls">
  <input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span1" type="text" placeholder=".span1">
</div>

表现不可编辑的输入框时，不必使用真正的表单标签。

<span class="input-xlarge uneditable-input">Some value here</span>

表单操作

在表单末尾处，放置一组操作（按钮）。

<div class="form-actions">
  <button type="submit" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn">Cancel</button>
</div>

帮助文本

行内帮助文本

<input type="text"><span class="help-inline">Inline help text</span>

块级帮助文本

<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>