如何使用JavaScript检测Twitter Bootstrap 3的响应断点？ [英] How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

问题描述

目前，Twitter Bootstrap 3有以下响应断点： 768px，992px和1200px，分别代表小型，中型和大型设备。

Currently, Twitter Bootstrap 3 have the following responsive breakpoints: 768px, 992px and 1200px, representing small, medium and large devices respectively.

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

How can I detect these breakpoints using JavaScript?

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

I would like to listen with JavaScript for all related events triggered when the screen change. And to be able to detect if the screen is for small, medium or large devices.

是否已经完成了某些工作？你有什么建议？

Is there something already done? What are your suggestions?

推荐答案

编辑：这个库现在可以通过Bower和NPM获得。有关详细信息，请参阅github repo。

更新的答案：

• 实例： CodePen


• 最新版本： Github存储库


• 不喜欢引导？检查：基础演示和自定义框架演示


• 有问题吗？ 打开问题

• Live example: CodePen
• Latest version: Github repository
• Don't like Bootstrap? Check: Foundation demo and Custom framework demos
• Have a problem? Open an issue

免责声明：我是作者。

以下是使用最新版本可以做的一些事情（响应式Bootstrap）工具包2.5.0）：

Here's a few things you can do using the latest version (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> 下面提到的元素。

As of version 2.3.0, you don't need the four <div> elements mentioned below.

原始答案：

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

I don't think you need any huge script or library for that. It's a fairly simple task.

在< / 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检测，请使用以下函数：

These 4 divs allow you check for currently active breakpoint. For an easy JS detection, use the following function:

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

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

Now to perform a certain action only on the smallest breakpoint you could use:

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

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

Detecting changes after DOM ready is also fairly simple. All you need is a lightweight window resize listener like this one:

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();

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

Once you're equipped with it, you can start listening for changes and execute breakpoint-specific functions like so:

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

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

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

这篇关于如何使用JavaScript检测Twitter Bootstrap 3的响应断点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！