進(jìn)入郵箱
效果如下：
看到上圖效果你有沒(méi)有發(fā)現(xiàn)代碼里明明有l(wèi)abel標(biāo)簽，且沒(méi)放在容器.form-group中，input也不會(huì)換行，更奇怪的是label標(biāo)簽的內(nèi)容居然沒(méi)有顯示出來(lái)！其實(shí)仔細(xì)一看label標(biāo)簽是添加了類名.sr-only，就是它將label給隱藏起來(lái)了，來(lái)看看它的源碼：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
} 既然添加了label標(biāo)簽，又添加.sr-only類名把label給隱藏起來(lái)，是不是多此一舉？？？但這恰恰是bootstrap框架的一個(gè)優(yōu)點(diǎn)，如果沒(méi)有為輸入控件設(shè)置label，屏幕閱讀器將無(wú)法正確識(shí)別，同時(shí)也為殘障人員進(jìn)行了一定的考慮
水平表單
在bootstrap中實(shí)現(xiàn)水平表單效果需滿足下面兩個(gè)條件：
1、在form元素上使用類名.form-horizontal
2、配合bootstrap框架的網(wǎng)格系統(tǒng)（詳細(xì)：詳解Bootstrap網(wǎng)格系統(tǒng)）
在form元素使用類名.form-horizontal主要有以下幾個(gè)作用：
1、設(shè)置表單控件padding和margin值
2、改變.from-group的表現(xiàn)形式，類似于網(wǎng)格系統(tǒng)的row
css源碼：
.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;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 27px;
}
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
.form-horizontal .form-control-static {
padding-top: 7px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
}
}
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
} 例子:
郵箱
密碼
記住密碼
進(jìn)入郵箱
效果如下：
單行輸入框
在bootstrap中使用input時(shí)也必須添加type類型，如果沒(méi)有指定type類型，將無(wú)法得到正確的樣式，因?yàn)閎ootstrap框架都是通過(guò)input[type=”?”]的形式來(lái)定義樣式的，如：text類型，對(duì)應(yīng)得是input[type=”text”]
為了讓控件在各種表單風(fēng)格中樣式不錯(cuò)，需要添加類名.form-control
下拉選擇框select
多行選擇設(shè)置multiple屬性的值為multiple
1
2
3
4
5
1
2
3
4
5
文本域textarea
文本域和原始使用方法一樣，設(shè)置rows可定義其高度，設(shè)置cols可以定義其寬度，如果textarea元素中添加了類名.form-control,則無(wú)需設(shè)置cols屬性，因?yàn)閎ootstrap框架中.form-control樣式的標(biāo)的空間寬度為100%或auto
復(fù)選框checkbox和單選框radio
checkbox和radio與label標(biāo)簽配合使用會(huì)出現(xiàn)一些小問(wèn)題（如對(duì)齊問(wèn)題）
1、不管是checkbox還是radio都使用label包起來(lái)了
2、checkbox連同label標(biāo)簽放在一個(gè)名為.checkbox的容器內(nèi)
3、radio連同label標(biāo)簽放在一個(gè)名為.radio的容器內(nèi),bootstrap主要借助.checkbox和.radio樣式來(lái)處理復(fù)選框、單選按鈕與標(biāo)簽的對(duì)齊方式
.radio,
.checkbox {
display: block;
min-height: 20px;
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
display: inline;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
} 復(fù)選框和單選按鈕水平排列
1、如果checkbox需要水平排列，只需要在label標(biāo)簽上添加類名.checkbox-inline
2、如果radio需要水平排列，只需在label標(biāo)簽上添加類名.radion-inline
下面是css源碼：
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
男性
女性
中性
表單控件狀態(tài)
1、焦點(diǎn)狀態(tài)：
焦點(diǎn)狀態(tài)是通過(guò)偽類：focus來(lái)實(shí)現(xiàn)的，bootstrap表單控件中的焦點(diǎn)狀態(tài)刪除了outline的默認(rèn)樣式，重新添加陰影效果，下面是css源碼：
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
} 從源碼中可以看出，要讓控件在焦點(diǎn)狀態(tài)下有上面的樣式效果需要給控件添加類名.form-control
file、radio、checkbox控件在焦點(diǎn)狀態(tài)下的效果也與普通的input控件不太一樣，下面是源碼
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
} 2、禁用狀態(tài)：
在相應(yīng)得表單控件上添加屬性disabled即可，下面是css源碼：
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
} 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;
} 例子：
如果fieldset設(shè)置了disabled屬性，整個(gè)域都會(huì)處于被禁用狀態(tài)
例子：
輸入框已禁用
下拉框已禁用
1
2
3
4
選項(xiàng)框被禁用了
提交
效果如下：（鼠標(biāo)移上去的時(shí)候出現(xiàn)禁用的圖標(biāo)，這里是直接截的圖看不到這個(gè)效果）
3、驗(yàn)證狀態(tài)
bootstrap提供下面這幾種效果：
1）、.has-warning:警告狀態(tài) 黃色
2）、 .has-error :錯(cuò)誤狀態(tài) 紅色
3）、 .has-success:成功狀態(tài) 綠色
使用的時(shí)候只需在form-group容器上對(duì)應(yīng)添加狀態(tài)類名，三種狀態(tài)下效果都是一樣的，只是顏色不一樣而已
例子：
效果如下：
有時(shí)候，在表單驗(yàn)證的時(shí)不同的狀態(tài)會(huì)提供不同的icon，如果要在對(duì)應(yīng)的狀態(tài)下顯示icon出來(lái)，只需要在對(duì)應(yīng)的狀態(tài)下添加類名.has-feedback ,注意它要和.has-error,.has-success,.has-warning一起使用。
bootstrap的小圖標(biāo)都是使用@font-face來(lái)制作的。如：
例子：
效果如下：
表單提示信息
一般在制作表單驗(yàn)證時(shí)，需要提供不同的提示信息，在bootstrap框架中使用.help-block，將提示信息以塊狀顯示，并且顯示在控件底部
下面是css源碼：
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
} 例子：
效果如下：
如果不想為bootstrap.css增加自己的代碼，而且設(shè)計(jì)又有這種需要，可以借助bootstrap的網(wǎng)格系統(tǒng),例如：
成功狀態(tài)
你輸入的信息是正確的
感謝你的閱讀，希望你對(duì)“Bootstrap學(xué)習(xí)之常用表單組件有哪些”這一關(guān)鍵問(wèn)題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
http://weahome.cn/article/jjcpio.html
在線咨詢
微信咨詢
電話咨詢
028-86922220（工作日）
18980820575（7×24）
提交需求
返回頂部
重慶分公司
重慶分公司
