1>Bootstrap需要匯入的檔案

   1.在head標籤中，通過link匯入bootstrap.css樣式表（核心檔案，必須匯入）

   2.如果使用bootstrap的互動功能和外掛需要匯入

       A) jquery.js

       B) bootstrap.js

2>Bootstrap 容器

 .container   寬度是“固定”（不同瀏覽器視窗寬度對應不同的尺寸）居中

 .container-fluid  100%  兩側有邊距

  如果沒有特殊情況，所有內容都應該放在容器中

 

3>導航條  navbar  

1.兩種配色

default（淺色系）  navbar navbar-default

 

inverse（深色系） navbar navbar-inverse

 

 

2.行為  

A.預設（圓角，隨頁面滾動）

B.固定（直角，100%，可以固定在頂部或底部）navbar navbar-default navbar-fixed-top/bottom 

  C.靜態（直角，100%，隨頁面滾動） navbar navbar-default navbar-static-top

 

4>表格 table

  1.形態

      預設：只有表格行下橫線，表頭文字加粗

 

    

  交替：.table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。

 

   

   邊框：新增 .table-bordered 類為表格和其中的每個單元格增加邊框，同時有豎線。

 

    

  緊湊：通過新增 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半

 

 

懸停：通過新增 .table-hover 類可以讓 <tbody> 中的每一行對滑鼠懸停狀態作出響應

 

響應式表格（手機模式）：將任何 .table 元素包裹在 .table-responsive 元素內，即可建立響應式表格，其會在小螢幕裝置上（小於768px）水平滾動。當螢幕大於 768px 寬度時，水平滾動條消失。

>按鈕 btn

   顏色

 

<button type="button" class="btn btn-default">（預設樣式）白色Default  </button>

<button type="button" class="btn btn-primary">（首選項）深藍Primary   </button>

<button type="button" class="btn btn-success">（成功）綠色Success       </button>

<button type="button" class="btn btn-info">（一般資訊）淺藍Info        </button>

<button type="button" class="btn btn-warning">（警告）橙色Warning    </button>

<button type="button" class="btn btn-danger">（危險）紅色Danger      </button>

<button type="button" class="btn btn-link">（連結）白色Link             </button>

 

尺寸（主要是高度和文字大小）

  大號：btn-lg

  預設

  小號：btn-sm

  超小：btn-xs

 

形態

   預設：滑鼠指向會變色

   按下：向下凹陷

 

   禁用：不會變色，滑鼠指標會變成禁止圖片，顏色發白，為 <button> 元素新增 disabled 屬性，使其表現出禁用狀態。

 

手機預設

    通過btn-block將按鈕設定為寬度撐滿容器100%

     

8>表單

結構

  <form>

     .form-group

          <label>

             .form-control

 

 

 

形態

  預設：上下結構，form-group及其內部的label與form-control都是上下排列

 

 

 

  水平表單：form-group仍然是上下排列，但其內部的label與form-control是左右排列的

 

  

行內表單：左右結構，from-group及其內部全部左右排列

 

 

 導航條內表單：專門在導航條中使用

 

Bootstrap的單選框和複選框

 

   形態

      垂直排列：

         Div.checkbox

             Label

                 Input[type=checkbox]

 

 

 

 

水平排列：

 

 

表單的3種狀態 
1.焦點狀態：我們將某些表單控制元件的預設 outline 樣式移除，然後對 :focus 狀態賦予 box-shadow 屬性。

 

2.禁用狀態：為輸入框設定 disabled 屬性可以禁止其與使用者有任何互動（焦點、輸入等）。被禁用的輸入框顏色更淺，並且還添加了 not-allowed滑鼠狀態。

 

 

3.只讀狀態：為輸入框設定 readonly 屬性可以禁止使用者修改輸入框中的內容。處於只讀狀態的輸入框顏色更淺（就像被禁用的輸入框一樣），但是仍然保留標準的滑鼠狀態。

 

 

表單控制元件的裝飾

     第一種：新增幫助文件

 

     第二種：左側addon

     第三種：右側加圖示（通常用來做輸入驗證）

 

 

分頁  pagination

   方形，有上一頁，下一頁，還有頁碼

 

 

翻頁   pager

圓角，沒有頁碼！可以水平居中或兩端對齊

 

 

面板   .pannel

           .pannel-heading

           .pannel-body

        圓角矩形區域，可以帶標題欄，也可以不帶

 

 

 

 

 

 

圖示

Bootstrap自帶圖示，比較少

推薦使用font-awesome圖示

    （需要css和fonts這兩個資料夾，同時在頁面上匯入font-awesome.css）

<i class =”glyphicon glyphicon-圖示名”>

<i class =”fa fa-圖示名”

 

 

巢狀使用

  <a class=”btn btn-success”>

    <i class=”fa fa-圖示名”>按鈕

</a>

   <a class=”btn btn-success  fa fa-search”>按鈕</a>

 

外掛的使用規律

     1.必須匯入jquery.js和Bootstrap.js這個js指令碼，否則 不能正常工作

     2.外掛可以通過html屬性實現基本功能（如：開啟、關閉，此時不需要寫js程式碼）

     3.如果想實現更多的控制，就需要寫js

 

模態框

     1.通過HTML屬性控制模態框開啟和關閉的重要屬性

        A.開啟按鈕上的2個

               data-toggle=”modal”

               data-target=”樣式類或樣式id”指定要開啟的模態框

 

        B.關閉：

            在模態框內部的任意按鈕或標籤上

              data-dismiss=”modal” 會關閉當前所在的模態框

     2.通過JavaScript呼叫，控制模態框的開啟和關閉

        使用$()找到模態框，然後呼叫modal()方法

           傳入文件中指明的引數即可

        只需一行 JavaScript 程式碼，即可通過元素的 id myModal 呼叫模態框：

      $('#myModal').modal('show')     //開啟

       $('#myModal').modal('hide')     //隱藏

 

 

      3.模態框的基本樣式

          .modol

              .modol-dialog

                   .modal-content

                       .modal-header

                       .modal-body

                       .modal-footer

 

下拉選單

 

       結構

           .dropdown

              .btn     按鈕

                  .caret  下拉按鈕圖示

                ul.dropdown-menu

基本不需要js控制

 

選項卡

  結構：

ul.nav.nav-tabs

       li.active(啟用)>a[href=#id][data-toggle=tab]

 

.tab-content

      .tab-pane[id]

 

 

 

工具提示

   Tooltip/Popover彈出提示

 

 

 

因為效能原因預設沒有啟用，需要在頁面底部加上相應方法呼叫初始化一下

       

Bootstrap佈局特性-柵格系統

1.容器.container被柵格系統平分成12份（12列）

2.通過col-lg/md/sm/xs-1（1-12）表示標籤所佔的份數

3.如果col-*-x中的x之和超過12則超過的標籤換行

 

注意：

lg:表示寬屏桌面顯示尺寸 >=1200px

md：方屏顯示器的寬度  >=992px

sm:平板                >=768px

xs：手機               <768px

如果瀏覽器尺寸比col-[*]-1大，則指定的列有效

如果瀏覽器尺寸比col-[*]-1小，則指定的列無效，變成100%

 

4、.container這個容器左右各有15px的padding

    如果發現因為這15px的padding導致不能對齊

    則在.container中新增.row來抵消15px

<div class="row"></div>

 

列的位置

    可以通過  col-*-pull-1  往左邊拉

    可以通過  col-*-push-1 往右邊推

    只在列有效時起作用！

 

   列的再拆分--列巢狀

        在col-*-1中使用.row作為容器，可以再次拆分，使用.container不行！