Bootstrap實(shí)現(xiàn)水平排列的表單
通過(guò)為表單添加 .form-horizontal 類，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類，可以將 label 標(biāo)簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無(wú)需再額外添加 .row 了。
水平表單與其他表單不僅標(biāo)記的數(shù)量上不同，而且表單的呈現(xiàn)形式也不同。如需創(chuàng)建一個(gè)水平布局的表單，請(qǐng)按下面的幾個(gè)步驟進(jìn)行：
1、向父 <form> 元素添加 class .form-horizontal。
2、把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。
3、向標(biāo)簽添加 class .control-label。
實(shí)現(xiàn)代碼：
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附一個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- 全面解析Bootstrap表單使用方法（表單按鈕）
- 詳解Bootstrap創(chuàng)建表單的三種格式（一）
- 全面解析Bootstrap表單使用方法（表單樣式）
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理（推薦）
- 全面解析Bootstrap表單使用方法（表單控件）
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- bootstrap為水平排列的表單和內(nèi)聯(lián)表單設(shè)置可選的圖標(biāo)
相關(guān)文章
bootstrapValidator.min.js表單驗(yàn)證插件
這篇文章主要為大家詳細(xì)介紹了bootstrapValidator.min.js表單驗(yàn)證插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript圖片的Base64編碼以及轉(zhuǎn)換詳解
現(xiàn)在網(wǎng)站為了提升用戶的瀏覽體驗(yàn)越來(lái)越多的使用了圖片,而這些圖片通常以 Base64 的形式存儲(chǔ)和加載,下面這篇文章主要給大家介紹了關(guān)于JavaScript圖片的Base64編碼以及轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2022-07-07
常常會(huì)用到的停留頁(yè)面的操作.兼容IE,FF.實(shí)現(xiàn)代碼如下。2010-08-08
js 數(shù)組的for循環(huán)到底應(yīng)該怎么寫(xiě)？
說(shuō)實(shí)話，我是個(gè)比較喜歡懷疑權(quán)威的人，但是在有些權(quán)威的問(wèn)題一直在我面前閃，閃啊閃，我就開(kāi)始不懷疑他們了，因?yàn)橛?0000個(gè)人說(shuō)這個(gè)東西是對(duì)的，我就會(huì)覺(jué)得它的確是對(duì)的吧。2010-05-05
這篇文章主要為大家詳細(xì)介紹了js添加事件的通用方法，還為大家介紹了js綁定事件的常用方式，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了Bootstrap表單布局樣式代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
webpack常用構(gòu)建優(yōu)化策略小結(jié)
這篇文章主要介紹了webpack常用構(gòu)建優(yōu)化策略小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
javascript瀏覽器窗口之間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了javascript瀏覽器窗口之間傳遞數(shù)據(jù)的方法,實(shí)例分析了父窗口與子窗口之間傳遞參數(shù)的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介為大家詳細(xì)紹了Bootstrap CSS布局之按鈕的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
地址欄傳遞中文參數(shù)亂碼在js里用escape轉(zhuǎn)碼
亂碼，頭大的一件事可以考慮轉(zhuǎn)碼方式不直接傳中文，在js里用escape轉(zhuǎn)碼，具體實(shí)現(xiàn)如下，有類似情況的朋友可以參考下2013-08-08