表單控件大小

前面看到的表單控件都正常的大小。可以通過設置控件的height,line-height,padding和font-size等屬性來實現控件的高度設置。不過Bootstrap框架還提供了兩個不同的類名,用來控制表單控件的高度。這兩個類名是:
1、input-sm:讓控件比正常大小更小
2、input-lg:讓控件比正常大小更大
這兩個類適用於表單中的input,textarea和select控件,具體使用如下:
<input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件變大">
<
<input class="form-control" type="text" placeholder="正常大小">
<
<input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件變小">


不管是“input-sm”還是“input-lg”僅對控件高度做了處理。但往往很多時候,我們需要控件寬度也要做一定的變化處理。這個時候就要借住Bootstrap框架的網格系統。所以你要控制表單寬度,可以像下面這樣使用:
<form role="form" class="form-horizontal">

  <div class="form-group">

  <div class="col-xs-4">

    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">

  </div>

  <div class="col-xs-4">

    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">

  </div>

  <div class="col-xs-4">

    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">

  </div>

  </div>

    …
<
</form>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章