正文

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

IP云
IP云V管理员/7 阅读
08/04
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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>