Bootstrap之表單

基礎表單

表單中常見的元素主要包括： 文本輸入框、 下拉選擇框、單選按鈕、復選按鈕、 文本域和 按鈕等。

 

當然表單除了這幾個元素之外，還有input、select、textarea等元素，在Bootstrap框架中，通過定制了一個類名`form-control`，也就是說，如果這幾個元素使用了類名“form-control”，將會實現一些設計上的定制效果。

1、寬度變成了100%

2、設置了一個淺灰色（#ccc）的邊框

3、具有4px的圓角

4、設置陰影效果，並且元素得到焦點之時，陰影和邊框效果會有所變化

5、設置了placeholder的顏色為#999

注意：類名“ .form-control”是添加在 input、select上面的。只控制輸入框的樣式。

注意：當 input 的類型是 checkbox 或者 radio 時，<label> 是包裹住了 <input> 的>。

 

水平表單

Bootstrap框架默認的表單是垂直顯示風格，但很多時候我們需要的水平表單風格（標簽居左，表單控件居右）見下圖。

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
  <div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="請輸入您的郵箱地址">
  </div>
</div>

從上面可以看出水平表單的使用方法：

1. 為 form 增添 .form-horizontal 類。

2. 用一個 div.form-group 包裹 label 和 input

3. 為 label 增添 .col-sm-2 .control-label

4. 用一個 .col-sm-10 的div 包裹 input

5. 為 input 增添 form-control 類

 

 

在<form>元素上使用類名“form-horizontal”主要有以下幾個作用：
1、設置表單控件padding和margin值。
2、改變“form-group”的表現形式，類似於網格系統的“row”。

 

內聯表單

有時候我們需要將表單的控件都在一行內顯示，類似這樣的：

 

 

只需要在<form>元素中添加類名“form-inline”即可。

 

如果你要在input前面添加一個label標簽時，會導致input換行顯示。如果你必須添加這樣的一個label標簽，並且不想讓input換行，你需要將label標簽也放在div容器“form-group”中，如：

 

<form class="form-inline" role="form">
<div class="form-group">
  <label class="sr-only" for="exampleInputEmail2">郵箱</label>
  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="請輸入你的郵箱地址">
</div>

 

你或許會問，為什么添加了label標簽，而且沒有放置在”form-group”這樣的容器中，input也不會換行；還有label標簽沒顯示出來。如果你仔細看，在label標簽運用了一個類名“sr-only”，標簽沒顯示就是這個樣式將標簽隱藏了。

 

注意：那么Bootstrap為什么要這么做呢？這樣不是多此一舉嗎？其實不是的，如果沒有為輸入控件設置label標簽， 屏幕閱讀器將無法正確識別。這也是Bootstrap框架另一個優點之處，為殘障人員進行了一定的考慮。

 

除了checkbox和radio，每一個表單控件都用一個 div.form-group 包裹？

另外，對於內聯的 input checkbox radio 一個div.form-group 就包裹了所有要內聯的表單控件？

 

表單控件（輸入框input）

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

 

表單控件（下拉選擇select）

Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設置 multiple屬性的值為 multiple。

 

表單控件（文本域textarea）

文本域和原始使用方法一樣，設置 rows可定義其高度，設置 cols可以設置其寬度。但如果 textarea元素中添加了類名“ form-control”類名，則無需設置cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控件寬度為 100%或 auto。所以為 input 增添 .form-control 后框的寬度到瀏覽器邊緣了。可以通過增添 .col-sm-數字 來縮短寬度？ 

 

表單控件（復選框checkbox和單選擇按鈕radio）

Bootstrap框架中checkbox和radio有點特殊，Bootstrap針對他們做了一些特殊化處理，主要是checkbox和radio與label標簽配合使用會出現一些小問題（最頭痛的是對齊問題）。比如下面這樣：

 

因此要采取下面的方法：

1、不管是 checkbox 還是 radio 都使用label包起來了
2、checkbox 連同 label 標簽放置在一個名為“.checkbox”的div容器內 
(2) radio連同label標簽放置在一個名為“.radio”的div容器內
在Bootstrap框架中，主要借助“.checkbox”和“.radio”樣式，來處理復選框、單選按鈕與標簽的對齊方式。

<div class="checkbox">
<label>
<input type="checkbox" value="">
記住密碼
</label>
</div>

 

<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜歡
</label>
</div>

這樣就變成了：

從上面可以看出，對於 checkbox 和 radio 可以這樣做：

1. 用一個 div.checkbox 包裹 label 和 input[type="checkbox"] 或者用一個 .radio 包裹 label 和 input[type="radio"]。

2. 讓 label 包裹住 input[type="checkbox"]  或者 input[type="radio"]。

 

表單控件（復選框和單選框按鈕水平排列）

有時候，為了布局的需要，將復選框和單選按鈕需要水平排列。Bootstrap框架也做了這方面的考慮：
1、如果checkbox需要水平排列，只需要在label標簽上添加類名“checkbox-inline”
2、如果radio需要水平排列，只需要在label標簽上添加類名“radio-inline”

<div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  value="option1">游戲
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">攝影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"  value="option3">旅游
    </label>
  </div>

上面代碼的顯示是：

注意：同樣需要用div把label和input包裹起來，但是這時候div的class不像上面那樣是"checkbox"或者“radio”，而是“form-group”了。

 

<div class="form-group">
    <label>
      <input type="checkbox"  value="option1">游戲
    </label>
    <label>
      <input type="checkbox"  value="option2">攝影
    </label>
    <label>
    <input type="checkbox"  value="option3">旅游
    </label>
  </div>

上面代碼的顯示是：

注意區分不同！后者的 input 沒有 .checkbox-inline

 

表單控件（按鈕）

按鈕也是表單重要控件之一,制作按鈕通常使用下面代碼來實現：

  ☑  input[type=“submit”]

  ☑  input[type=“button”]

  ☑  input[type=“reset”]

  ☑  <button>

在Bootstrap框架中的按鈕都是采用<button>來實現，注意button中也要有 type = "button"。

注意：從上面可以看出 ".btn"都是必須的

 

表單控件大小：

前面看到的表單控件都正常的大小。可以通過設置控件的 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-sm”還是“input-lg”僅對控件高度做了處理。但往往很多時候，我們需要控件寬度也要做一定的變化處理。這個時候就要借住Bootstrap框架的 網格系統。

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

 

表單控件狀態（焦點狀態）

表單狀態的作用：

每一種狀態都能給用戶傳遞不同的信息，比如表單有焦點的狀態可以告訴用戶可以輸入或選擇東西，禁用狀態可以告訴用戶不可以輸入或選擇東西，還有就是表單控件驗證狀態，可以告訴用戶的操作是否正確等。那么在Bootstrap框架中的表單控件也具備這些狀態。

要讓控件在焦點狀態下有上面樣式效果，需要給控件添加類名“form-control”

在Bootstrap框架中， file、 radio和 checkbox控件在焦點狀態下的效果也與普通的input控件不太一樣，主要是因為Bootstrap對他們做了一些特殊處理：

 

表單控件狀態（禁用狀態）

Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的，在相應的表單控件上添加屬性“disabled”。

注意：要讓radio和checkbox默認被選中，是添加屬性"checked"

 

但是對於整個禁用的域中（即在fieldset中設置了disabled），如果legend中有輸入框的話，這個 輸入框是無法被禁用的

<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了，但是我沒被禁用，不信？單擊試一下" /></legend>
    …
</fieldset>
</form>

 

表單控件狀態（驗證狀態）

在制作表單時，不免要做表單驗證。同樣也需要提供驗證狀態樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態（黃色）
2、.has-error：錯誤狀態（紅色）
3、.has-success：成功狀態（綠色）
注意：這個是在form-group容器上對應添加狀態類名的。<label>上加入class="control-label"，同時也會把里面的label字體顏色改變。

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">成功狀態</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
</div>

注意：<label> 沒有包裹住 <input>

 

很多時候，在表單驗證的時候，不同的狀態會提供不同的 icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應的狀態下顯示 icon 出來，只需要在對應的狀態下添加類名“has-feedback”。請注意，此類名要與“has-error”、“has-warning”和“has-success”在一起：

<div class="form-group has-successhas-feedback">
  <label class="control-label" for="inputSuccess1">成功狀態</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>

注意：一定要在表單中添加最后的那個<span>，這個 span 有 3 個類。

表單提示信息

在Bootstrap框架中使用了一個"help-block"樣式，將提示信息以塊狀顯示，並且顯示在控件底部。

<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="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

 

如果想讓提示信息顯示在控件的后面，也就是同一水平顯示，可以借助於Bootstrap的網格系統：

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

 

默認按鈕

Bootstrap框架首先通過基礎類名“.btn”定義了一個基礎的按鈕風格，然后通過“.btn-default”定義了一個默認的按鈕風格。默認按鈕的風格就是在基礎按鈕的風格的基礎上修改了按鈕的 背景顏色、 邊框顏色和 文本顏色。

注意：要同時有.btn 和.btn-default 類

左邊是 .btn，右邊是 .btn .btn-default

 

按鈕多標簽支持

一般制作按鈕除了使用<button>標簽元素之外，還可以使用<input type="submit">和<a>標簽等。同樣，在Bootstrap框架中制作按鈕時，除了剛才所說的這些標簽元素之外，還可以使用在其他的標簽元素上，唯一需要注意的是，要在制作按鈕的標簽元素上添加類名“btn”。如果不添加是不會有任何按鈕效果。

注意：.btn-default也需要加上，不然沒邊框？

 

<button class="btn btn-default" type="button">button標簽按鈕</button>
<input type="submit" class="btnbtn-default" value="input標簽按鈕"/>
<a href="##" class="btn btn-default">a標簽按鈕</a>
<span class="btn btn-default">span標簽按鈕</span>
<div class="btn btn-default">div標簽按鈕</div>

 

注意：雖然在Bootstrap框架中使用任何標簽元素都可以實現按鈕風格，但個人並不建議這樣使用，為了避免瀏覽器兼容性問題，個人強烈建議使用button或a標簽來制作按鈕。

 

定制風格

在Bootstrap框架中不同的按鈕風格都是通過不同的類名來實現，在使用過程中，開發者只需要選擇不同的類名即可：

 

 

使用起來就很簡單，就像前面介紹的默認按鈕一樣的使用方法，只需要 在基礎按鈕“.btn”基礎上追加 對應的類名，就可以得到需要的按鈕風格。

 

按鈕大小

在Bootstrap框架中，對於按鈕的大小，也是可以定制的。類似於input一樣，通過 在基礎按鈕“.btn”的基礎上追加類名來控制按鈕的大小：  .btn-lg   .btn-sm  .btn-xs

 

塊狀按鈕

Bootstrap框架中提供了一個類名“btn-block”。按鈕使用這個類名就可以讓按鈕充滿整個容器，並且這個按鈕不會有任何的 padding和 margin值。

禁用按鈕

和input等表單控件一樣，在Bootstrap框架的按鈕中也具有禁用狀態的設置。禁用狀態與其他狀態按鈕相比，就是背景顏色的透明度做了一定的處理，opcity的值從100%調整為65%。

在Bootstrap框架中，要禁用按鈕有兩種實現方式：

方法1：在標簽中添加disabled屬性

方法2：在元素標簽中添加類名“disabled”

兩者的主要區別是：

“.disabled”樣式不會禁止按鈕的默認行為，比如說提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認行為，則需要通過JavaScript這樣的語言來處理。對於<a>標簽也存在類似問題，如果通過類名“.disable”來禁用按鈕，其鏈接行為是無法禁止。而在元素標簽中添加“disabled”屬性的方法是可以禁止元素的默認行為的。

 

圖像

圖像在網頁制作中也是常要用到的元素，在Bootstrap框架中對於圖像的樣式風格提供以下幾種風格：

1、img-responsive：響應式圖片，主要針對於響應式設計
2、img-rounded：圓角圖片
3、img-circle：圓形圖片
4、img-thumbnail：縮略圖片

使用方法：

使用方法非常簡單，只需要在<img>標簽上添加對應的類名，如下代碼：

<img  alt="140x140" src="http://placehold.it/140x140">
<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

 

圖標

<span class="glyphicon glyphicon-okform-control-feedback"></span>

 

使用方法：

 

1.不要和其他組件混合使用

 

圖標類不能和其它組件直接聯合使用。它們不能在同一個元素上與其他類共同存在。應該創建一個嵌套的  <span>標簽，並將圖標類應用到這個  <span> 標簽上。

 

2.只對內容為空的元素起作用

圖標類只能應用在不包含任何文本內容或子元素的元素上。

。。。。

注意：把 Bootstrap 文件夾中的 fonts 文件夾放到CSS同級，不然圖標不會顯示。

 

文檔查看：http://v3.bootcss.com/components/