1. 自適應網頁設計
首先，在網頁程式碼的頭部，加入一行 viewport元標籤。viewport是網頁預設的寬度和高度，

<meta name="viewport" content="width=device-width, initial-scale=1">

上面這行程式碼的意思是，網頁寬度預設等於螢幕寬度(width=device-width)，原始縮放比例(initial-scale=1)為1.0，即網頁初始大小佔螢幕面積的100%。 所有主流瀏覽器都支援這個設定，包括IE9。對於那些老式瀏覽器(主要是IE6、7、8)，需要使用 css3-mediaqueries.js。

2. 輪播元件 carousel
通過 javascript 初始化輪播元件，接受一個可選的object型別的options引數，並開始幻燈片迴圈。

$('.carousel').carousel({
    interval: 2000 , //圖片輪換的等待時間
    //還有其他兩種： pause 型別String    預設值是"hover" 滑鼠放上去暫停輪播，離開開始輪播
    //wrap  型別boolean   預設值是true    是否持續輪播
});

直接放入引數值
.carousel(‘cycle’) 從左到右迴圈各幀。
.carousel(‘pause’) 停止輪播。
.carousel(number) 將輪播定位到指定的幀上（幀下標以0開始，類似陣列）。
.carousel(‘prev’) 返回到上一幀。
.carousel(‘next’) 轉到下一幀。

3. 響應式圖片

<img src="..." class="img-responsive" alt="Responsive image">

通過新增.img-responsive class可以讓Bootstrap 3中的圖片對響應式佈局的支援更友好。其實質是為圖片賦予了max-width: 100%;和height: auto;屬性，可以讓圖片按比例縮放，不超過其父元素的尺寸。

4. 透明度設定：已經為 ie8相容

.opacity(@opacity) {
        opacity: @opacity;
        // IE8 filter
        @opacity-ie: (@opacity * 100
 
);
        filter: ~"alpha(opacity=@{opacity-ie})";
    }