前面看到的表单控件都正常的大小。可以通过设置控件的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>
时间: 2024-10-19 08:21:21