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）來改變輸入框組的大小。輸入框中的內容會自動調整大小。
下面的例項演示了這點：
例項
<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>
結果如下所示：
原文地址： https://www.linuxprobe.com/a-feature-supported.html
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/31559985/viewspace-2673266/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- Bootstrap3系列：輸入框組boot
- bootstrap-select搜尋框輸入中文boot
- 【新特性速遞】數字輸入框的字首和字尾（位於輸入框內部）
- 從一次輸入框無法輸入的bug，談如何限制輸入框輸入型別型別
- 實現一個高度自適應的輸入框
- Bootstrap系列 -- 14. 表單控制元件輸入框inputboot控制元件
- 實現一個帶浮動標籤的輸入框
- 那個程式設計師說一個輸入框要做一週程式設計師
- Python3常用輸入模式：-輸入多組，固定組，多個輸入Python模式
- js 校驗輸入框還可以輸入多少個字JS
- 在程式前加一個密碼輸入框的過程！密碼
- imemode 控制輸入法，控制輸入框的輸入法
- Flutter 密碼輸入框 驗證碼輸入框Flutter密碼
- react輸入框輸入中文bugReact
- 【BootStrap】--登入載入模態框提示boot
- CSS 只有一條橫線的輸入框CSS
- VUE 實現 Studio 管理後臺（十二）：新增輸入組合，複雜輸入，輸入框 Input 系列Vue
- input 輸入框只能輸入數字
- C# Winform 支援Hex與ASCII輸入和切換的文字框C#ORMASCII
- jquery連線html頁面做一個彈出框輸入jQueryHTML
- ElementUI表格行編輯單元格編輯支援（輸入框，選擇框）DemoUI
- 文字框輸入完成自動跳入下一個程式碼例項
- html input文字輸入框的一些總結HTML
- js多個文字框輸入內容同步效果JS
- input輸入框的各種事件事件
- Input 輸入框中 只能輸入正整數
- flutter TextField 輸入框元件Flutter元件
- 自定義UITextView輸入框UITextView
- 輸入框過濾操作
- input只能輸入文字框
- 關於Input輸入框藍色外框的操作
- compositionEvent組合事件，來填補React input輸入框onchange事件的坑事件React
- vue 輸入框輸入4位一空格，控制16位有效字元Vue字元
- 輸入框點選按鈕清除輸入的所有字元的封裝字元封裝
- 文字框限制輸入字數的JSJS
- C#中的輸入框函式C#函式
- Flutter 驗證碼輸入框Flutter
- 需要輸入框？試試TextInputLayout