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>