bootstrap——css樣式（四、表單）

1、表單基本用法

class	描述
.form-control	input、textarea 和 select 元素都將被默認設置寬度屬性爲 width: 100%;
.form-group	將 label 元素和控件包裹在一起，實現很好的排列

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

---

2、內聯表單

爲 form 元素添加 .form-inline 類可使其內容左對齊並且表現爲 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。
一定要添加 label 標籤
如果你沒有爲每個輸入控件設置 label 標籤，屏幕閱讀器將無法正確識別。對於這些內聯表單，你可以通過爲 label 設置 .sr-only 類將其隱藏。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

---

3、水平排列的表單

通過爲表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，可以將 label 標籤和控件組水平並排佈局。這樣做將改變 .form-group 的行爲，使其表現爲柵格系統中的行（row），因此就無需再額外添加 .row 了。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

---

4、輸入框

包括大部分表單控件、文本輸入域控件，還支持所有 HTML5 類型的輸入控件：
text、password、number、email、url、search、tel
datetime、datetime-local、date、month、time、week
color

<input type="text" class="form-control" placeholder="Text input">

---

5、文本域

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

---

6、單選框

<div class="radio">
    <label>
        <input type="radio" checked/> 
        this one is checked
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio"/>
        this one is can be checked
    </label>
</div>
<div class="radio disabled">
    <label>
        <input type="radio" disabled/>
        this one is disabled
    </label>
</div>

---

7、多選框

<div class="checkbox">
    <label>
        <input type="checkbox" checked/> 
        this one is checked
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" />
        this one is can be checked
    </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" disabled />
        this one is disabled
    </label>
</div>

---

8、內聯單選和多選框

通過將 .checkbox-inline 或 .radio-inline 類應用到一系列的多選框（checkbox）或單選框（radio）控件上，可以使這些控件排列在一行。

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

---

9、下拉列表

使用默認選項或添加 multiple 屬性可以同時顯示多個選項。

Copy
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

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

---

10、靜態控件

如果需要在表單中將一行純文本和 label 元素放置於同一行，爲

元素添加 .form-control-static 類即可。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

---

11、被禁用的輸入框

爲輸入框設置 disabled 屬性可以防止用戶輸入，並能對外觀做一些修改，使其更直觀。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

---

12、被禁用的 fieldset

爲fieldset設置 disabled 屬性,可以禁用 fieldset 中包含的所有控件。

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

---

13、只讀輸入框

爲輸入框設置 readonly 屬性可以禁止用戶輸入，並且輸入框的樣式也是禁用狀態。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

---

14、添加額外的圖標

你還可以針對校驗狀態爲輸入框添加額外的圖標。只需設置相應的 .has-feedback 類並添加正確的圖標即可。

圖標、label 和輸入控件組
對於不帶有 label 標籤的輸入框以及右側帶有附加組件的輸入框組，需要手動爲其圖標定位。爲了讓所有用戶都能訪問你的網站，我們強烈建議爲所有輸入框添加 label 標籤。如果你不希望將 label 標籤展示出來，可以通過添加 sr-only 類來實現。如果的確不能添加 label 標籤，請調整圖標的 top 值。對於輸入框組，請根據你的實際情況調整 right 值。

<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

<form class="form-horizontal" role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="inputSuccess3">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
    </div>
</form>

<form class="form-inline" role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess4">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess4">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
</form>

---

15、控件尺寸

通過 .input-lg 類似的類可以爲控件設置高度，通過 .col-lg-* 類似的類可以爲控件設置寬度。

1）高度尺寸
.input-lg
.input-md
.input-sm
.input-xs

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

2）水平排列的表單組的尺寸

.form-group-lg
.form-group-md
.form-group-sm
.form-group-xs

<div class="form-group form-group-lg">
  <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
  <div class="col-sm-10">
    <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
  </div>
</div>

---

16、輔助文本

<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>