Bootstrap系列 -- 18. 表单控件大小

简介:   前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。

 

  前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,paddingfont-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:

 

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

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

 

  这两个类适用于表单中的inputtextareaselect控件

 

<h1>案例1</h1>
<form role="form">
  <div class="form-group">
    <label class="control-label">控件变大</label>
    <input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大">
  </div>
  <div class="form-group">
    <label class="control-label">正常大小</label>
    <input class="form-control" type="text" placeholder="正常大小">
  </div>  
  <div class="form-group">
    <label class="control-label">控件变小</label>
    <input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">
</div> 

 

相关文章
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap表单
Bootstrap表单
N..
64 0
|
前端开发 JavaScript 数据安全/隐私保护
Bootstrap 表单样式-水平排列
Bootstrap 表单样式-水平排列
70 0
|
6月前
|
JavaScript 前端开发
Bootstrap-Switch开关控件使用指南
Bootstrap-Switch开关控件使用指南
|
5月前
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
33 0
|
6月前
|
前端开发 JavaScript 容器
Bootstrap 5 保姆级教程(十五):表单
Bootstrap 5 保姆级教程(十五):表单
|
6月前
|
前端开发
BootStrap让两个控件在一行显示(label和input同行)
BootStrap让两个控件在一行显示(label和input同行)
412 0
|
Web App开发 移动开发 前端开发
|
前端开发
Bootstrap 表单样式
Bootstrap 表单样式
42 0
开心档 - 软件开发入门之 Bootstrap4 自定义表单
Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
|
移动开发 前端开发 HTML5
开心档 - 软件开发入门之 Bootstrap4 表单控件
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。