介紹Bootstrap輸入框組的特性
- 零下一度原創
- 2017-07-17 14:38:071979瀏覽
本章將講解 Bootstrap 支援的另一個特性，輸入框組。輸入框組擴充自 表單控制項。使用輸入框組，您可以輕鬆地在基於文字的輸入框中添加作為前綴和後綴的文字或按鈕。
透過在輸入網域中添加前綴和後綴的內容，您可以向使用者輸入新增公共的元素。例如，您可以新增美元符號，或在 Twitter 使用者名稱前新增 @，或應用程式介面所需的其他公開的元素。
在 .form-control 加上前綴或後綴元素的步驟如下：
將前綴或後綴元素放在一個有 class .input-group 的
中。
接著，在相同的
內，在 class 為 .input-group-addon 的 內放置額外的內容。
把該 放在 <input> 元素的前面或後面。
為了保持跨瀏覽器的相容性，請避免使用 <select> 元素，因為它們在 WebKit 瀏覽器中無法完全渲染出效果。也不要直接向表單組套用輸入框組的 class，輸入框組是一個孤立的元件。
前面的話
有時，我們需要將文字輸入框(input group)和檔案或小icon組合在一起進行顯示， 我們稱之為addon。也就是透過在文字輸入框 <input> 前面、後面或兩邊加上文字或按鈕，來實現表單控制項的擴充。本文將詳細介紹Bootstrap輸入框組
基本用法
在輸入框的任一側新增額外元素或按鈕。也可以在輸入框的兩側同時增加額外元素
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span></div><div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span></div><div class="input-group"> <span class="input-group-addon" id="basic-addon3"></span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"></div>
#【注意事項】
1、避免使用 <select> 元素，因為WebKit 瀏覽器無法完全繪製它的樣式
2、避免使用 <textarea> 元素，由於它們的 rows 屬性在某些情況下不被支援
3、不要將表單組或柵格列（column）類別直接和輸入框組混合使用。而是將輸入框組嵌套到表單組或柵格相關元素的內部
<h3>错误示范</h3><div class="input-group col-xs-4"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group col-xs-8"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><h3>正确示范</h3><div class="col-xs-4"><div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></div><div class="col-xs-8"><div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></div>
4、可以新增多個（ .input-group-addon 或 .input-group-btn#）
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> <span class="input-group-addon" id="basic-addon1">@</span></div>
5、不支援在單一輸入框組中新增多個表單控制項
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>
.input-group
新增對應的尺寸類，其內部包含的元素將自動調整自身的尺寸。不需要為輸入框組中的每個元素重複地新增控制尺寸的類別。提供了.input-group-lg和.input-group-sm，未提供超小型的樣式，也許作者認為不需要<div class="input-group input-group-lg"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group input-group-sm"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>
##額外元素【多重選取方塊或單選方塊】
可以將多重選取方塊或單選方塊作為額外元素新增至輸入方塊群組中
<div class="input-group"> <span class="input-group-addon"><input type="checkbox" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."></div><div class="input-group"> <span class="input-group-addon"><input type="radio" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."></div>
【按鈕】
為輸入框組新增按鈕需要額外新增一層巢狀，而不是
.input-group -addon，而是加入
.input-group-btn
<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" placeholder="Search for..."></div>
<div class="input-group"> <div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button><ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li></ul> </div> <input type="text" class="form-control" aria-label="..."></div>###############【分裂式按鈕下拉式選單】##### #
<div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default" type="button">Action</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button><ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li></ul> </div> <input type="text" class="form-control" aria-label="..."></div>############### ####
以上是介紹Bootstrap輸入框組的特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：頁面內跳轉的錨點設置下一篇：頁面內跳轉的錨點設置