1、輪播圖

role、aria-xx屬性，只跟語義相關。

修改id名，也可以用section等代替最外層div。該盒子必須加上 class="carousel slide" data-ride="carousel" 表示當前是一個輪播圖，bootstrap.js會自動為當前元素新增圖片輪播的特效。

每一個li就是一個單獨的控制點。data-target屬性指定當前控制點控制的是哪一個輪播圖，data-slide-to屬性指當前的li元素繫結的是第幾個輪播項。預設必須給其中某個li加上active，展示的時候就是焦點專案。

.carousel-inner是所有輪播項的容器盒子。

左右兩個控制按鈕，分別點選可以滾動到上一張和下一張。該a連結的href屬性必須指向需要控制的輪播圖ID，data-slide="prev"代表點選該連結會滾到上一張，設定為next則相反。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 活動指示器，下面的小點 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol> 
    <!-- 輪播項 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="..." alt="...">
            <div class="carousel-caption"></div> <!-- 每張圖片的標題，可不用 -->
        </div>
        <div class="item">
            <img src="..." alt="...">
            <div class="carousel-caption"></div>
        </div>
    </div>
    <!-- 控制按鈕 -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
 

根據螢幕大小，選擇大小不同的圖片。

Bootstrap預設設定圖片max-width:100%，想在一個較小螢幕下展示一個超寬的圖片，並讓圖片居中顯示。兩種辦法：換用背景圖的方式，background-position: center center;background-size:cover;；使img元素絕對定位，left:50%，margin-left: -width/2。

圖片響應式：各種終端都需要正常顯示圖片，移動端應該使用更小的圖片，且隨螢幕大小等比例變化。使用<img>。

如果大圖時設定為<img>，如何實現cover？如果小圖是設定為背景圖片，如何實現高度隨螢幕大小變化？下面是最優方案嗎？

<!-- 輪播項 -->
<div class="carousel-inner" role="listbox">
    <div class="item active" data-image-lg="img/slide_01_2000x410.jpg"
        data-image-xs="img/slide_01_640x340.jpg"></div>
    <div class="item" data-image-lg="img/slide_02_2000x410.jpg"
        data-image-xs="img/slide_02_640x340.jpg"></div>
</div>

#main_ad>.carousel-inner>.item{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}
/* 當螢幕大於768時執行 */
@media (min-width:768px){
    #main_ad>.carousel-inner>.item{
        height:410px;
    }
}
#main_ad>.carousel-inner>.item>img{
    width:100%;
}

$(function(){
    /* 根據螢幕大小決定顯示大圖還是小圖 */
    function resize(){
        // 獲取螢幕大小
        var windowWidth=$(window).width();
        // 判斷螢幕大還是小
        var isSmallScreen=windowWidth<768;
        // 根據螢幕大小給item設定背景圖
        $("#main_ad>.carousel-inner>.item").each(function(index,item){
            var $item=$(item);
            // var imgSrc=isSmallScreen?$item.data("imageXs"):$item.data("imageLg");
            var imgSrc=$item.data(isSmallScreen?"imageXs":"imageLg");
            // 大圖時設定為背景圖片，固定高度且居中（小圖也有）
            $item.css("backgroundImage","url("+imgSrc+")");
            // 小圖時設定為內部的<img>，隨視窗大小等比例變化
            if(isSmallScreen){
                $item.html('<img src="'+imgSrc+'" alt="">');
            }else{
                $item.html("");
            }          
        });
    }
    // resize(); 用trigger()代替
    $(window).resize(resize).trigger("resize"); // 當調整瀏覽器視窗大小時
});

對於移動端，手指滑動控制輪播圖的切換。

/* 輪播圖左滑右滑 */
// 獲取輪播圖容器
var $carousel=$(".carousel");
// 1.獲取手指在輪播圖元素上的滑動方向（左右）
var startX;
var endX;
var offset=50;
// 註冊滑動事件
$carousel.on("touchstart",function(event){
    // 獲取觸控開始時手指所在座標X
    startX=event.originalEvent.touches[0].clientX;
});
$carousel.on("touchmove",function(event){
    // 獲取觸控結束時手指所在座標X，通過重複給變數賦值
    endX=event.originalEvent.touches[0].clientX;
});
$carousel.on("touchend",function(){
    // 控制靈敏度，滑動超過一定畫素才認為有滑動
    var distance=Math.abs(startX-endX);
    if(distance>offset){
        // 2.根據滑動方向選擇上一張或下一張
        $(this).carousel(startX>endX?'next':'prev');
    }
});

2、標籤頁、選項卡

新增.fade使標籤淡入，.in使初始內容可見。

<div>
    <!-- 選項卡標籤：無序列表 -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- 選項卡面板  -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
        <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
        <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
    </div>
</div>

選項卡滾動、給導航條加橫向滾動條、控制標籤頁的標籤容器寬度。

1.給ul加一個容器，使該容器有橫向滾動條；

2.動態設定ul的寬度，寬度是所有li內容寬度之和。

<div class="ul-wrapper">
    <ul class="nav nav-tabs" role="tablist">
        ...
    </ul>        
</div>      

$(function(){
    var $ulContainer=$(".nav-tabs");
    // 獲取所有子元素的寬度和
    var width=30; // ul上有padding-left
    $ulContainer.children().each(function(index,ele){
        width+=ele.clientWidth; // 或$(ele).width()
    });
    // 如果當前ul寬度超出螢幕寬度，為ul設定寬度，顯示橫向滾動條
    if(width>$(window).width()){
        $ulContainer
            .css("width",width+"px")
            .parent().css("overflow-x","scroll");
    }       
});

3、工具提示tooltip

在元素上新增如下程式碼。且必須通過js初始化。

data-toggle="tooltip" data-placement="top" title="提示內容"

$(function () {
    $('[data-toggle="tooltip"]').tooltip();
})

4、附加導航Affix

附加導航（Affix）外掛允許指定 <div> 固定在頁面的某個位置position:fixed。

如需向元素新增附加導航（Affix）行為，只需向需要監聽的元素新增data-spy="affix"即可。使用偏移data-offset-來定義何時切換元素的鎖定和移動。

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

5、模態框Modal

一個視窗，覆蓋整個螢幕，螢幕的其它內容不能被點選。但對於Bootstrap，點選螢幕其它位置模態框被關閉。

模態框儘量作為body的直接子元素，建議放在html程式碼尾部。

<!-- 點選該元素觸發模態框，不一定是<button> -->
<button type="button" data-toggle="modal" data-target="#myModal">觸發模態框</button>
<!-- 模態框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">模態框標題</h4>
      </div>
      <div class="modal-body">
        <p>正文內容</p>
      </div>
      <div class="modal-footer"> <!-- 不用時可刪除 -->
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>