Bootstrap全域CSS樣式之表單，bootstrap全域css
.form-control——將單獨的表單控制項賦予一些全域樣式，如預設寬度width:100%；
.form-group——包裹表單控制項，獲得最好的排列；
.form-inline——將表單設定為內聯表單，只適用於視口（viewport）至少在 768px 寬度時；
.sr-only——將label標籤隱藏；
.help-block——用於設定提示文本；
.form-horizontal——可以將label標籤和控制群組水平並排布局；
.radio-inline、.checkbox-inline——將相應控制項水平排列；
.form-control-static——將p元素設定為靜態控制項；
.has-error、.has-warning、has-success——分別對應校正狀態；
.has-feedback——為控制項添加輔助表徵圖（與表徵圖引用類聯合使用）；
.input-lg——建立大一些的表單控制項；
.input-sm——建立小一些的表單控制項；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>CSS全域樣式_柵格系統</title> <!-- <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style type="text/css"> </style></head><body><div class="container"> <form role="form" class="form-inline"> <div class="form-group"> <label class="sr-only">使用者名稱</label> <input type="text" class="form-control" placeholder="使用者名稱/郵箱/手機號"/> </div> <div class="form-group"> <label class="sr-only">密碼</label> <input type="password" class="form-control" placeholder="輸入6-14位英文和數字組合密碼"/> </div> <div class="form-group"> <label class="sr-only">生日</label> <input type="date" class="form-control" placeholder="出生年月"/> </div> <div class="form-group"> <label class="sr-only">上傳頭像</label> <input type="file" class="form-control input-lg"/> <p class="help-block">選擇您需要的頭像檔案</p> </div> </form> <form role="form" class="form-horizontal"> <div class="form-group"> <label class="col-sm-4 control-label">使用者名稱</label> <div class="col-sm-8"> <input type="text" class="form-control" placeholder="使用者名稱/郵箱/手機號"/> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label">密碼</label> <div class="col-sm-8"> <input type="password" class="form-control" placeholder="輸入6-14位英文和數字組合密碼"/> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label">生日</label> <div class="col-sm-8"> <input type="date" class="form-control" placeholder="出生年月"/> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-8"> <div class="checkbox"> <label> <input type="checkbox"/>記住密碼 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-8"> <button class="btn btn-default">登入</button> </div> </div> </form> <form role="form" class="form-horizontal"> <div class="form-group"> <label>喜歡的球隊</label> <div class="checkbox"> <label> <input type="checkbox"/>廣州恒大 </label> <label> <input type="checkbox"/>上海上港 </label> <label> <input type="checkbox"/>北京國安 </label> </div> </div> <div class="form-group"> <label>性別</label> <div class="radio"> <label> <input type="radio" checked name="gender"/>男 </label> <label> <input type="radio" name="gender"/>女 </label> </div> </div> <div class="form-group"> <label>所屬城市</label> <select class="form-control" multiple> <option>北京</option> <option>上海</option> <option>廣州</option> </select> </div> <div class="form-group"> <label class="sr-only"></label> <textarea class="form-control" rows="5" placeholder="請文明用語"></textarea> </div> <p class="form-control-static">請按照郵箱格式輸入：hello@163.com</p> <div class="form-group"> <label>密碼</label> <input class="form-control" type="password" disabled/> </div> <div class="form-group"> <label>暱稱</label> <input class="form-control" type="text" placeholder="胖虎" readonly/> </div> <div class="form-group has-error has-feedback"> <label>使用者名稱</label> <input class="form-control" type="text" /> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> <div class="form-group has-success has-feedback"> <label>使用者名稱</label> <input class="form-control" type="text" /> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label>使用者名稱</label> <input class="form-control" type="text" /> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> </form></div></body></html>
著作權聲明：本文為博主原創文章，未經博主允許不得轉載。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
