Latest web development tutorials

Bootstrap 輸入框組

本章將講解Bootstrap 支持的另一個特性,輸入框組。 輸入框組擴展自表單控件 。 使用輸入框組,您可以很容易地向基於文本的輸入框添加作為前綴和後綴的文本或按鈕。

通過向輸入域添加前綴和後綴的內容,您可以向用戶輸入添加公共的元素。 例如,您可以添加美元符號,或者在Twitter 用戶名前添加@,或者應用程序接口所需要的其他公共的元素。

.form-control添加前綴或後綴元素的步驟如下:

  • 把前綴或後綴元素放在一個帶有class.input-group的<div>中。
  • 接著,在相同的<div>內,在class為.input-group-addon的<span>內放置額外的內容。
  • 把該<span> 放置在<input> 元素的前面或者後面。
為了保持跨瀏覽器的兼容性,請避免使用<select> 元素,因為它們在WebKit 瀏覽器中不能完全渲染出效果。 也不要直接向表單組應用輸入框組的class,輸入框組是一個孤立的組件。

基本的輸入框組

下面的實例演示了基本的輸入框組:

實例

< div style = " padding: 100px 100px 10px; " > < form class = " bs-example bs-example-form " role = " form " > < div class = " input-group " > < span class = " input-group-addon " > @ </ span > < input type = " text " class = " form-control " placeholder = " twitterhandle " > </ div > < br > < div class = " input-group " > < input type = " text " class = " form-control " > < span class = " input-group-addon " > .00 </ span > </ div > < br > < div class = " input-group " > < span class = " input-group-addon " > $ </ span > < input type = " text " class = " form-control " > < span class = " input-group-addon " > .00 </ span > </ div > </ form > </ div >

嘗試一下»

結果如下所示:

基本的輸入框組

輸入框組的大小

您可以通過向.input-group添加相對錶單大小的class(比如.input-group-lg、input-group-sm、input-group-xs )來改變輸入框組的大小。 輸入框中的內容會自動調整大小。

下面的實例演示了這點:

實例

< div style = " padding: 100px 100px 10px; " > < form class = " bs-example bs-example-form " role = " form " > < div class = " input-group input-group-lg " > < span class = " input-group-addon " > @ </ span > < input type = " text " class = " form-control " placeholder = " Twitterhandle " > </ div > < br > < div class = " input-group " > < span class = " input-group-addon " > @ </ span > < input type = " text " class = " form-control " placeholder = " Twitterhandle " > </ div > < br > < div class = " input-group input-group-sm " > < span class = " input-group-addon " > @ </ span > < input type = " text " class = " form-control " placeholder = " Twitterhandle " > </ div > </ form > </ div >

嘗試一下»

結果如下所示:

輸入框組的大小

複選框和單選插件

您可以把複選框和單選插件作為輸入框組的前綴或者後綴元素,如下面的實例所示:

實例

< div style = " padding: 100px 100px 10px; " > < form class = " bs-example bs-example-form " role = " form " > < div class = " row " > < div class = " col-lg-6 " > < div class = " input-group " > < span class = " input-group-addon " > < input type = " checkbox " > </ span > < input type = " text " class = " form-control " > </ div > <!-- /input-group --> </ div > <!-- /.col-lg-6 --> < br > < div class = " col-lg-6 " > < div class = " input-group " > < span class = " input-group-addon " > < input type = " radio " > </ span > < input type = " text " class = " form-control " > </ div > <!-- /input-group --> </ div > <!-- /.col-lg-6 --> </ div > <!-- /.row --> </ form > </ div >

嘗試一下»

結果如下所示:

輸入框組的複選框和單選插件

按鈕插件

您也可以把按鈕作為輸入框組的前綴或者後綴元素,這個時候您就不是添加.input-group-addon class,您需要使用class.input-group-btn來包裹按鈕。這是必需的,因為默認的瀏覽器樣式不會被重寫。 下面的實例演示了這點:

實例

< div style = " padding: 100px 100px 10px; " > < form class = " bs-example bs-example-form " role = " form " > < div class = " row " > < div class = " col-lg-6 " > < div class = " input-group " > < span class = " input-group-btn " > < button class = " btn btn-default " type = " button " > Go! </ button > </ span > < input type = " text " class = " form-control " > </ div > <!-- /input-group --> </ div > <!-- /.col-lg-6 --> < br > < div class = " col-lg-6 " > < div class = " input-group " > < input type = " text " class = " form-control " > < span class = " input-group-btn " > < button class = " btn btn-default " type = " button " > Go! </ button > </ span > </ div > <!-- /input-group --> </ div > <!-- /.col-lg-6 --> </ div > <!-- /.row --> </ form > </ div >

嘗試一下»

結果如下所示:

輸入框組的按鈕插件

帶有下拉菜單的按鈕

在輸入框組中添加帶有下拉菜單的按鈕,只需要簡單地在一個.input-group-btn class中包裹按鈕和下拉菜單即可,如下面的實例所示:

實例

< div style = " padding: 100px 100px 10px; " > < form class = " bs-example bs-example-form " role = " form " > < div class = " row " > < div class = " col-lg-6 " > < div class = " input-group " > < div class = " input-group-btn " > < button type = " button " class = " btn btn-default dropdown-toggle " data-toggle = " dropdown " > 下拉菜單 < span class = " caret " > </ span > </ button > < ul class = " dropdown-menu " > < li > < a href = " # " > 功能 </ a > </ li > < li > < a href = " # " > 另一個功能 </ a > </ li > < li > < a href = " # " > 其他 </ a > </ li > < li class = " divider " > </ li > < li > < a href = " # " > 分離的鏈接 </ a > </ li > </ ul > </ div > <!-- /btn-group --> < input type = " text " class = " form-control " > </ div > <!-- /input-group --> </ div > <!-- /.col-lg-6 --> < br > < div class = " col-lg-6 " > < div class = " input-group " > < input type = " text " class = " form-control " > < div class = " input-group-btn " > < button type = " button " class = " btn btn-default dropdown-toggle " data-toggle = " dropdown " > 下拉菜單 < span class = " caret " > </ span > </ button > < ul class = " dropdown-menu pull-right " > < li > < a href = " # " > 功能 </ a > </ li > < li > < a href = " # " > 另一個功能 </ a > </ li > < li > < a href = " # " > 其他 </ a > </ li > < li class = " divider " > </ li > < li > < a href = " # " > 分離的鏈接 </ a > </ li > </ ul > </ div > <!-- /btn-group --> </ div > <!-- /input-group --> </ div > <!-- /.col-lg-6 --> </ div > <!-- /.row --> </ form > </ div >

嘗試一下»

結果如下所示:

輸入框組的下拉菜單按鈕

分割的下拉菜單按鈕

在輸入框組中添加帶有下拉菜單的分割按鈕,使用與下拉菜單按鈕大致相同的樣式,但是對下拉菜單添加了主要的功能,如下面的實例所示:

實例

< div style = " padding: 100px 100px 10px; " > < form class = " bs-example bs-example-form " role = " form " > < div class = " row " > < div class = " col-lg-6 " > < div class = " input-group " > < div class = " input-group-btn " > < button type = " button " class = " btn btn-default " tabindex = " -1 " > 下拉菜單 </ button > < button type = " button " class = " btn btn-default dropdown-toggle " data-toggle = " dropdown " tabindex = " -1 " > < span class = " caret " > </ span > < span class = " sr-only " > 切換下拉菜單 </ span > </ button > < ul class = " dropdown-menu " > < li > < a href = " # " > 功能 </ a > </ li > < li > < a href = " # " > 另一個功能 </ a > </ li > < li > < a href = " # " > 其他 </ a > </ li > < li class = " divider " > </ li > < li > < a href = " # " > 分離的鏈接 </ a > </ li > </ ul > </ div > <!-- /btn-group --> < input type = " text " class = " form-control " > </ div > <!-- /input-group --> </ div > <!-- /.col-lg-6 --> < br > < div class = " col-lg-6 " > < div class = " input-group " > < input type = " text " class = " form-control " > < div class = " input-group-btn " > < button type = " button " class = " btn btn-default " tabindex = " -1 " > 下拉菜單 </ button > < button type = " button " class = " btn btn-default dropdown-toggle " data-toggle = " dropdown " tabindex = " -1 " > < span class = " caret " > </ span > < span class = " sr-only " > 切換下拉菜單 </ span > </ button > < ul class = " dropdown-menu pull-right " > < li > < a href = " # " > 功能 </ a > </ li > < li > < a href = " # " > 另一個功能 </ a > </ li > < li > < a href = " # " > 其他 </ a > </ li > < li class = " divider " > </ li > < li > < a href = " # " > 分離的鏈接 </ a > </ li > </ ul > </ div > <!-- /btn-group --> </ div > <!-- /input-group --> </ div > <!-- /.col-lg-6 --> </ div > <!-- /.row --> </ form > </ div >

嘗試一下»

結果如下所示:

輸入框組中分割的下拉菜單按鈕