表單主要功能是用來與用戶做交流的一個網(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é)果窗口：