如何使用JavaScript检测Twitter Bootstrap 3的响应断点？

Question

目前,Twitter Bootstrap 3具有以下响应断点:768px,992px和1200px,分别代表小型,中型和大型设备.

如何使用JavaScript检测这些断点？

我想用JavaScript听取屏幕更改时触发的所有相关事件.并且能够检测屏幕是用于小型,中型还是大型设备.

有没有做过的事情？你有什么建议？

Answer 1

编辑:此库现在可通过Bower和NPM获得.有关详细信息,请参阅github repo.

更新的答案:

• 实例:CodePen
• 最新版本:Github存储库
• 不喜欢Bootstrap？检查:基础演示和自定义框架演示
• 有一个问题？打开一个问题

免责声明:我是作者.

以下是使用最新版本(Responsive Bootstrap Toolkit 2.5.0)可以执行的一些操作:

// Wrap everything in an IIFE
(function($, viewport){

    // Executes only in XS breakpoint
    if( viewport.is('xs') ) {
        // ...
    }

    // Executes in SM, MD and LG breakpoints
    if( viewport.is('>=sm') ) {
        // ...
    }

    // Executes in XS and SM breakpoints
    if( viewport.is('<md') ) {
        // ...
    }

    // Execute only after document has fully loaded
    $(document).ready(function() {
        if( viewport.is('xs') ) {
            // ...
        }
    });

    // Execute code each time window size changes
    $(window).resize(
        viewport.changed(function() {
            if( viewport.is('xs') ) {
                // ...
            }
        })
    ); 

})(jQuery, ResponsiveBootstrapToolkit);

从版本2.3.0开始,您不需要<div>下面提到的四个元素.

原始答案:

我认为你不需要任何庞大的脚本或库.这是一项相当简单的任务.

在之前插入以下元素</body>:

<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>

这4个div允许您检查当前活动的断点.要轻松进行JS检测,请使用以下函数:

function isBreakpoint( alias ) {
    return $('.device-' + alias).is(':visible');
}

现在只对您可以使用的最小断点执行某个操作:

if( isBreakpoint('xs') ) {
    $('.someClass').css('property', 'value');
}

在DOM准备好后检测更改也非常简单.您只需要一个像这样的轻量级窗口调整大小监听器:

var waitForFinalEvent = function () {
      var b = {};
      return function (c, d, a) {
        a || (a = "I am a banana!");
        b[a] && clearTimeout(b[a]);
        b[a] = setTimeout(c, d)
      }
    }();

var fullDateString = new Date();

一旦配备了它,您就可以开始监听更改并执行特定于断点的功能,如下所示:

$(window).resize(function () {
    waitForFinalEvent(function(){

        if( isBreakpoint('xs') ) {
            $('.someClass').css('property', 'value');
        }

    }, 300, fullDateString.getTime())
});

Answer 2

如果您没有特定需求,您可以这样做:

if ($(window).width() < 768) {
    // do something for small screens
}
else if ($(window).width() >= 768 &&  $(window).width() <= 992) {
    // do something for medium screens
}
else if ($(window).width() > 992 &&  $(window).width() <= 1200) {
    // do something for big screens
}
else  {
    // do something for huge screens
}

编辑:我不明白为什么你应该使用另一个js库,只需使用你的Bootstrap项目中包含的jQuery即可.

Answer 3

你看过Response.js了吗？它专为此类设计而设计.结合Response.band和Response.resize.

http://responsejs.com/

Response.resize(function() {
    if ( Response.band(1200) )
    {
       // 1200+
    }    
    else if ( Response.band(992) )
    {
        // 992+
    }
    else if ( Response.band(768) )
    {
        // 768+
    }
    else 
    {
        // 0->768
    }
});

Answer 4

您可以使用窗口大小并对断点进行硬编码.使用Angular:

angular
    .module('components.responsiveDetection', [])
    .factory('ResponsiveDetection', function ($window) {
        return {
            getBreakpoint: function () {
                var w = $window.innerWidth;
                if (w < 768) {
                    return 'xs';
                } else if (w < 992) {
                    return 'sm';
                } else if (w < 1200) {
                    return 'md';
                } else {
                    return 'lg';
                }
            }
        };
    });

Answer 5

使用JavaScript检测Twitter Bootstrap 4.1.x的响应断点

该引导v.4.0.0(和最新版本的引导4.1.x版)推出的更新网格选项,所以在检测到旧观念可能无法直接被应用(见的迁移说明):

• sm在下面添加了新的网格层,768px以实现更精细的控制.我们现在有xs,sm,md,lg,和xl;
• xs 网格类已被修改为不需要中缀.

我编写了一个小实用程序函数,它尊重更新的网格类名称和新的网格层:

/**
 * Detect the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
function getResponsiveBreakpoint() {
    var envs = {xs:"d-none", sm:"d-sm-none", md:"d-md-none", lg:"d-lg-none", xl:"d-xl-none"};
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));

    for (var i = Object.keys(envs).length - 1; i >= 0; i--) {
        env = Object.keys(envs)[i];
        $el.addClass(envs[env]);
        if ($el.is(":hidden")) {
            break; // env detected
        }
    }
    $el.remove();
    return env;
};

使用JavaScript检测Bootstrap v4-beta的响应断点

该引导V4-α和引导V4-β对电网断点不同的方法,所以这里的达到相同的传统方式:

/**
 * Detect and return the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
function getResponsiveBreakpoint() {
    var envs = ["xs", "sm", "md", "lg"];
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));

    for (var i = envs.length - 1; i >= 0; i--) {
        env = envs[i];
        $el.addClass("d-" + env + "-none");;
        if ($el.is(":hidden")) {
            break; // env detected
        }
    }
    $el.remove();
    return env;
}

我认为它很有用,因为它很容易集成到任何项目中.它使用Bootstrap本身的原生响应显示类.

Answer 6

我自己的简单解决方案:

jQuery的:

function getBootstrapBreakpoint(){
    var w = $(document).innerWidth();
    return (w < 768) ? 'xs' : ((w < 992) ? 'sm' : ((w < 1200) ? 'md' : 'lg'));
}

VanillaJS:

function getBootstrapBreakpoint(){
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    return (w < 768) ? 'xs' : ((w < 992) ? 'sm' : ((w < 1200) ? 'md' : 'lg'));
}

Answer 7

使用Response.js的这种方法更好.Response.resize触发器在每个窗口调整大小时,只有在断点发生更改时才会触发交叉

Response.create({
    prop : "width",
    breakpoints : [1200, 992, 768, 480, 320, 0]
});

Response.crossover('width', function() {
    if (Response.band(1200)) {
        // 1200+

    } else if (Response.band(992)) {
        // 992+

    } else if (Response.band(768)) {
        // 768+

    } else if (Response.band(480)) {
        //480+

    } else {
        // 0->320

    }
});

Response.ready(function() {
    $(window).trigger('resize');
});