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

賀臣發表於2015-06-25
boot控制元件

 

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

 

相關文章