Bootstrap 表單
Bootstrap 的預設設定
使用 Bootstrap，文字控制元件會自動應用一些全域性樣式。
所有文字 <input>, <textarea>, 和 <select> 元素，類名為 .form-control，寬度為 100%。
Bootstrap 表單佈局
Bootstrap 提供三種表單佈局：
- 垂直表單（這是預設的）
- 水平表單
- 行內表單
所有三種表單佈局的標準規則：
- 將標籤和表單控制元件包裹在
<div class="form-group">中（這是為了最佳間距所必需的） - 為所有文字
<input>,<textarea>, 和<select>元素新增類名.form-control
Bootstrap 垂直表單（預設）
下面的示例建立了一個垂直表單，包含兩個輸入欄位、一個複選框和一個提交按鈕。
示例
<form action="/action_page.php">
<div class="form-group">
<label for="email">電子郵件地址:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">密碼:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> 記住我</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
自己動手試一試 »
Bootstrap 行內表單
在行內表單中，所有元素都是行內元素，左對齊，並且標籤與控制元件並行。
注意：這隻適用於視口寬度至少為 768px 的表單！
行內表單的附加規則：
- 為
<form>元素新增類名.form-inline。
下面的示例建立了一個行內表單，包含兩個輸入欄位、一個複選框和一個提交按鈕。
示例
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">電子郵件地址:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">密碼:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> 記住我</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
自己動手試一試 »
提示： 如果您沒有為每個輸入包含標籤，螢幕閱讀器將難以識別您的表單。您可以使用 .sr-only 類來隱藏除螢幕閱讀器外的所有裝置的標籤。
示例
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">郵箱地址：</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">密碼：</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> 記住我</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
自己動手試一試 »
Bootstrap 水平表單
水平表單意味著標籤與輸入欄位並行（水平）對齊，適用於大螢幕和中等螢幕。在小螢幕（767px 及以下）上，它將轉換為垂直表單（標籤放置在每個輸入欄位的上方）。
水平表單的附加規則：
- 為
<form>元素新增類名.form-horizontal。 - 為所有
<label>元素新增類名.control-label。
提示： 使用 Bootstrap 的預定義網格類來將標籤和表單控制元件組對齊到水平佈局中。
下面的示例建立了一個水平表單，包含兩個輸入欄位、一個複選框和一個提交按鈕。
示例
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">郵箱：</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="輸入郵箱">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">密碼：</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" 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>
自己動手試一試 »
