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

• 由於樣式沒有對圖片做大小上的樣式限制，所以在實際使用的時候，需要通過其他的方式來處理圖片大小。比如說控制圖片容器大小。（注意不可以通過css樣式直接修改img圖片的大小，這樣操作就不響應了）
• 對於圓角圖片和圓形圖片效果，因為是使用了CSS3的圓角樣式來實現的，所以注意對於IE8以及其以下版本不支援，是沒有圓角效果的。

13.網格系統
1、資料行(.row)必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內距(padding)。
2、在行(.row)中可以新增列(.column)，但列數之和不能超過平分的總列數，比如12。
3、具體內容應當放置在列容器（column）之內，而且只有列（column）才可以作為行容器(.row)的直接子元素
4、通過設定內距（padding）從而建立列與列之間的間距。然後通過為第一列和最後一列設定負值的外距（margin）來抵消內距(padding)的影響

14.下拉選單（基本用法）
1、使用一個名為“dropdown”的容器包裹了整個下拉選單元素
2、使用了一個按鈕做為父選單，並且定義類名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類名一致，
3、下拉選單項使用一個ul列表，並且定義一個類名為“dropdown-menu”

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle
 
="dropdown">
下拉選單
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉選單項</a></li>
   …
   <li role="presentation" class="divider"
 
></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉選單項</a></li>
</ul>
</div>

• 下拉選單（對齊方式）
  Bootstrap框架中下拉選單預設是左對齊，如果你想讓下拉選單相對於父容器右對齊時，可以在“dropdown-menu”上新增一個“pull-right”或者“dropdown-menu-right”類名

15.按鈕（等分按鈕）
等分按鈕也常被稱為是自適應分組按鈕，其實現方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名

<div class="btn-wrap">
<div class="btn-group btn-group-justified">
  <a class="btnbtn-default" href="#">首頁</a>
  <a class="btnbtn-default" href="#">產品展示</a>
  <a class="btnbtn-default" href="#">案例分析</a>
  <a class="btnbtn-default" href="#">聯絡我們</a>
</div>
</div>

• 特別宣告：在製作等分按鈕組時，請儘量使用<a>標籤元素來製作按鈕，因為使用<button>標籤元素時，使用display:table在部分瀏覽器下支援並不友好。

16.基礎導航條
“.navbar”樣式的主要功能就是設定左右padding和圓角等效果，但他和顏色相關的樣式沒有進行任何的設定，而導航條的顏色都是通過“.navbar-default”來進行控制

• 加入導航條標題
• 常常在選單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也為大家做了這方面考慮，其通過“navbar-header”和“navbar-brand”來實現

17.警示框–預設警示框
1、成功警示框：告訴用使用者操作成功，在“alert”樣式基礎上追加“alert-success”樣式，具體呈現的是背景、邊框和文字都是綠色；

2、資訊警示框：給使用者提供提示資訊，在“alert”樣式基礎上追加“alert-info”樣式，具體呈現的是背景、邊框和文字都是淺藍色；

3、警告警示框：提示使用者小心操作（提供警告資訊），在“alert”樣式基礎上追加“alert-warning”樣式，具體呈現的是背景、邊框、文字都是淺黃色；

4、錯誤警示框：提示使用者操作錯誤，在“alert”樣式基礎上追加“alert-danger”樣式，具體呈現的是背景、邊框和文字都是淺紅色。

• 警示框–可關閉的警示框
  1、需要在基本警示框“alert”的基礎上新增“alert-dismissable”樣式。

  2、在button標籤中加入class=”close”類，實現警示框關閉按鈕的樣式。

  3、要確保關閉按鈕元素上設定了自定義屬性：“data-dismiss=”alert””（因為可關閉警示框需要藉助於Javascript來檢測該屬性，從而控制警示框的關閉）。

• 警示框–警示框的連結
  Bootstrap框架是通過給警示框加的連結新增一個名為“alert-link”的類名，通過“alert-link”樣式給連結提供高亮顯示。

18.媒體物件–預設媒體物件
☑ 媒體對像的容器：常使用“media”類名錶示，用來容納媒體物件的所有內容

☑ 媒體對像的物件：常使用“media-object”表示，就是媒體物件中的物件，常常是圖片

☑ 媒體物件的主體：常使用“media-body”表示，就是媒體對像中的主體內容，可以是任何元素，常常是圖片側邊內容

☑ 媒體物件的標題：常使用“media-heading”表示，就是用來描述物件的一個標題，此部分可選

• 除了上面四個部分之外，在Bootstrap框架中還常常使用“pull-left”或者“pull-right”來控制媒體物件中的物件浮動方式。

19.js外掛引入

• 一次性引入
  Bootstrap提供了一個單一的檔案，這個檔案包含了Bootstrap的所有JavaScript外掛，即bootstrap.js（壓縮版本：bootstrap.min.js）。

• 單獨匯入：
  ☑ 動畫過渡（Transitions）:對應的外掛檔案“transition.js”

  ☑ 模態彈窗（Modal）:對應的外掛檔案“modal.js”

  ☑ 下拉選單（Dropdown）：對應的外掛檔案“dropdown.js”

  ☑ 滾動偵測（Scrollspy）：對應的外掛檔案“scrollspy.js”

  ☑ 選項卡（Tab）：對應的外掛檔案“tab.js”

  ☑ 提示框（Tooltips）：對應的外掛檔案“tooltop.js”

  ☑ 彈出框（Popover）：對應的外掛檔案“popover.js”

  ☑ 警告框（Alert）：對應的外掛檔案“alert.js”

  ☑ 按鈕（Buttons）：對應的外掛檔案“button.js”

  ☑ 摺疊/手風琴（Collapse）：對應的外掛檔案“collapse.js”

  ☑ 圖片輪播Carousel：對應的外掛檔案“carousel.js”

  ☑ 自動定位浮標Affix：對應的外掛檔案“affix.js”

• 模態彈出框

• 模態彈出框–JavaScript觸發時的引數設定（一）
  使用JavaScript觸發模態彈出窗時，Bootstrap框架提供了一些設定，主要包括屬性設定、引數設定和事件設定。
  

• 模態彈出框–JavaScript觸發時的引數設定（二）