Bootstrap如何改变表单控件大小和状态

前端之家收集整理的这篇文章主要介绍了Bootstrap如何改变表单控件大小和状态前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

《Bootstrap如何改变表单控件大小和状态》要点:
本文介绍了Bootstrap如何改变表单控件大小和状态,希望对您有用。如果有疑问,可以联系我们。

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>

猜你在找的CSS相关文章