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(