Bootstrap 輸入框組

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

通過向輸入域添加前綴和后綴的內(nèi)容，您可以向用戶輸入添加公共的元素。例如，您可以添加美元符號，或者在 Twitter 用戶名前添加 @，或者應(yīng)用程序接口所需要的其他公共的元素。

向 .form-control 添加前綴或后綴元素的步驟如下：

• 把前綴或后綴元素放在一個帶有 class .input-group 的
  中。
• 接著，在相同的
  內(nèi)，在 class 為 .input-group-addon 的 內(nèi)放置額外的內(nèi)容。
• 把該 放置在 元素的前面或者后面。

為了保持跨瀏覽器的兼容性，請避免使用 元素，因為它們在 WebKit 瀏覽器中不能完全渲染出效果。也不要直接向表單組應(yīng)用輸入框組的 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
>

嘗試一下 ?

結(jié)果如下所示：

輸入框組的大小

您可以通過向 .input-group 添加相對表單大小的 class（比如 .input-group-lg、input-group-sm）來改變輸入框組的大小。輸入框中的內(nèi)容會自動調(diào)整大小。

下面的實例演示了這點：

實例

<
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
>

嘗試一下 ?

結(jié)果如下所示：

復(fù)選框和單選插件

您可以把復(fù)選框和單選插件作為輸入框組的前綴或者后綴元素，如下面的實例所示：

實例

<
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
>


div
>


<
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
>


div
>


div
>


form
>

div
>

嘗試一下 ?

結(jié)果如下所示：

按鈕插件

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

實例

<
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
>


div
>


<
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
>


div
>


div
>


form
>

div
>

嘗試一下 ?

結(jié)果如下所示：

帶有下拉菜單的按鈕

在輸入框組中添加帶有下拉菜單的按鈕，只需要簡單地在一個 .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
>


<
input

type
=
"
text
"

class
=
"
form-control
"
>

div
>


div
>


<
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
>


div
>


div
>


div
>


form
>

div
>

嘗試一下 ?

結(jié)果如下所示：

分割的下拉菜單按鈕

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

實例

<
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
>


<
input

type
=
"
text
"

class
=
"
form-control
"
>

div
>


div
>


<
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
>


div
>


div
>


div
>


form
>

div
>

嘗試一下 ?

結(jié)果如下所示：

分享題目：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap 輸入框組
路徑分享：http://uogjgqi.cn/article/djohjjp.html

掃二維碼與項目經(jīng)理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

其他資訊

• Linux紅帽服務(wù)器：強(qiáng)大而可靠的選擇（linux紅帽服務(wù)器版）
• 共享空間的東西怎么獲得？(怎么租用空間電腦)
• 「如何解決筆記本數(shù)據(jù)庫加載失敗問題」(筆記本數(shù)據(jù)庫加載失敗)
• 空調(diào)外機(jī)噪音大嗡嗡響是為什么
• 完美指南：文件保存數(shù)據(jù)庫的更佳實踐(如何向文件保存數(shù)據(jù)庫)

行業(yè)動態(tài)

企業(yè)網(wǎng)站建設(shè)的重要性！

現(xiàn)在雖然是移動互聯(lián)網(wǎng)時代，但企業(yè)網(wǎng)站依然重要，包含PC站點，移動站?？梢哉f企業(yè)網(wǎng)站關(guān)系企業(yè)的未來發(fā)展和前途，尤其對中小企業(yè)更是如此，一些中小企業(yè)老板，對自己的名片很在乎，因為這是個門面。...

服務(wù)項目

• 網(wǎng)站建設(shè)

  查看詳情

• 移動端/APP

  查看詳情

• 微信/小程序

  查看詳情

• 技術(shù)支持

  查看詳情

• 其它服務(wù)

  查看詳情

• 更多服務(wù)項目

  用我們的專業(yè)和誠信贏得您的信賴，從PC到移動互聯(lián)網(wǎng)均有您想要的服務(wù)！

  獲取更多

聯(lián)系吧 在百度地圖上找到我們

電話：13518219792

如遇占線或暫未接聽請撥：136xxx98888

業(yè)務(wù)咨詢 技術(shù)咨詢 售后服務(wù)

網(wǎng)站設(shè)計

成都網(wǎng)站設(shè)計

企業(yè)網(wǎng)站設(shè)計

梓潼網(wǎng)站設(shè)計

成都網(wǎng)站設(shè)計

網(wǎng)站制作

移動手機(jī)網(wǎng)站制作

H5網(wǎng)站制作

網(wǎng)站制作

成都網(wǎng)站制作

聯(lián)系我們

電話：13518219792

郵箱：[email protected]

地址：成都青羊區(qū)錦天國際1002號

網(wǎng)址：uogjgqi.cn

網(wǎng)站建設(shè)

成都企業(yè)網(wǎng)站建設(shè)公司

大橙子網(wǎng)站建設(shè)

四川成都網(wǎng)站建設(shè)

綿竹網(wǎng)站建設(shè)

微信二維碼

• 友情鏈接
• 金牛區(qū)工商注冊
• 成都火鍋桌椅
• 成都光華機(jī)房
• 外貿(mào)網(wǎng)站建設(shè)方案
• 成都柴油發(fā)電機(jī)銷售
• 昆明勺貿(mào)菩汽車裝飾
• 成都ssl證書認(rèn)證
• 成都鋪面裝修
• app軟件開發(fā)
• 企業(yè)網(wǎng)站維護(hù)

Copyright © 2002-2023 uogjgqi.cn 快上網(wǎng)建站品牌 QQ：244261566 版權(quán)所有 備案號：蜀ICP備19037934號

• 在線咨詢
• 13518219792
• 

  微信二維碼

• 

  移動版官網(wǎng)