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

 

　　前面看到的表單控件都正常的大小。可以通過設置控件的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>