Bootstrap 輸入框組

本章将講解 Bootstrap 支援的另一個特性，輸入框組。輸入框組擴充自 表單控件。使用輸入框組，您可以很容易地向基于文本的輸入框添加作為字首和字尾的文本或按鈕。

通過向輸入域添加字首和字尾的内容，您可以向使用者輸入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 使用者名前添加 @，或者應用程式接口所需要的其他公共的元素。

向 <b>.form-control</b> 添加字首或字尾元素的步驟如下：

把字首或字尾元素放在一個帶有 class <b>.input-group</b> 的 &lt;div&gt; 中。

接着，在相同的 &lt;div&gt; 内，在 class 為 <b>.input-group-addon</b> 的 &lt;span&gt; 内放置額外的内容。

把該 &lt;span&gt; 放置在 &lt;input&gt; 元素的前面或者後面。

為了保持跨浏覽器的相容性，請避免使用 &lt;select&gt; 元素，因為它們在 WebKit 浏覽器中不能完全渲染出效果。也不要直接向表單組應用輸入框組的 class，輸入框組是一個孤立的元件。

下面的執行個體示範了基本的輸入框組：

&lt;div style="padding: 100px 100px 10px;"&gt;

&lt;form class="bs-example bs-example-form" role="form"&gt;

&lt;div class="input-group"&gt;

&lt;span class="input-group-addon"&gt;@&lt;/span&gt;

&lt;input type="text" class="form-control" placeholder="twitterhandle"&gt;

&lt;/div&gt;

&lt;br&gt;

&lt;input type="text" class="form-control"&gt;

&lt;span class="input-group-addon"&gt;.00&lt;/span&gt;

&lt;span class="input-group-addon"&gt;$&lt;/span&gt;

&lt;/form&gt;

結果如下所示：

您可以通過向 <b>.input-group</b> 添加相對表單大小的 class（比如 <b>.input-group-lg、input-group-sm</b>）來改變輸入框組的大小。輸入框中的内容會自動調整大小。

下面的執行個體示範了這點：

&lt;div class="input-group input-group-lg"&gt;

&lt;input type="text" class="form-control" placeholder="Twitterhandle"&gt;

&lt;div class="input-group input-group-sm"&gt;

您可以把複選框和單選插件作為輸入框組的字首或者字尾元素，如下面的執行個體所示：

&lt;div class="row"&gt;

&lt;div class="col-lg-6"&gt;

&lt;span class="input-group-addon"&gt;

&lt;input type="checkbox"&gt;&lt;/span&gt;

&lt;/div&gt;&lt;!-- /input-group --&gt;

&lt;/div&gt;&lt;!-- /.col-lg-6 --&gt;

&lt;input type="radio"&gt;&lt;/span&gt;

&lt;/div&gt;&lt;!-- /.row --&gt;

您也可以把按鈕作為輸入框組的字首或者字尾元素，這個時候您就不是添加 <b>.input-group-addon</b> class，您需要使用 class <b>.input-group-btn</b> 來包裹按鈕。這是必需的，因為預設的浏覽器樣式不會被重寫。下面的執行個體示範了這點：

&lt;span class="input-group-btn"&gt;

&lt;button class="btn btn-default" type="button"&gt;Go!&lt;/button&gt;

&lt;/span&gt;

在輸入框組中添加帶有下拉菜單的按鈕，隻需要簡單地在一個 <b>.input-group-btn</b> class 中包裹按鈕和下拉菜單即可，如下面的執行個體所示：

&lt;div class="input-group-btn"&gt;

&lt;button type="button" class="btn btn-default

dropdown-toggle" data-toggle="dropdown"&gt;下拉菜單

&lt;span class="caret"&gt;&lt;/span&gt;

&lt;/button&gt;

&lt;ul class="dropdown-menu"&gt;

&lt;li&gt;

&lt;a href="#"&gt;功能&lt;/a&gt;

&lt;/li&gt;

&lt;a href="#"&gt;另一個功能&lt;/a&gt;

&lt;a href="#"&gt;其他&lt;/a&gt;

&lt;li class="divider"&gt;&lt;/li&gt;

&lt;a href="#"&gt;分離的連結&lt;/a&gt;

&lt;/ul&gt;

&lt;/div&gt;&lt;!-- /btn-group --&gt;

&lt;ul class="dropdown-menu pull-right"&gt;

在輸入框組中添加帶有下拉菜單的分割按鈕，使用與下拉菜單按鈕大緻相同的樣式，但是對下拉菜單添加了主要的功能，如下面的執行個體所示：

&lt;button type="button" class="btn btn-default" tabindex="-1"&gt;下拉菜單&lt;/button&gt;

dropdown-toggle" data-toggle="dropdown" tabindex="-1"&gt;

&lt;span class="sr-only"&gt;切換下拉菜單&lt;/span&gt;