Bootstrap系列 -- 18. 表单控件大小
2015-06-25 08:14
597 查看
前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:
1. input-sm:让控件比正常大小更小
2. input-lg:让控件比正常大小更大
这两个类适用于表单中的input,textarea和select控件
1. input-sm:让控件比正常大小更小
2. input-lg:让控件比正常大小更大
这两个类适用于表单中的input,textarea和select控件
<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>
相关文章推荐
- Bootstrap-Datatable学习笔记整理第1节
- Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio
- Bootstrap系列 -- 16. 文本域textarea
- bootstrap小技巧
- Bootstrap系列 -- 15. 下拉选择框select
- Bootstrap系列 -- 14. 表单控件输入框input
- Bootstrap系列 -- 13. 内联表单
- Bootstrap系列 -- 12. 水平表单
- Bootstrap系列 -- 11. 基础表单
- piwik学习2(bootstrap.php)
- Bootstrap 分页插件 ajax获取数据显示
- 三石推荐!把 Bootstrap 小清新带回家!
- Bootstrap3多级导航菜单
- 使用bootstrap时遇到的问题及解决办法
- Bootstrap系列 -- 10. 网格布局
- bootstrap
- Bootstrap 禁用滚动条
- bootstrap适配IE7,8
- dede分页样式修改(支持bootstrap分页样式)
- bootstrap主题样式替换