使用Bootstrap做輪播圖

什麼是Bootstrap？

     - Bootstrap 是當下最流行的前端框架（界面工具集）；

  -特點就是靈活簡潔，代碼優雅，美觀大方；

  - 其目的是爲了讓 Web 開發更敏捷；
  - 是 Twitter 公司的兩名前端工程師 Mark Otto 和 Jacob Thornton 在 2011 - 年發起的，並利用業餘時間完成第一個版本的開發。

   使用 Bootstrap 並不代表不用寫 CSS 樣式，而是不用寫絕大多數大家都會用到的樣式

下載Bootstrap：- [官方文檔](http://getbootstrap.com/)
                          - [中文文檔](http://v3.bootcss.com/)

    

 * 視口聲明：<meta name="viewport"   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

   

- 視口的作用：在移動瀏覽器中，當頁面寬度超出設備，瀏覽器內部虛擬的一個頁面容器，將頁面容器縮放到設備這麼大，然後展示
- 目前大多數手機瀏覽器的視口（承載頁面的容器）寬度都是980；
- 視口的寬度可以通過meta標籤設置
- 此屬性爲移動端頁面視口設置，當前值表示在移動端頁面的寬度爲設備的寬度，並且不縮放（縮放級別爲1）
  + width:視口的寬度
  + initial-scale：初始化縮放
  + user-scalable:是否允許用戶自行縮放（值：yes/no; 1/0）
  + minimum-scale:最小縮放，一般設置了用戶不允許縮放，就沒必要設置最小和最大縮放
  + maximum-scale:最大縮放
*條件註釋:條件註釋的作用就是當判斷條件滿足時，就會執行註釋中的HTML代碼，不滿足時會當做註釋忽略掉
  ### 第三方依賴

- [jQuery](https://github.com/jquery/jquery)

    > Bootstrap框架中的所有JS組件都依賴於jQuery實現

- [html5shiv](https://github.com/aFarkas/html5shiv)

    > 讓低版本瀏覽器可以識別HTML5的新標籤，如header、footer、section等

- [respond](https://github.com/scottjehl/Respond)

    > 讓低版本瀏覽器可以支持CSS媒體查詢功能

## 建議以後在HTML中將腳步的引入放到頁面最底下
  CSS媒體查詢：
   @media (判斷條件（針對於當前窗口的判斷）){
    /*這裏的代碼只有當判斷條件滿足時纔會執行*/
}

 @media (min-width: 768px) and (max-width: 992px) {
  /*這裏的代碼只有當(min-width: 1280px)滿足時纔會執行*/
  .container {
    width: 750px;
  }
}
  - 當使用min-width作爲判斷條件一定要從小到大，其原因是CSS從上往下執行
## 基礎CSS樣式

- [概要](http://v3.bootcss.com/css/#overview)
- [預置排版樣式](http://v3.bootcss.com/css/#type)
    + 統一預製標籤樣式
- [按鈕樣式](http://v3.bootcss.com/css/#buttons)
- [表格樣式](http://v3.bootcss.com/css/#tables)
- [表單樣式](http://v3.bootcss.com/css/#forms)
- [圖片樣式](http://v3.bootcss.com/css/#images)
- [輔助工具類](http://v3.bootcss.com/css/#helper-classes)
- [代碼樣式](http://v3.bootcss.com/css/#code)
- [柵格系統](http://v3.bootcss.com/css/#grid)
    + __xs__ : 超小屏幕 手機 (<768px)  
    + __sm__ : 小屏幕 平板 (≥768px)
    + __md__ : 中等屏幕 桌面顯示器 (≥992px)
    + __lg__ : 大屏幕 大桌面顯示器 (≥1200px)
- [響應式工具類](http://v3.bootcss.com/css/#responsive-utilities)
    + __hidden-xx__ : 在某種屏幕下隱藏
    + __visible-xx__ : 在某種屏幕尺寸下顯示
 ## 預置界面組件

- [導航](http://v3.bootcss.com/components/#nav)
- [導航條](http://v3.bootcss.com/components/#navbar)
- [麪包屑導航](http://v3.bootcss.com/components/#breadcrumbs)
- [下拉菜單](http://v3.bootcss.com/components/#dropdowns)
- [按鈕式下拉菜單](http://v3.bootcss.com/components/#btn-dropdowns)
- [按鈕組](http://v3.bootcss.com/components/#btn-groups)
- [輸入框組](http://v3.bootcss.com/components/#input-groups)
- [警告框](http://v3.bootcss.com/components/#alerts)
- [頁頭](http://v3.bootcss.com/components/#page-header)
- [分頁](http://v3.bootcss.com/components/#pagination)
- [列表組](http://v3.bootcss.com/components/#list-group)
- [面板](http://v3.bootcss.com/components/#panels)
- [媒體對象](http://v3.bootcss.com/components/#media)
- [進度條](http://v3.bootcss.com/components/#progress)
- [Glyphicons](http://v3.bootcss.com/components/#glyphicons)
- [標籤](http://v3.bootcss.com/components/#labels)
- [徽章](http://v3.bootcss.com/components/#badges)
- [縮略圖](http://v3.bootcss.com/components/#thumbnails)
- [大屏幕](http://v3.bootcss.com/components/#jumbotron)
- [嵌入內容](http://v3.bootcss.com/components/#responsive-embed)
- [內嵌](http://v3.bootcss.com/components/#wells)

## JavaScript插件

### JavaScript插件的依賴情況

### 如何使用Javascript插件

### 內置組件
    
- [模態對話框](http://v3.bootcss.com/javascript/#modals)
- [下拉菜單](http://v3.bootcss.com/javascript/#dropdowns)
- [滾動監聽](http://v3.bootcss.com/javascript/#scrollspy)
- [標籤頁](http://v3.bootcss.com/javascript/#tabs)
- [工具提示](http://v3.bootcss.com/javascript/#tooltips)
- [彈出框](http://v3.bootcss.com/javascript/#popovers)
- [警告框](http://v3.bootcss.com/javascript/#alerts)
- [按鈕](http://v3.bootcss.com/javascript/#buttons)
- [摺疊面板](http://v3.bootcss.com/javascript/#collapse)
- [輪播圖](http://v3.bootcss.com/javascript/#carousel)
- [吸頂效果](http://v3.bootcss.com/javascript/#affix)
    + data-spy="affix"
    + data-offset-top="什麼位置出現"
    + data-offset-bottom="什麼位置消失"
    
## 深度自定義 Bootstrap

### 在線自定義

- [官網在線](http://getbootstrap.com/customize/)
- [中文網在線](http://v3.bootcss.com/customize/)

<!-- 
  以下容器就是整個輪播圖組件的整體，
  注意該盒子必須加上 class="carousel slide" data-ride="carousel" 表示當前是一個輪播圖
  bootstrap.js會自動爲當前元素添加圖片輪播的特效
-->
<div id="輪播圖的ID" class="carousel slide" data-ride="carousel">
  <!-- ol標籤是圖片輪播的控制點 -->
  <ol class="carousel-indicators">
    <!-- 
      每一個li就是一個單獨的控制點
        data-target屬性就是指定當前控制點控制的是哪一個輪播圖，其目的是如果界面上有多個輪播圖，便於區分到底控制哪一個
        data-slide-to屬性是指當前的li元素綁定的是第幾個輪播項
      注意，默認必須給其中某個li加上active，展示的時候就是焦點項目
    -->
    <li data-target="#輪播圖的ID" data-slide-to="0" class="active"></li>
    <li data-target="#輪播圖的ID" data-slide-to="1"></li>
    <!-- ...更多的 -->
  </ol>
  <!-- 
    .carousel-inner是所有輪播項的容器盒子，
    注意role="listbox"代表當前div是一個列表盒子，作用就是給當前div添加一個語義
  -->
  <div class="carousel-inner" role="listbox">
    <!-- 每一個.item就是單個輪播項目，注意默認要給第一個輪播項目加上active，表示爲焦點 -->
    <div class="item active">
      <!-- 輪播項目中展示的圖片 -->
      <img src="example.jpg" alt="示例圖片">
      <div class="carousel-caption">
        <!-- 標題或說明性文字，如果不需要，直接刪除當前div.carousel-caption -->
      </div>
    </div>
    <div class="item">
      <!-- ... -->
    </div>
    <!-- ... -->
  </div>
  <!-- 圖片輪播上左右兩個控制按鈕，分別點擊可以滾動到上一張和下一張 -->
  <!-- 此處需要注意的是 該a鏈接的href屬性必須指向需要控制的輪播圖ID -->
  <!-- 另外a鏈接中的data-slide="prev"代表點擊該鏈接會滾到上一張，如果設置爲next的話則相反 -->
  <a class="left carousel-control" href="#輪播圖的ID" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">上一張</span>
  </a>
  <a class="right carousel-control" href="#輪播圖的ID" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">下一張</span>
  </a>
</div>

#### 由於輪播圖片超寬造成的影響

- 美工爲了在不同屏幕下更好地展示將圖片兩邊做的非常寬，但是我們大多數情況的頁面寬度都無法滿足這樣的圖片寬度
- 而且Bootstrap的樣式中默認將圖片的max-width設置爲100%；
- 造成界面圖片縮放
- 想在一個較小屏幕下展示一個超寬的圖片，並讓圖片居中顯示
  + 兩種辦法：
    * 換用背景圖的方式，background-position: center center;
    * 使img元素絕對定位，left:50%，margin-left: -width/2

### background使用

- 將容器的高度固定（410px）
- 將輪播圖改爲背景顯示
- 由於可能圖片的高度不一定是410px
- 所以需要設置css3中的background-size

#### background-size

- length
  + 如 background-size: 100px 100px，將背景圖固定到多大尺寸
- percentage
  + 如 background-size: 90% 90%，以百分比的形式設置背景大小
- cover
  + 1.背景圖片等比例縮放
  + 2.讓背景圖相對較小邊放大到目標容器大小結束
    * 如：一張100\*200的背景圖放到一個300\*400的盒子中，最終背景圖片的大小是300\*600
    * 因爲背景圖的較小邊爲100，將100放大到目標容器300的寬度，放大了3倍，最終結果300\*600
- contain
  + 1.背景圖片等比例縮放
  + 2.讓背景圖相對較大邊放大到目標容器大小結束
    * 如：一張100\*200的背景圖放到一個300\*400的盒子中，最終背景圖片的大小是200\*400
    * 因爲背景圖的較大邊爲200，將200放大到目標容器400的高度，放大了2倍，最終結果200\*400

##### demo

###### cover

<div style="width: 400px;height: 200px;border:1px dashed #c0c0c0;background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTUxOWU5ZmNjZDAgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTE5ZTlmY2NkMCI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44NTkzNzUiIHk9IjEwNS4xIj4yNDJ4MjAwPC90ZXh0PjwvZz48L2c+PC9zdmc+');background-repeat:no-repeat;background-size: cover;"></div>

###### contain


<div style="width: 400px;height: 200px;border:1px dashed #c0c0c0;background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTUxOWU5ZmNjZDAgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTE5ZTlmY2NkMCI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44NTkzNzUiIHk9IjEwNS4xIj4yNDJ4MjAwPC90ZXh0PjwvZz48L2c+PC9zdmc+');background-repeat:no-repeat;background-size: contain;"></div>

### 圖片響應式

- 目的
  + 各種終端都需要正常顯示圖片
  + 移動端應該使用更小（體積）的圖片
- 實現方式
  + 將元素中直接設置的圖片背景刪除，換成兩個data-屬性（如：data-img-sm="小圖路徑"，data-img-lg="大圖路徑"）
  + 通過JS的方式獲取屏幕的寬度；
  + 判斷屏幕寬度是否小於一定的值（如：768）
  + 根據判斷情況決定使用具體的大圖還是小圖

javascript
// 獲取屏幕寬度
var windowWidth = $(window).width();
// 判斷屏幕屬於大還是小
var isSmallScreen = windowWidth < 768;
// 根據大小爲界面上的每一張輪播圖設置背景
// $('#main_ad > .carousel-inner > .item') // 獲取到的是一個DOM數組（多個元素）
$('#main_ad > .carousel-inner > .item').each(function(i, item) {
  // 因爲拿到是DOM對象 需要轉換
  var $item = $(item);
  // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
  var imgSrc =
    isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');

  // 設置背景圖片
  $item.css('backgroundImage', 'url("' + imgSrc + '")');
});