Bootstrap's默認設置
表單控件自動接收與一些全球性的造型Bootstrap ：
所有文本<input> <textarea>和<select>與類元素.form-control有100％的寬度。
Bootstrap表單佈局
Bootstrap提供了三種形式的佈局：
- 垂直形式（這是默認）
- 臥式成形
- 內嵌形式
所有三種形式的佈局標準的規則：
- 始終使用
<form role="form">（有助於提高輔助功能使用屏幕閱讀器的人） - 包裝標籤和表單控件的
<div class="form-group">（需要的最佳間距） - 類添加
.form-control的所有文本<input><textarea>和<select>元素
Bootstrap立式（默認）
下面的例子創建一個垂直的形式有兩個輸入字段，一個複選框和一個提交按鈕：
例
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> 試一試» Bootstrap內嵌表
在內聯形式，所有的元素是內聯的，左對齊，且標籤是旁邊。
注：這僅適用於表單中viewports的至少768px寬！
一個內嵌的形式附加規則：
- 類添加
.form-inline到<form>元素
下面的示例創建兩個輸入字段，一個複選框內嵌的形式，一個提交按鈕：
例
<form class="form-inline" role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> 試一試» 提示：如果您不包括每個輸入標籤，屏幕閱讀器將與表單的麻煩。 您可以隱藏所有設備的標籤，除了屏幕閱讀器，通過使用.sr-only類：
例
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
class="sr-only"
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> 試一試» Bootstrap水平表
一個水平的形式從其他形式都在標記的量，並且在形式的呈現脫穎而出。
對於水平的形式附加規則：
- 添加類
.form-horizontal到<form>元素 - 一流的加入
.control-label所有<label>元素
提示：使用Bootstrap's預定義的網格類對準標籤和表單控件組水平佈局。
下面的示例創建兩個輸入字段，一個複選框水平的形式，一個提交按鈕：
例
<form class="form-horizontal" role="form">
<div
class="form-group">
<label class="control-label
col-sm-2" for="email">Email:</label>
<div
class="col-sm-10">
<input type="email"
class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input
type="password" class="form-control" id="pwd" placeholder="Enter 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">Submit</button>
</div>
</div>
</form> 試一試»