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>
顯示效果如下：
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。