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