第七篇Bootstrap表單布局實例代碼詳解(三種表單布局)

更新時間：2016年06月21日 15:24:30 作者：-夏昊-

Bootstrap提供了三種表單布局：垂直表單，內(nèi)聯(lián)表單和水平表單。接下來通過本文給大家介紹Bootstrap表單布局實例代碼詳解，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧

Bootstrap提供了三種表單布局：垂直表單，內(nèi)聯(lián)表單和水平表單。下面逐一給大家介紹，有興趣的朋友一起學習吧。

創(chuàng)建垂直或基本表單：

•·向父 <form> 元素添加 role="form"。
•·把標簽和控件放在一個帶有 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="請輸入名稱">
</div>
<div class="form-group">
<label for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
<p class="help-block">這里是塊級幫助文本的實例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 請打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>

內(nèi)聯(lián)表單：

內(nèi)聯(lián)表單中所有元素都向左對齊，標簽并排，要創(chuàng)建內(nèi)聯(lián)表單，需要在form標簽中加入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="請輸入名稱">
</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"> 請打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>

顯示效果如下：

注意:默認情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內(nèi)聯(lián)表單時，需要在表單控件上設置一個寬度。

水平表單:和其它兩種表單有所不同,要創(chuàng)建水平表單需要遵循以下步驟.

•向父 <form> 元素添加 class .form-horizontal。

•把標簽和控件放在一個帶有 class .form-group 的 <div> 中。

•向標簽添加 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="請輸入名字">
</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="請輸入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 請記住我
</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表單布局實例代碼詳解(三種表單布局)的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

javascript Array.sort() 跨瀏覽器下需要考慮的問題
最近組里項目需要一個簡單的Table排序的功能，這個功能實現(xiàn)起來很簡單，并且網(wǎng)上也有很多現(xiàn)成的代碼，因此任務很快完成。
2009-12-12
JavaScript實現(xiàn)前端網(wǎng)頁版倒計時
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)前端網(wǎng)頁版倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
關于layui的下拉搜索框異步加載數(shù)據(jù)的解決方法
今天小編就為大家分享一篇關于layui的下拉搜索框異步加載數(shù)據(jù)的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
微信小程序?qū)崿F(xiàn)banner圖輪播效果
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)banner圖輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-02-02
javascript實現(xiàn)在線客服效果
這篇文章主要介紹了javascript實現(xiàn)在線客服效果的實例代碼，非常不錯，這里推薦給大家，有需要的小伙伴可以參考下。
2015-07-07
微信小程序項目總結之點贊刪除列表分享功能
這篇文章主要介紹了微信小程序項目總結之點贊刪除列表分享功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-06-06
JS實現(xiàn)表單中checkbox對勾選中增加邊框顯示效果
這篇文章主要介紹了JS實現(xiàn)表單中checkbox對勾選中增加邊框顯示效果,可實現(xiàn)點擊后圖片增加邊框及勾選的功能,非常簡潔實用,需要的朋友可以參考下
2015-08-08
Kendo Grid editing 自定義驗證報錯提示的解決方法
Kendo UI是一個強大的框架用于快速HTML5 UI開發(fā)?；谧钚碌腍TML5、CSS3和JavaScript標準。今天小編通過分享本文給大家介紹Kendo Grid editing 自定義驗證報錯提示的解決方法
2016-11-11
javascript addBookmark 加入收藏多瀏覽器兼容
不錯的加入收藏代碼，加入了對一些常見瀏覽器的判斷，更好的體現(xiàn)用戶體驗，兼容了ie,firefox.
2009-08-08
JavaScript實現(xiàn)選擇框按比例拖拉縮放的方法
這篇文章主要介紹了JavaScript實現(xiàn)選擇框按比例拖拉縮放的方法,具有等比例縮放及設置最小范圍等功能,涉及javascript事件的添加、監(jiān)聽、頁面元素動態(tài)操作及鼠標事件的響應等技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08