知識(shí)點(diǎn)：

1、柵格系統(tǒng)
2、表單

1、柵格系統(tǒng)

1）響應(yīng)式網(wǎng)格系統(tǒng)隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。

2）工作原理

  行必須放置在.container(固定寬度)或者.container-fluid(100%寬度) class內(nèi)，獲得適當(dāng)?shù)膶?duì)齊(alignment)和內(nèi)邊距(padding)
  內(nèi)容放置在列中，唯有列可以是行的直接子元素
  預(yù)定義的網(wǎng)格類(lèi)，比如 .row 和 .col-lg-4，可用于快速創(chuàng)建網(wǎng)格布局
  列通過(guò)內(nèi)邊距（padding）來(lái)創(chuàng)建列內(nèi)容之間的間隙

3)媒體查詢(xún)

      /* 超小設(shè)備（手機(jī)，小于 768px） */
      /* 沒(méi)有任何媒體查詢(xún)相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動(dòng)設(shè)備優(yōu)先的嗎？） */

      /* 小型設(shè)備（平板電腦，大于等于768px） */
      @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

      /* 中型設(shè)備（臺(tái)式電腦，大于等于992px） */
      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

      /* 大型設(shè)備（大臺(tái)式電腦，大于等于1200px） */
      @media (min-width: @screen-lg-min) { ... }

4）柵格參數(shù)

超小屏幕 手機(jī) (<768px)
小屏幕 平板 (≥768px)
中等屏幕 桌面顯示器 (≥992px)
大屏幕 大桌面顯示器 (≥1200px)
柵格系統(tǒng)行為
總是水平排列
開(kāi)始是堆疊在一起的，當(dāng)大于這些閾值時(shí)將變?yōu)樗脚帕蠧
.container 最大寬度
None （自動(dòng)）
750px 970px 1170px
類(lèi)前綴 .col-xs- .col-sm- .col-md- .col-lg-
列（column）數(shù) 12
最大列（column）寬 自動(dòng) ~62px ~81px ~97px
間隙寬度 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是

5）四種屏幕分類(lèi)全部激活

   <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
            ....
        </div>
   </div>
     //可以設(shè)置列偏移，讓中間保持空隙
   <div class="container">
        <div class="row">
            <div class="col-md-8">1-8</div>
            <div class="col-md-3 col-md-offset-1">10-12</div>
        </div>
   </div>
     //可以嵌套，嵌滿(mǎn)也是 12 列
   <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="col-md-8">1-8</div>
                <div class="col-md-4">9-12</div>
            </div>
            <div class="col-md-3"> 10-12 </div>
        </div>
   </div>
     //可以把兩個(gè)列交換位置，push 向右移動(dòng)（推），pull 向左移動(dòng)（拉）
   <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-push-4">8</div>
            <div class="col-md-4 col-md-pull-8">4</div>
        </div>
   </div>

2、表單

1）垂直或基本表單

2）內(nèi)聯(lián)表單

  //讓表單左對(duì)齊浮動(dòng)，并表現(xiàn)為 inline-block 內(nèi)聯(lián)塊結(jié)構(gòu)
  <form class="form-inline">
  注：當(dāng)小于 768px，會(huì)恢復(fù)獨(dú)占樣式

3）水平表單

  //讓表單內(nèi)的元素保持水平排列

4）表單組合

  //前后增加片段
  <div class="input-group">
     <div class="input-group-addon">￥</div>
     <input type="text" class="form-control">
     <div class="input-group-addon">.00</div>
  </div>

5）輸入框、文本域

  原生的 HTML5 的 input 類(lèi)型的支持，包括：
  text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
  <input type="text" class="form-control" placeholder="文本輸入">
  <textarea class="form-control" rows="3"></textarea>

6）復(fù)選框（（Checkbox）和單選框（Radio）

  <div class="checkbox">
     <label><input type="checkbox" value="">選項(xiàng) 1</label>
  </div>
  <div class="radio">
     <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1"
           value="option1" checked> 選項(xiàng) 1
     </label>
  </div>
  內(nèi)聯(lián)的復(fù)選框和單選框
  <label class="checkbox-inline">
     <input type="checkbox" id="inlineCheckbox1" value="option1"> 選項(xiàng) 1
  </label>
  <label class="radio-inline">
     <input type="radio" id="optionsRadiosinline" value="option1"> 選項(xiàng) 1
  </label>

7）選擇框 multiple 多行顯示

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

8）靜態(tài)控件 .form-control-static

9）表單控件狀態(tài)

  輸入框焦點(diǎn)
  當(dāng)輸入框 input 接收到 :focus 時(shí)，輸入框的輪廓會(huì)被移除，同時(shí)應(yīng)用 box-shadow。
  禁用的輸入框 input
  如果您想要禁用一個(gè)輸入框 input，只需要簡(jiǎn)單地添加 disabled 屬性，這不僅會(huì)禁用輸入框，還會(huì)改變輸入框的樣式以及當(dāng)鼠標(biāo)的指針懸停在元素上時(shí)鼠標(biāo)指針的樣式。
  禁用的字段集 fieldset
  對(duì) <fieldset> 添加 disabled 屬性來(lái)禁用 <fieldset> 內(nèi)的所有控件。
  校驗(yàn)狀態(tài)
  .has-warning、.has-error 或 .has-success 類(lèi)到這些控件的父元素即可。
  任何包含在此元素之內(nèi)的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗(yàn)狀態(tài)的樣式。

10）表單幫助文本

  <form role="form">
     <input class="form-control" type="text" placeholder="">
     <span class="help-block">一個(gè)較長(zhǎng)的幫助文本塊，超過(guò)一行，需要擴(kuò)展到下一行。本實(shí)例中的幫助文本總共有兩行。</span>
  </form>

11）控件尺寸

  .input-lg和col-lg-*來(lái)設(shè)置表單的高度和寬度
  <div class="form-group">
      <input class="form-control input-lg" type="text" placeholder="input-lg">
  </div>
  <div class="row">
      <div class="col-lg-2">
         <input type="text" class="form-control" placeholder="col-lg-2">
      </div>
      <div class="col-lg-3">
         <input type="text" class="form-control" placeholder="col-lg-3">
      </div>
      <div class="col-lg-4">
         <input type="text" class="form-control" placeholder="col-lg-4">
      </div>
  </div>