溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“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）來改變輸入框組的大小。輸入框中的內容會自動調整大小。
下面的實例演示了這點：
實例
<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>
結果如下所示：
感謝各位的閱讀，以上就是“Bootstrap實現基本的輸入框組實例”的內容了，經過本文的學習后，相信大家對Bootstrap實現基本的輸入框組實例這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
