Bootstrap 表單控件一（單行輸入框input，下拉選擇框select ，文本域textarea）

 

單行輸入框，常見的文本輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式，因為Bootstrap框架都是通過input[type=“?”](其中?號代表type類型，比如說text類型，對應的是input[type=“text”])的形式來定義樣式的。

為了讓控件在各種表單風格中樣式不出錯，需要添加類名“form-control”，如：

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>
運行的結果

表單控件(下拉選擇框select)

Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設置multiple屬性的值為multiple。Bootstrap框架會為這些元素提供統一的樣式風格。

 

<form role="form">
<div class="form-group">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  </div>
  <div class="form-group">
  <select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>
</form>

運行結果 ：

表單控件(文本域textarea)

文本域和原始使用方法一樣，設置rows可定義其高度，設置cols可以設置其寬度。但如果textarea元素中添加了類名“form-control”類名，則無需設置cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>