6g下载网
当前位置: 主页 > 软件教程 > 编程开发 >

Bootstrap如何控制表单控件大小?Bootstrap控制表单控件大小方法

时间: 2016-09-07 13:28 来源: 6g下载网

分享到:

今天小编整理一篇Bootstrap如何控制表单控件大小?Bootstrap控制表单控件大小方法的文章和大家分享,希望能给大家提供帮助。

问题分析:

可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:

1、input-sm:让控件比正常大小更小

2、input-lg:让控件比正常大小更大

这两个类适用于表单中的input,textarea和select控件。

Bootstrap控制表单控件大小方法源代码:

  1. <form role="form"> 
  2.   <div class="form-group"> 
  3.     <label class="control-label">控件变大</label> 
  4.     <input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大"> 
  5.   </div> 
  6.   <div class="form-group"> 
  7.     <label class="control-label">正常大小</label> 
  8.     <input class="form-control" type="text" placeholder="正常大小"> 
  9.   </div>    
  10.   <div class="form-group"> 
  11.     <label class="control-label">控件变小</label> 
  12.     <input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小"> 
  13.   </div>   
  14. </form>  

Bootstrap控制表单控件大小方法效果图:

Bootstrap如何控制表单控件大小?Bootstrap控制表单控件大小方法

Bootstrap如何控制表单控件大小?Bootstrap控制表单控件大小方法的文章和大家分享结束,感谢阅读!

(责任编辑:6g下载网)
标签:Bootstrap 表单

分享到:

------分隔线----------------------------