Bootstrap基礎(chǔ)表單

Bootstrap對基礎(chǔ)表單未做太多的定制化效果設(shè)計(jì)，默認(rèn)都使用全局設(shè)置，只是對表單內(nèi)的fieldset、legend、label標(biāo)簽進(jìn)行了設(shè)定，將這些元素的margin、padding、border等進(jìn)行了細(xì)化設(shè)置。詳細(xì)請參考源碼1854行以后的代碼。

如果在select、input、textarea元素上應(yīng)用了.form-control樣式，顯示的寬度會變成100%，并且placeholder的顏色都設(shè)置成了#999999。主要源碼如下：
// 源碼1689行
.form-control {
  display: block;
  width: 100%;    /* 設(shè)置寬度是100% */
  /* 省略部分設(shè)置 */
  border: 1px solid #ccc;  /* 邊框設(shè)置 */
  border-radius: 4px;   /* 圓角設(shè)置*/
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #66afe9;   /* 作用域得到焦點(diǎn)時的邊框顏色*/
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,
      233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,
              233, .6);
}
.form-control:-moz-placeholder {  color: #999;
      /* placeholder的文本顏色:moz瀏覽器*/}
.form-control::-moz-placeholder {  color: #999;
    /* placeholder的文本顏色:moz瀏覽器*/  opacity: 1;}
.form-control:-ms-input-placeholder {  color: #999;
      /* placeholder的文本顏色:IE瀏覽器*/}
.form-control::-webkit-input-placeholder {  color: #999;
      /* placeholder的文本顏色:webkit瀏覽器*/}


使用方式如下：
    <form>
       <fieldset>
         <legend>用戶登錄</legend>
         <div class="form-group">
             <label>登錄賬戶</label>
             <input type="email" class="form-control" placeholder="請輸入你
                 的用戶名或Email">
         </div>
         <div class="form-group">
             <label>密碼</label>
             <input type="text" class="form-control" placeholder="請輸入你的密碼">
         </div>
         <div class="checkbox">
             <label><input type="checkbox">記住密碼</label>
         </div>
         <button type="submit" class="btn btn-default">登錄</button>
       </fieldset>
    </form>