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> 

 

相关文章
|
2月前
|
Web App开发 移动开发 前端开发
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
Bootstrap 表单样式-水平排列
Bootstrap 表单样式-水平排列
28 0
|
3月前
|
前端开发
Bootstrap 表单样式
Bootstrap 表单样式
19 0
|
11月前
|
前端开发
bootstrap 组件之表单 组件学习总结
bootstrap 组件之表单 组件学习总结
|
前端开发
关于Bootstrap 表格样式及表单布局的设置
讲解bootstrap、表格样式、表单布局、Bootstrap 实现表格样式、表单布局等。
231 0
关于Bootstrap 表格样式及表单布局的设置
|
前端开发 JavaScript Python
Bootstrap学习笔记1--表单样式
最近感觉学Python有点懵了,想想前端的技能一直比较弱,又偷懒的不愿意一项项仔细去学。 思来想去,还是简单的前台框架吧 --> Bootstrap
107 0
|
移动开发 前端开发 信息无障碍
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(3)
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
191 0
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(3)
|
前端开发
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(2)
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
171 0
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(2)
|
前端开发 容器
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(1)
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
134 0
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(1)
|
移动开发 前端开发 HTML5
Bootstrap教程(9)--使用表单控件
本文目录 1. 概述 2. 基本输入控件 3. 调整表单控件的大小 4. 表单控件的特殊用法 4.1 单选框用法 4.2 复选框用法 5. 小结
155 0
Bootstrap教程(9)--使用表单控件
相关产品
云迁移中心
推荐文章
更多