第七篇Bootstrap表單布局實(shí)例代碼詳解(三種表單布局)
Bootstrap提供了三種表單布局:垂直表單,內(nèi)聯(lián)表單和水平表單。下面逐一給大家介紹,有興趣的朋友一起學(xué)習(xí)吧。
創(chuàng)建垂直或基本表單:
•·向父 <form> 元素添加 role="form"。
•·把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
•·向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control
<form role="form"> <div class="form-group"> <label for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱"> </div> <div class="form-group"> <label for="inputfile">文件輸入</label> <input type="file" id="inputfile"> <p class="help-block">這里是塊級(jí)幫助文本的實(shí)例。</p> </div> <div class="checkbox"> <label> <input type="checkbox"> 請(qǐng)打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form>
內(nèi)聯(lián)表單:
內(nèi)聯(lián)表單中所有元素都向左對(duì)齊,標(biāo)簽并排,要?jiǎng)?chuàng)建內(nèi)聯(lián)表單,需要在form標(biāo)簽中加入class
.form-inline
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱"> </div> <div class="form-group"> <label class="sr-only" for="inputfile">文件輸入</label> <input type="file" id="inputfile"> </div> <div class="checkbox"> <label> <input type="checkbox"> 請(qǐng)打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form>
顯示效果如下:
注意:默認(rèn)情況下,Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內(nèi)聯(lián)表單時(shí),需要在表單控件上設(shè)置一個(gè)寬度。
水平表單:和其它兩種表單有所不同,要?jiǎng)?chuàng)建水平表單需要遵循以下步驟.
•向父 <form> 元素添加 class .form-horizontal。
•把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。
•向標(biāo)簽添加 class .control-label。
例如:
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="請(qǐng)輸入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="請(qǐng)輸入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 請(qǐng)記住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登錄</button> </div> </div> </form>
以上所述是小編給大家介紹的第七篇Bootstrap表單布局實(shí)例代碼詳解(三種表單布局)的全部敘述,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗(yàn)組件思路詳解
- Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理(推薦)
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- 基于bootstrap插件實(shí)現(xiàn)autocomplete自動(dòng)完成表單
- Bootstrap表單組件教程詳解
- 詳解Bootstrap創(chuàng)建表單的三種格式(一)
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- Bootstrap表單布局
相關(guān)文章
JavaScript實(shí)現(xiàn)跟隨滾動(dòng)緩沖運(yùn)動(dòng)廣告框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)跟隨滾動(dòng)緩沖運(yùn)動(dòng)廣告框,頁面左右兩邊跟隨式廣告框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07JAVASCRIPT車架號(hào)識(shí)別/驗(yàn)證函數(shù)代碼 汽車車架號(hào)驗(yàn)證程序
偶然中在CSDN里找到C#版的驗(yàn)證程序,因此改編了一版JS版本,相信會(huì)對(duì)大家有用2012-01-01Javascript表單序列化原理及實(shí)現(xiàn)代碼詳解
這篇文章主要介紹了Javascript表單序列化原理及實(shí)現(xiàn)代碼詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10JavaScript自動(dòng)點(diǎn)擊鏈接 防止繞過瀏覽器訪問的方法
下面小編就為大家?guī)硪黄狫avaScript自動(dòng)點(diǎn)擊鏈接 防止繞過瀏覽器訪問的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01JavaScript實(shí)現(xiàn)京東購物放大鏡和選項(xiàng)卡效果的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)京東購物放大鏡和選項(xiàng)卡效果的方法,結(jié)合實(shí)例形式分析了javascript基于事件響應(yīng)、數(shù)值計(jì)算與頁面元素動(dòng)態(tài)修改實(shí)現(xiàn)圖片放大功能以及tab選項(xiàng)卡切換效果相關(guān)操作技巧,需要的朋友可以參考下2018-07-07Javascript基于OOP實(shí)實(shí)現(xiàn)探測(cè)器功能代碼實(shí)例
這篇文章主要介紹了Javascript基于OOP實(shí)實(shí)現(xiàn)探測(cè)器功能代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08JavaScript利用canvas實(shí)現(xiàn)炫酷的碎片切圖效果
這篇文章主要和大家分享一個(gè)炫酷的碎片式切圖效果,本文主要利用canvas來實(shí)現(xiàn),代碼量不多,但有些地方還是需要花點(diǎn)時(shí)間去理解的,感興趣的可以學(xué)習(xí)一下2022-10-10JavaScript與jQuery中文檔就緒函數(shù)的區(qū)別
這篇文章主要介紹了JavaScript與jQuery中文檔就緒函數(shù)的區(qū)別,文章內(nèi)容介紹詳細(xì),具有一的的參考價(jià)值,需要的小伙伴可以參考一下2022-03-03對(duì)于Javascript 執(zhí)行上下文的全面了解
下面小編就為大家?guī)硪黄獙?duì)于Javascript 執(zhí)行上下文的全面了解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09