Bootstrap CSS 表單參考
Bootstrap 的預設設定
Bootstrap 會自動為所有文字輸入控制元件應用一些全域性樣式。
所有帶有 class="form-control" 的文字類 <input>、<textarea> 和 <select> 元素預設寬度為 100%。
所有三種表單佈局的標準規則
- 將標籤和表單控制元件包裝在
<div class="form-group">中（為了獲得最佳間距所必需） - 為所有文字類
<input>、<textarea>和<select>元素新增 class.form-control
以下示例建立了一個簡單的 Bootstrap 表單，其中包含兩個輸入欄位、一個複選框和一個提交按鈕
Bootstrap 表單示例
<form>
<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>
自己動手試一試 »
表單類
| 類 | 描述 | 示例 |
|---|---|---|
| .form-inline | 使 <form> 左對齊，具有內聯塊控制元件（這僅適用於視口寬度至少為 768px 的表單） | 試一試 |
| .form-horizontal | 將標籤和表單控制元件組在水平佈局中對齊 | 試一試 |
| .form-control | 用於 input、textarea 和 select 元素，使其跨越頁面的整個寬度並保持響應性 | 試一試 |
| .form-control-feedback | 表單驗證類 | 試一試 |
| .form-control-static | 在水平表單中的表單標籤旁邊新增純文字 | 試一試 |
| .form-group | 表單輸入和標籤的容器 | 試一試 |
輸入框類
| 類 | 描述 | 示例 |
|---|---|---|
| .input-group | 容器，用於透過在輸入框前面或後面新增圖示、文字或按鈕來增強輸入框，作為“幫助文字” | 試一試 |
| .input-group-lg | 大型輸入組 | 試一試 |
| .input-group-sm | 小型輸入組 | 試一試 |
| .input-group-addon | 與 .input-group 類一起，此類可以使在輸入欄位旁邊新增圖示或幫助文字成為可能 | 試一試 |
| .input-group-btn | 與 .input-group 類一起，此類將一個按鈕附加到輸入框旁邊。通常用作搜尋欄 | 試一試 |
| .input-lg | 大型輸入欄位 | 試一試 |
| .input-sm | 小型輸入欄位 | 試一試 |
