## 表單 Bootstrap 提供了一些豐富的表單樣式供開發者使用。 ### 基本格式 **實現基本的表單樣式** ~~~javascript <form> <div class="form-group"> <label>電子郵件</label> <input type="email" class="form-control" placeholder="請輸入您的郵箱..." /> </div> <div class="form-group"> <label>密碼</label> <input type="password" class="form-control" placeholder="請輸入您的密碼..." /> </div> </form> ~~~ 單獨的表單控件會被自動賦予一些全局樣式。所有設置了` .form-control` 類的 `<input>`、`<textarea>` 和 `<select>` 元素都將被默認設置寬度屬性為 `width: 100%`;。 將 `label` 元素和前面提到的控件包裹在 `.form-group` 中可以獲得最好的排列。 ### 內聯表單 讓表單左對齊浮動，并表現為 inline-block 內聯塊結構 ~~~html <form class="form-inline"> ~~~ > 注：當小于 768px，會恢復獨占樣式 ### 表單合組 **前后增加片段** ~~~html <div class="form-group"> <label>價格</label> <div class="input-group"> <div class="input-group-addon">$</div> <input type="text" class="form-control" /> <div class="input-group-addon">.00</div> </div> </div> ~~~ > 不要將表單組直接和輸入框組混合使用。建議將輸入框組嵌套到表單組中使用。 ### 水平排列 **讓表單內的元素保持水平排列** ~~~html <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">電子郵件</label> <div class="col-sm-10"> <input type="email" class="form-control" placeholder="請輸入您的電子郵件"> </div> </div> </form> ~~~ > 注：control-label 表示和父元素樣式同步。 ### 復選框和單選框 ~~~html <div class="checkbox disabled"> <label> <input type="checkbox" disabled/>體育 </label> </div> <div class="checkbox"> <label> <input type="checkbox" />音樂 </label> </div> <label class="checkbox-inline"> <input type="checkbox" disabled/>體育 </label> <label class="checkbox-inline"> <input type="checkbox" />音樂 </label> ~~~ ### 下拉列表 ~~~html <select class="form-control"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> </select> ~~~ ### 校驗狀態 **設置為錯誤狀態** ~~~html <div class="form-group has-error"> ~~~ > 注：還有其他狀態如下 |樣式 |說明| |---|---| |has-error| 錯誤狀態| |has-success|成功狀態| |has-warning|警告狀態| **label 標簽同步相應狀態** ~~~html <label class=" control-label">電子郵件</label> ~~~ ### 添加額外的圖標 **文本框右側內置文本圖標** ~~~ <div class="form-group has-error has-feedback"> <label class="col-sm-2 control-label">電子郵件</label> <div class="col-sm-10"> <input type="email" class="form-control" placeholder="請輸入您的郵箱..." /> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </div> ~~~ |類名 |含義 | |---|---| |glyphicon-ok|成功狀態| |glyphicon-warning-sign|警告狀態| |glyphicon-remove|錯誤狀態| ### 控制尺寸 **從大到小** ~~~html <input type="email" class="form-control input-lg" placeholder="請輸入您的郵箱..." /> ~~~ > 注：也可以設置父元素 form-group-lg、form-group-sm，來調整。 ## 圖片 ~~~html <img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail"> ~~~