bootstrap -- css -- 表单控件
若干css樣式
.form-control { display: block;width: 100%;height: 34px;padding: 6px 12px;font-size: 14px;line-height: 1.428571429;color: #555555;vertical-align: middle; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
}
}
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
}
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.form-control-static {
margin-bottom: 0;
}
.form-horizontal .form-control-static {
padding-top: 7px;
}
?
input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
?
?
?
input(輸入框)
Bootstrap 提供了對所有原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel?和?color。適當(dāng)?shù)?type?聲明是必需的，這樣才能讓?input?獲得完整的樣式。
<!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 輸入框</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body><form role="form"><div class="form-group"><label for="name">標(biāo)簽</label><input type="text" class="form-control" placeholder="文本輸入"> <!-- placeholder:默認(rèn)寫入input中的文本 --></div></form>?
textarea(文本框)
多行輸入的時(shí)，可以使用文本框 textarea。必要時(shí)可以改變?rows?屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）。
<style></style> <form role="form"><div class="form-group"><label for="name">文本框</label><textarea class="form-control" rows="3"></textarea></div> </form>
?
復(fù)選框（（Checkbox）和單選框（Radio）
對一系列復(fù)選框和單選框使用?.checkbox-inline?或?.radio-inline?class，控制它們顯示在同一行上。
<style></style>
<body><label for="name">默認(rèn)的復(fù)選框和單選按鈕的實(shí)例</label> <div class="checkbox"><label><input type="checkbox" value="">選項(xiàng) 1</label> </div> <div class="checkbox"><label><input type="checkbox" value="">選項(xiàng) 2</label> </div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 選項(xiàng) 1</label> </div> <div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">選項(xiàng) 2 - 選擇它將會取消選擇選項(xiàng) 1</label> </div> <label for="name">內(nèi)聯(lián)的復(fù)選框和單選按鈕的實(shí)例</label> <div><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 選項(xiàng) 1</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2"> 選項(xiàng) 2</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="option3"> 選項(xiàng) 3</label><label class="checkbox-inline"><input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 選項(xiàng) 1 </label> <label class="checkbox-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 選項(xiàng) 2 </label> </div> </body>
?
選擇框（Select）
用 <select> 展示列表選項(xiàng)，通常是那些用戶很熟悉的選擇列表，比如州或者數(shù)字。
用?multiple="multiple"?允許用戶選擇多個(gè)選項(xiàng)。
<form role="form"><div class="form-group"><label for="name">選擇列表</label><select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select><label for="name">可多選的選擇列表</label><select multiple class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div> </form>?
靜態(tài)控件
當(dāng)需要在一個(gè)水平表單內(nèi)的表單標(biāo)簽后放置純文本時(shí)，請?jiān)?<p> 上使用 class?.form-control-static。
<form class="form-horizontal" role="form"><div class="form-group"><label class="col-sm-2 control-label">Email</label><div class="col-sm-10"><p class="form-control-static">email@example.com</p></div></div><div class="form-group"><label for="inputPassword" class="col-sm-2 control-label">密碼</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword" placeholder="請輸入密碼"></div></div> </form>?
?
表單控件狀態(tài)
除了?:focus?狀態(tài)（即，用戶點(diǎn)擊 input 或使用 tab 鍵聚焦到 input 上），Bootstrap 還為禁用的輸入框定義了樣式，并提供了表單驗(yàn)證的 class。
輸入框焦點(diǎn)
當(dāng)輸入框 input 接收到?:focus?時(shí)，輸入框的輪廓會被移除，同時(shí)應(yīng)用?box-shadow。
禁用的輸入框 input
如果您想要禁用一個(gè)輸入框 input，只需要簡單地添加?disabled?屬性，這不僅會禁用輸入框，還會改變輸入框的樣式以及當(dāng)鼠標(biāo)的指針懸停在元素上時(shí)鼠標(biāo)指針的樣式。
禁用的字段集 fieldset
對 <fieldset> 添加 disabled 屬性來禁用 <fieldset> 內(nèi)的所有控件。
驗(yàn)證狀態(tài)
Bootstrap 包含了錯(cuò)誤、警告和成功消息的驗(yàn)證樣式。只需要對父元素簡單地添加適當(dāng)?shù)?class（.has-warning、 .has-error 或 .has-success）即可使用驗(yàn)證狀態(tài)。
has-success：成功消息，綠色
has-warning：警告消息，深橙色
has-error：錯(cuò)誤消息，紅色
<form class="form-horizontal" role="form"><div class="form-group"><label class="col-sm-2 control-label">聚焦</label><div class="col-sm-10"><input class="form-control" id="focusedInput" type="text" value="該輸入框獲得焦點(diǎn)..."></div></div><div class="form-group"><label for="inputPassword" class="col-sm-2 control-label">禁用</label><div class="col-sm-10"><input class="form-control" id="disabledInput" type="text" placeholder="該輸入框禁止輸入..." disabled></div></div><fieldset disabled><div class="form-group"><label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入（Fieldset disabled）</label><div class="col-sm-10"><input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"></div></div><div class="form-group"><label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單（Fieldset disabled）</label><div class="col-sm-10"><select id="disabledSelect" class="form-control"><option>禁止選擇</option></select></div></div></fieldset><div class="form-group has-success"><label class="col-sm-2 control-label" for="inputSuccess">輸入成功</label><div class="col-sm-10"><input type="text" class="form-control" id="inputSuccess"></div></div><div class="form-group has-warning"><label class="col-sm-2 control-label" for="inputWarning">輸入警告</label><div class="col-sm-10"><input type="text" class="form-control" id="inputWarning"></div></div><div class="form-group has-error"><label class="col-sm-2 control-label" for="inputError">輸入錯(cuò)誤</label><div class="col-sm-10"><input type="text" class="form-control" id="inputError"></div></div> </form>?
表單控件大小
?.input-lg：設(shè)置表單控件的高度
?.col-lg-*：設(shè)置表單的寬度
<form role="form"><div class="form-group"><input class="form-control input-lg" type="text" placeholder=".input-lg"></div><div class="form-group"><input class="form-control" type="text" placeholder="默認(rèn)輸入"></div><div class="form-group"><input class="form-control input-sm" type="text" placeholder=".input-sm"></div><div class="form-group"></div><div class="form-group"><select class="form-control input-lg"><option value="">.input-lg</option></select></div><div class="form-group"><select class="form-control"><option value="">默認(rèn)選擇</option></select></div><div class="form-group"><select class="form-control input-sm"><option value="">.input-sm</option></select></div><div class="row"><div class="col-lg-2"><input type="text" class="form-control" placeholder=".col-lg-2"></div><div class="col-lg-3"><input type="text" class="form-control" placeholder=".col-lg-3"></div><div class="col-lg-4"><input type="text" class="form-control" placeholder=".col-lg-4"></div></div> </form>?
表單幫助文本
Bootstrap 表單控件可以在輸入框 input 上有一個(gè)塊級幫助文本。為了添加一個(gè)占用整個(gè)寬度的內(nèi)容塊，請?jiān)?<input> 后使用?.help-block
<form role="form"><span>幫助文本實(shí)例</span><input class="form-control" type="text" placeholder=""><span class="help-block">一個(gè)較長的幫助文本塊，超過一行，需要擴(kuò)展到下一行。本實(shí)例中的幫助文本總共有兩行。</span> </form>?
轉(zhuǎn)載于:https://www.cnblogs.com/hf8051/p/4468644.html
總結(jié)
以上是生活随笔為你收集整理的bootstrap -- css -- 表单控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据中心两种常用流量模型运用minine
- 下一篇： 位置宽度的ul居中