表單布局
- 垂直表單（默認(rèn)）
- 內(nèi)聯(lián)表單
- 水平表單
垂直表單或基本表單（display:block;）
創(chuàng)建基本表單的步驟：
- 向父 <form> 元素添加 role="form"方椎。
- 把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中项贺。這是獲取最佳間距所必需的。
- 向所有的文本元素 <input>觉啊、<textarea> 和 <select> 添加 class .form-control。
舉個(gè)例子：
<form role="form">
<div class="form-group">
<label for="name">名稱(chēng)</label>
<input type="text" class="form-control" id="name"
placeholder="請(qǐng)輸入名稱(chēng)">
</div>
<div class="form-group">
<label for="name">密碼</label>
<input type="password" class="form-control" id="password"
placeholder="請(qǐng)輸入密碼">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
顯示效果為：
內(nèi)聯(lián)表單（全部在同一行，display為inline-block）
內(nèi)聯(lián)表單即元素都是向左對(duì)齊的殖卑，標(biāo)簽是并排的，則向 <form> 標(biāo)簽添加 class .form-inline秆乳。
就剛才的例子懦鼠，直接給form加一個(gè)class即可：
<form class="form-inline" role="form">
<div class="form-group">
<label for="name">名稱(chēng)</label>
<input type="text" class="form-control" id="name"
placeholder="請(qǐng)輸入名稱(chēng)">
</div>
<div class="form-group">
<label for="name">密碼</label>
<input type="password" class="form-control" id="password"
placeholder="請(qǐng)輸入密碼">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
則顯示效果為：
水平表單（label和input等表單元素在同一行）
水平表單與其他表單不僅標(biāo)記的數(shù)量上不同，而且表單的呈現(xiàn)形式也不同屹堰。創(chuàng)建一個(gè)水平布局的表單的步驟為：
- 向父 <form> 元素添加 class .form-horizontal肛冶。
- 把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。
- 向標(biāo)簽添加 class .control-label扯键。
- 設(shè)置label和其兄弟div的寬度（因?yàn)閕nput等默認(rèn)寬度是100%）睦袖。
舉例：
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">名稱(chēng)</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name"
placeholder="請(qǐng)輸入名稱(chēng)">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="password"
placeholder="請(qǐng)輸入密碼">
</div>
</div>
<div class="col-sm-2 col-sm-offset-4">
<button type="submit" class="btn btn-default">提交</button>
</div>
</form>
則顯示效果為：
