Bootstrap_表單

表單樣式

1、基礎表單

<form >
    <div class="form-group">
      <label>郵箱：</label>
      <input type="email" class="form-control" placeholder="請輸入您的郵箱地址">
    </div>
    <div class="form-group">
      <label >密碼</label>
      <input type="password" class="form-control" placeholder="請輸入您的郵箱密碼">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 記住密碼
      </label>
    </div>
    <button type="submit" class="btn btn-default">進入郵箱</button>
  </form>

表單除了這幾個元素以外，還有input、select、textarea等元素，在Bootstrap框架中，經過定製了一個類名`form-control`，也就是說，若是這幾個元素使用了類名「form-control」，將會實現一些設計上的定製效果。

一、寬度變成了100%

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

三、具備4px的圓角

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

五、設置了placeholder的顏色爲#999

 

2、水平表單

　　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-4">
        <input type="email" class="form-control" id="inputEmail3" placeholder="請輸入您的郵箱地址">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword3" class="col-sm-2 control-label">密碼:</label>
      <div class="col-sm-4">
        <input type="password" class="form-control" id="inputPassword3" placeholder="請輸入您的郵箱密碼">
      </div>
    </div>
  </form>

在Bootstrap框架中要實現水平表單效果，必須知足如下兩個條件：
一、在<form>元素是使用類名「.form-horizontal」。
二、配合Bootstrap框架的網格系統。

在<form>元素上使用類名「.form-horizontal」主要有如下幾個做用：
一、設置表單控件padding和margin值。
二、改變「form-group」的表現形式，相似於網格系統的「row」。

 

3、內聯表單

　　有時候咱們須要將表單的控件都在一行內顯示

<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>
    <div class="form-group">
      <label class="sr-only" for="exampleInputPassword2">密碼</label>
      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="請輸入你的郵箱密碼">
    </div>
    <button type="submit" class="btn btn-default">進入郵箱</button>
  </form>

在Bootstrap框架中實現這樣的表單效果是垂手可得的，你只須要在<form>元素中添加類名「.form-inline」便可。

若是你要在input前面添加一個label標籤時，會致使input換行顯示。若是你必須添加這樣的一個label標籤，而且不想讓input換行，你須要將label標籤也放在容器「form-group」中。

表單控件

1、輸入框input

　　單行輸入框，常見的文本輸入框，也就是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>

2、下拉選擇框select

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

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

3、文本域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>

4、複選框checkbox和單選擇按鈕radio

　　一、不論是checkbox仍是radio都使用label包起來了
　　二、checkbox連同label標籤放置在一個名爲「.checkbox」的容器內
　　三、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>

5、複選框和單選按鈕水平排列

　　一、若是checkbox須要水平排列，只須要在label標籤上添加類名「.checkbox-inline」
　　二、若是radio須要水平排列，只須要在label標籤上添加類名「.radio-inline」

<form role="form">
  <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 class="form-group">
    <label class="radio-inline">
      <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

6、表單控件大小

　　Bootstrap框架還提供了兩個不一樣的類名，用來控制表單控件的高度。這兩個類名是：
　　一、input-sm:讓控件比正常大小更小
　　二、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，控件變小">

表單控件狀態

1、焦點狀態

　　焦點狀態是經過僞類「:focus」來實現。Bootstrap框架中表單控件的焦點狀態刪除了outline的默認樣式，從新添加陰影效果。

<form role="form" class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="不是焦點狀態下效果">
    </div>
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="焦點點狀態下效果">
    </div>
  </div>
</form>

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

<form role="form">
  <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表單已被禁用，不可輸入" disabled>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">禁用的輸入框</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
    </div>
    <div class="form-group">
      <label for="disabledSelect">禁用的下拉框</label>
      <select id="disabledSelect" class="form-control">
        <option>不可選擇</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 沒法選擇
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </fieldset>
</form>

3、驗證狀態

　　在製做表單時，難免要作表單驗證。一樣也須要提供驗證狀態樣式，在Bootstrap框架中一樣提供這幾種效果。
　　一、.has-warning:警告狀態（黃色）
　　二、.has-error：錯誤狀態（紅色）
　　三、.has-success：成功狀態（綠色）
　　使用的時候只須要在form-group容器上對應添加狀態類名

<form role="form">
  <div class="form-group has-success">
    <label class="control-label" for="inputSuccess1">成功狀態</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
  </div>
  <div class="form-group has-warning">
    <label class="control-label" for="inputWarning1">警告狀態</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態">
  </div>
  <div class="form-group has-error">
    <label class="control-label" for="inputError1">錯誤狀態</label>
    <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
  </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="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告狀態</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態">
    <span class="help-block">請輸入正確信息</span>
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">錯誤狀態</label>
    <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">

    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</form>

按鈕

1、多標籤支持

　　通常製做按鈕除了使用<button>標籤元素以外，還可使用<input type="submit">和<a>標籤等。

　　一樣，在Bootstrap框架中製做按鈕時，除了剛纔所說的這些標籤元素以外，還可使用在其餘的標籤元素上，惟一須要注意的是，要在製做按鈕的標籤元素上添加類名「.btn」。

<button class="btn btn-default" type="button">button標籤按鈕</button>
<input type="submit" class="btn btn-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>

2、定製風格

　　在Bootstrap框架中不一樣的按鈕風格都是經過不一樣的類名來實現。

<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-danger" type="button">危險按鈕.btn-danger</button>
<button class="btn btn-link" type="button">連接按鈕.btn-link</button>

 

3、按鈕大小

　　在Bootstrap框架中，對於按鈕的大小，也是能夠定製的。　　

　　在Bootstrap框架中提供了三個類名來控制按鈕大小：

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

4、塊狀按鈕

　　Bootstrap框架中提供了一個類名「.btn-block」。按鈕使用這個類名就可讓按鈕充滿整個容器，而且這個按鈕不會有任何的padding和margin值。在實際當中，常把這種按鈕稱爲塊狀按鈕。

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

5、按鈕禁用狀態

 

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

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

　　方法2：在元素標籤中添加類名「disabled」

 

　　二者的主要區別是：

　　「.disabled」樣式不會禁止按鈕的默認行爲，好比說提交和重置行爲等.

　　在元素標籤中添加「disabled」屬性的方法是能夠禁止元素的默認行爲的。

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">經過disabled屬性禁用按鈕</button>
<button class="btn btn-primary btn-block disabled" type="button">經過添加類名disabled禁用按鈕</button>

圖像

在Bootstrap框架中對於圖像的樣式風格提供如下幾種風格：

一、img-responsive：響應式圖片，主要針對於響應式設計
二、img-rounded：圓角圖片
三、img-circle：圓形圖片
四、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">

圖標

在Bootstrap框架中是經過給元素添加「glyphicon」類名來實現，而後經過僞元素「:before」的「content」屬性調取對應的icon編碼：

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

在網頁中使用圖標也很是的簡單，在任何內聯元素上應用所對應的樣式便可：