《Bootstrap如何改變表單控件大小和狀態》要點：
本文介紹了Bootstrap如何改變表單控件大小和狀態，希望對您有用。如果有疑問，可以聯系我們。

相關主題：CSS2和CSS3特效

1、表單控件大小

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

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

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

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

用法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框架的網格系統，類名添加在容器上

<span style="color:#000000;"><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></span>

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

轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/178.html