Bootstrap筆記4

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

//獲取屏幕寬度
var windowWidth=$(window).width();
//判斷屏幕屬於大還是小
var isSmallScreen=windowWidth<768;
//根據大小爲界面上的每一張輪播圖設置背景
//$('#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+'")');
});

window resize事件
由於上一步我們實現的過程是指在頁面加載完成判斷一次，
當用戶手動調整頁面寬度過後沒有及時發生變化，
所以我們可以通過window的resize事件中重新完成以上操作來解決這個問題

function 窗口變化後執行的函數名(){
    //具體操作
}
$(window).on('resize',窗口變化後執行的函數名);

這個事件只會在窗口尺寸發生變化後執行，但是需要一開始執行一次

$(window).on('resize',窗口變化後執行的函數名).trigger('resize');

小圖片不需要使用背景的方式
小圖如果還是使用背景的方式，當屏幕特別小時，效果很差，所以使用小圖時，改用img的方式
因爲需要小圖時尺寸等比例變化，所以小圖時使用img方式

if(isSmallScreen){
    $item.html('<img src="'+imgSrc+''alt=""/>');
}else{
    $item.empty();
}

按照目前的情況，如果小圖展示則不需要給容器加上410px的固定寬度，所以可以通過CSS媒體查詢的方式解決

媒體對象樣式
每一個小塊的樣式可以通過Bootstrap中的媒體對象樣式實現

<a href="#">
    <div class="media">
        <div class="media-left">
            <i class="icon-uniE907"></i>
        </div>
        <div class="media-body">
            <h4 class="media-heading">支付交易保障</h4>
            <p>銀聯支付全程保證支付安全</p>
        </div>
    </div>
</a>

響應式輔助類型
整個板塊在超小屏幕下是隱藏起來的
只需要給當前板塊加上hidden-xs的class