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

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>

select:

多行選擇設置multiple屬性的值為multiple。Bootstrap框架會為這些元素提供統一的樣式風格。如：

<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>

設置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>

1、不管是checkbox還是radio都使用label包起來了

2、checkbox連同label標簽放置在一個名為“.checkbox”的容器內

3、radio連同label標簽放置在一個名為“.radio”的容器內
<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">

記住密碼
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜歡
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜歡
</label>
</div>
</form>

表單提示信息

平常在制作表單驗證時，要提供不同的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式，將提示信息以塊狀顯示，並且顯示在控件底部。

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功狀態</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
  <span class="help-block">你輸入的信息是正確的</span>
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>

定制風格

<button class="btn" type="button">基礎按鈕.btn</button>
<button class="btn btn-default" type="button">默認按鈕.btn-default</button>
<button class="btn btn-primary" type="button">主要按鈕.btn-primary</button>
<button class="btn btn-success" type="button">成功按鈕.btn-success</button>

<button class="btn btn-warning" type="button">警告按鈕.btn-warning</button>
<button class="btn btn-info" type="button">危險按鈕.btn-danger</button>
<button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>
<button class="btn btn-danger" type="button">鏈接按鈕.btn-link</button>

<button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button>
<button class="btn btn-primary" type="button">正常按鈕</button>
<button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button>

Bootstrap學習筆記(四)表單input