Bootstrap全局CSS样式之表单
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap全局CSS样式之表单
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
.form-control——將單獨(dú)的表單控件賦予一些全局樣式，如默認(rèn)寬度width:100%。
.form-group——包裹表單控件，獲得最好的排列；
.form-inline——將表單設(shè)置為內(nèi)聯(lián)表單，僅僅適用于視口（viewport）至少在 768px 寬度時(shí)；
.sr-only——將label標(biāo)簽隱藏；
.help-block——用于設(shè)置提示文本；
.form-horizontal——能夠?qū)abel標(biāo)簽和控件組水平并排布局；
.radio-inline、.checkbox-inline——將對(duì)應(yīng)控件水平排列。
.form-control-static——將p元素設(shè)置為靜態(tài)控件。
.has-error、.has-warning、has-success——分別相應(yīng)校驗(yàn)狀態(tài)。
.has-feedback——為控件加入輔助圖標(biāo)（與圖標(biāo)引用類(lèi)聯(lián)合使用）；
.input-lg——?jiǎng)?chuàng)建大一些的表單控件。
.input-sm——?jiǎng)?chuàng)建小一些的表單控件；
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>CSS全局樣式_柵格系統(tǒng)</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">username</label><input type="text" class="form-control" placeholder="username/郵箱/手機(jī)號(hào)"/></div><div class="form-group"><label class="sr-only">password</label><input type="password" class="form-control" placeholder="輸入6-14位英文和數(shù)字組合password"/></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">username</label><div class="col-sm-8"><input type="text" class="form-control" placeholder="username/郵箱/手機(jī)號(hào)"/></div></div><div class="form-group"><label class="col-sm-4 control-label">password</label><div class="col-sm-8"><input type="password" class="form-control" placeholder="輸入6-14位英文和數(shù)字組合password"/></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"/>記住password</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>喜歡的球隊(duì)</label><div class="checkbox"><label><input type="checkbox"/>廣州恒大</label><label><input type="checkbox"/>上海上港</label><label><input type="checkbox"/>北京國(guó)安</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="請(qǐng)文明用語(yǔ)"></textarea></div><p class="form-control-static">請(qǐng)依照郵箱格式輸入：hello@163.com</p><div class="form-group"><label>password</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>username</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>username</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>username</label><input class="form-control" type="text" /><span class="glyphicon glyphicon-warning-sign form-control-feedback"></span></div></form> </div></body> </html>
轉(zhuǎn)載于:https://www.cnblogs.com/yangykaifa/p/7001634.html
總結(jié)
以上是生活随笔為你收集整理的Bootstrap全局CSS样式之表单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ace treeview.php,改造
- 下一篇： CSS 基本样式