bootstrap輸入框組代碼分享
Bootstrap 支持的另一個(gè)特性,輸入框組。輸入框組擴(kuò)展自 表單控件。使用輸入框組,可以很容易地向基于文本的輸入框添加作為前綴和后綴的文本或按鈕。
向輸入域添加前綴和后綴的內(nèi)容
<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>
復(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><!-- /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="#">另一個(gè)功能</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">下拉菜單標(biāo)題</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">下拉菜單標(biāo)題</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輸入框組代碼分享,希望對(duì)大家有所幫助!
- Bootstrap CSS組件之輸入框組
- Bootstrap彈出框modal上層的輸入框不能獲得焦點(diǎn)問(wèn)題的解決方法
- Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組(9)
- bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
- 使用bootstrap typeahead插件實(shí)現(xiàn)輸入框自動(dòng)補(bǔ)全之問(wèn)題及解決辦法
- Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法
- bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能
- 基于Bootstrap重置輸入框內(nèi)容按鈕插件
- 基于Bootstrap使用jQuery實(shí)現(xiàn)輸入框組input-group的添加與刪除
- bootstrap輸入框組件使用方法詳解
相關(guān)文章
JS中g(shù)etElementsByClassName與classList兼容性問(wèn)題解決方案分析
這篇文章主要介紹了JS中g(shù)etElementsByClassName與classList兼容性問(wèn)題解決方案,結(jié)合實(shí)例形式分析了getElementsByClassName與classList的使用方法、原理及兼容性問(wèn)題的處理技巧,需要的朋友可以參考下2019-08-08JavaScript中正則表達(dá)式的實(shí)際應(yīng)用詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中正則表達(dá)式實(shí)際應(yīng)用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05微信小程序 自定義彈窗實(shí)現(xiàn)過(guò)程(附代碼)
這篇文章主要介紹了微信小程序 自定義彈窗實(shí)現(xiàn)過(guò)程(附代碼),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-1220多個(gè)小事例帶你重溫ES10新特性(小結(jié))
這篇文章主要介紹了20多個(gè)小事例帶你重溫ES10新特性(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09