Bootstrap實現水平排列的表單
更新時間：2016年07月04日 16:13:02 投稿：lijiao
這篇文章主要為大家詳細介紹了Bootstrap實現水平排列的表單的相關代碼，代碼簡潔，感興趣的小伙伴們可以參考一下
通過為表單添加 .form-horizontal 類，并聯(lián)合使用 Bootstrap 預置的柵格類，可以將 label 標簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現為柵格系統(tǒng)中的行（row），因此就無需再額外添加 .row 了。
水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同。如需創(chuàng)建一個水平布局的表單，請按下面的幾個步驟進行：
1、向父 <form> 元素添加 class .form-horizontal。
2、把標簽和控件放在一個帶有 class .form-group 的 <div> 中。
3、向標簽添加 class .control-label。
實現代碼：
<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>
如果大家還想深入學習，可以點擊這里進行學習，再為大家附一個精彩的專題：Bootstrap學習教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
bootstrapValidator.min.js表單驗證插件
這篇文章主要為大家詳細介紹了bootstrapValidator.min.js表單驗證插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
現在網站為了提升用戶的瀏覽體驗越來越多的使用了圖片,而這些圖片通常以 Base64 的形式存儲和加載,下面這篇文章主要給大家介紹了關于JavaScript圖片的Base64編碼以及轉換的相關資料,需要的朋友可以參考下2022-07-07
常常會用到的停留頁面的操作.兼容IE,FF.實現代碼如下。2010-08-08
說實話，我是個比較喜歡懷疑權威的人，但是在有些權威的問題一直在我面前閃，閃啊閃，我就開始不懷疑他們了，因為有10000個人說這個東西是對的，我就會覺得它的確是對的吧。2010-05-05
這篇文章主要為大家詳細介紹了js添加事件的通用方法，還為大家介紹了js綁定事件的常用方式，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了Bootstrap表單布局樣式代碼的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-05-05
這篇文章主要介紹了webpack常用構建優(yōu)化策略小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了javascript瀏覽器窗口之間傳遞數據的方法,實例分析了父窗口與子窗口之間傳遞參數的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
這篇文章主要介為大家詳細紹了Bootstrap CSS布局之按鈕的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
亂碼，頭大的一件事可以考慮轉碼方式不直接傳中文，在js里用escape轉碼，具體實現如下，有類似情況的朋友可以參考下2013-08-08