Bootstrap-表單控件大小和狀態

1、表單控件大小

可以通過設置控件height、line-height、padding和font-size等屬性實現控件高度的設置。

bootstrap中對input、textarea和select控件使用兩個類名來控制大小，但是都需要“form-control”維持基本樣式：

     input-sm：讓控件比正常更小；

     input-lg：讓控件比正常更大。

源碼：

.input-sm {height: 30px;padding: 5px 10px;font-size: 12px;line-height: 1.5;border-radius: 3px;}
select.input-sm {height: 30px;line-height: 30px;}
textarea.input-sm,
select[multiple].input-sm {height: auto;}
.input-lg {height: 46px;padding: 10px 16px;font-size: 18px;line-height: 1.33;border-radius: 6px;}
select.input-lg {height: 46px;line-height: 46px;}
textarea.input-lg,
select[multiple].input-lg {height: auto;}

用法1：只對控件高度進行處理。

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件變大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件變小">

用法2：若需對寬度也進行處理則藉助bootstrap框架的網格系統，類名添加在容器上

<form class="form-horizontal">
    <div class="form-group">
      <div class="col-xs-4">
        <input class="form-control input-lg" type="text" placeholder="col-xs-4" >
      </div>
      <div class="col-xs-4">
        <input class="form-control" type="text" placeholder="col-xs-4" >
      </div>
      <div class="col-xs-4">
        <input class="form-control input-sm" type="text" placeholder="col-xs-4" >
      </div>
    </div>    
</form>

 注：這裏的form-group相當於網格系統中的row，如果沒有“.form-group”，則需要用<div class="row"></div>代替<div class="form-group"></div>

2、表單控件的焦點狀態（通過僞類“:focus”來實現）

源碼：

.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);}

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;}

用法：給控件input、textarea、select添加類名“form-control”；針對file、radio、checkbox在焦點下也做了一些處理

3、表單控件的禁用狀態（給相應控件添加disabled）

源碼：

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {cursor: not-allowed;background-color: #eee;opacity: 1;}

用法1：有form-control存在時

<input class="form-control" type="text" placeholder="禁用" disabled />

用法2：無form-control存在時，不會出現不準輸入的形狀

用法3：若fieldset設置了disable屬性，整個域都處於禁用狀態

<form>
   <fieldset disabled></fieldset>
</form>

用法4：處於禁用的整個域中，若legend中有輸入框，輸入框是無法被禁用的（但是也會出現禁用圖標）

<form>
   <fieldset disabled>
      <legend><input type="text" class="form-control" placeholder="我怎麼沒被禁用呢"></legend>
   </fieldset>
</form>

4、表單控件的驗證狀態

bootstrap中提供了三種效果：

.has-warning:警告狀態（黃色）
.has-error：錯誤狀態（紅色）
.has-success：成功狀態（綠色）

用法1：直接在form-group容器上添加相應的狀態類名（注：需要給label添加類名control-label可以讓label標籤裏的內容同步變色）

<form>
    <div class="form-group has-error">
        <label class="control-label" for="email1">email地址</label>
        <input type="email" class="form-control" id="email1" />
    </div>
</form>

用法2：可以讓表單在相應狀態下顯示icon，只需在對應狀態下添加類名“.has-feedback”

<form>
    <div class="form-group has-error has-feedback">
        <label class="control-label" for="email1">email地址</label>
        <input type="email" class="form-control" id="email1" />
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
</form>

  注：類名“.has-feedback”必須與has-warning等在一起；必須在表單中添加<span class="glyphicon glyphicon-remove form-control-feedback"></span>

用法3：提供不同的提示信息，使用了".help-block”樣式，將顯示信息以塊狀顯示，且顯示在控件底部

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功狀態</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
  <span class="help-block">你輸入的信息是正確的</span>
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
  …
</form>

".help-block”樣式源碼：

.help-block {display: block;margin-top: 5px;margin-bottom: 10px;color: #737373;}

用法4：在2.0版本提供和行內提示信息，使用類名“.help-inline”，讓提示信息顯示在控件同一水平顯示

".help-inline”樣式源碼：

.help-inline{display:inline-block;padding-left:5px; color: #737373;}

若在3.0版本中有該需求，可以給樣式中增加源碼，或者利用網格佈局

<form role="form">
  <div class="form-group">
    <label class="control-label" for="inputSuccess1">成功狀態</label>
    <div class="row">
      <div class="col-xs-6">
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
      </div>
       <span class="col-xs-6 help-block">你輸入的信息是正確的</span>
    </div>
  </div> 
</form>