bootstrap輸入框組代碼分享
更新時間:2016年06月07日 10:03:50 投稿:mrr
Bootstrap 支持的另一個特性,輸入框組,輸入框組擴展自表單控件.下面小編給大家介紹bootstrap輸入框組的代碼,非常不錯具有參考借鑒價值,感興趣的朋友一起學習吧
Bootstrap 支持的另一個特性,輸入框組。輸入框組擴展自 表單控件。使用輸入框組,可以很容易地向基于文本的輸入框添加作為前綴和后綴的文本或按鈕。
向輸入域添加前綴和后綴的內容
<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"> <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>
復選框和單選插件作為輸入框組的前綴或者后綴元素
<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>
按鈕作為輸入框組的前綴或者后綴元素
<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> class="input-group-btn" <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 class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-music"></span> GO <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">下拉菜單標題</li> <li><a href="#">A</a></li> <li class="divider"><</li> <li><a href="#">B</a></li> </ul> </div> <input type="text" class="form-control"> </div> <br> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-music"></span> GO </button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">下拉菜單標題</li> <li><a href="#">A</a></li> <li class="divider"><</li> <li><a href="#">B</a></li> </ul> </div> <input type="text" class="form-control"> </div> <br>
以上所述是小編給大家介紹的bootstrap輸入框組代碼分享,希望對大家有所幫助!
您可能感興趣的文章:
相關文章
JS中getElementsByClassName與classList兼容性問題解決方案分析
這篇文章主要介紹了JS中getElementsByClassName與classList兼容性問題解決方案,結合實例形式分析了getElementsByClassName與classList的使用方法、原理及兼容性問題的處理技巧,需要的朋友可以參考下2019-08-08