表單主要功能是用來與用戶做交流的一個網(wǎng)頁控件,良好的表單設(shè)計能夠讓網(wǎng)頁與用戶更好的溝通。表單中常見的元素主要包括:文本輸入框、下拉選擇框、單選按鈕、復(fù)選按鈕、文本域和按鈕等。其中每個控件所起的作用都各不相同,而且不同的瀏覽器對表單控件渲染的風(fēng)格都各有不同。
同樣,表單也是Bootstrap框架中的核心內(nèi)容,下面向大家介紹Bootstrap框架中表單的制作。
表單源碼查詢
Bootstrap框架的表單,其源碼占據(jù)了大量的代碼,同樣的,根據(jù)不同的Bootstrap版本,你可以輕松獲取相應(yīng)的源碼:
? LESS版本:對應(yīng)源文件 forms.less
? ? Sass版本:對應(yīng)源文件 _forms.scss
編譯后的Bootstrap版本,可以查閱bootstrap.css文件第1630行~第1991行
不過在樣式表中,還對表單做了一些初始化,詳細(xì)代碼可以查閱bootstrap.css文件第110行~第178行。
對于基礎(chǔ)表單,Bootstrap并未對其做太多的定制性效果設(shè)計,僅僅對表單內(nèi)的fieldset、legend、label標(biāo)簽進(jìn)行了定制。如:
/*源碼請查閱bootstrap.css文件第1631行~第1652行*/
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
}
主要將這些元素的margin、padding和border等進(jìn)行了細(xì)化設(shè)置。
當(dāng)然表單除了這幾個元素之外,還有input、select、textarea等元素,在Bootstrap框架中,通過定制了一個類名`form-control`,也就是說,如果這幾個元素使用了類名“form-control”,將會實(shí)現(xiàn)一些設(shè)計上的定制效果。
1、寬度變成了100%
2、設(shè)置了一個淺灰色(#ccc)的邊框
3、具有4px的圓角
4、設(shè)置陰影效果,并且元素得到焦點(diǎn)之時,陰影和邊框效果會有所變化
5、設(shè)置了placeholder的顏色為#999
詳細(xì)請查閱bootstrap.css文件第1690行~第1732行。
運(yùn)行效果如下或查看右側(cè)結(jié)果窗口:
本小節(jié)沒有代碼任務(wù),單擊“提交”按鈕進(jìn)行下一個小節(jié)學(xué)習(xí)。
請驗(yàn)證,完成請求
由于請求次數(shù)過多,請先驗(yàn)證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報