Bootstrap提供了三種表單佈局：垂直表單，內聯表單和水平表單。下面逐一給大家介紹，有興趣的朋友一起學習吧。
創建垂直或基本表單：
•・向父<form> 元素添加role="form"。
•・把標籤和控件放在一個帶有class .form-group 的<div> 中。這是獲取最佳間距所必需的。
•・向所有的文本元素<input>、<textarea> 和<select> 添加class .form-control
<form role="form"><div><label for="name">名稱</label><input type="text" id="name"placeholder="請輸入名稱"></div><div><label for="inputfile">文件輸入</label><input type="file" id="inputfile"><p>這裡是塊級幫助文本的實例。 </p></div><div><label><input type="checkbox"> 請打勾</label></div><button type="submit">提交</button></form>
內聯表單：
內聯表單中所有元素都向左對齊，標籤並排，要創建內聯表單，需要在form標籤中加入class
.form-inline
<form role="form"><div><label for="name">名稱</label><input type="text" id="name"placeholder="請輸入名稱"></div><div><label for="inputfile">文件輸入</label><input type="file" id="inputfile"></div><div><label><input type="checkbox"> 請打勾</label></div><button type="submit">提交</button></form>
顯示效果如下：
注意:默認情況下，Bootstrap 中的input、select 和textarea 有100% 寬度。在使用內聯表單時，需要在表單控件上設置一個寬度。
水平表單:和其它兩種表單有所不同,要創建水平表單需要遵循以下步驟.
•向父<form> 元素添加class .form-horizontal。
•把標籤和控件放在一個帶有class .form-group 的<div> 中。
•向標籤添加class .control-label。
例如:
<form role="form"><div><label for="firstname">名字</label><div><input type="text" id="firstname"placeholder="請輸入名字"></div></div><div><label for="lastname">姓</label><div><input type="text" id="lastname"placeholder="請輸入姓"></div></div><div><div><div><label><input type="checkbox"> 請記住我</label></div></div></div><div><div><button type="submit">登錄</button></div></div></form>
以上所述是小編給大家介紹的第七篇Bootstrap表單佈局實例代碼詳解(三種表單佈局)的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！