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

问题描述

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

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

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

有什么已经完成了吗?您有什么建议?

解决方案

这个库现在可以通过 Bower 和 NPM 获得.有关详细信息，请参阅 github 存储库.

更新答案:

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

免责声明:我是作者.

您可以使用最新版本(响应式引导工具包 2.5.0)执行以下操作:

//将所有内容都包装在 IIFE 中(功能($，视口){//只在XS断点处执行如果(视口.is('xs')){//...}//在 SM、MD 和 LG 断点处执行if( viewport.is('>=sm') ) {//...}//在 XS 和 SM 断点处执行if( viewport.is('<md') ) {//...}//仅在文档​​完全加载后执行$(document).ready(function() {如果(视口.is('xs')){//...}});//每次窗口大小改变时执行代码$(窗口).调整大小(viewport.changed(function() {如果(视口.is('xs')){//...}}));})(jQuery, ResponsiveBootstrapToolkit);

从 2.3.0 版本开始，您不需要下面提到的四个

元素.

<小时>

原始答案:

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

在 之前插入以下元素:

<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 = {};返回函数 (c, d, a) {一个 ||(a = "我是香蕉！");b[a] &&clearTimeout(b[a]);b[a] = setTimeout(c, d)}}();var fullDateString = new Date();

一旦你配备了它，你就可以开始监听更改并执行特定于断点的函数，如下所示:

$(window).resize(function () {waitForFinalEvent(函数(){if( isBreakpoint('xs') ) {$('.someClass').css('property', 'value');}}, 300, fullDateString.getTime())});

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

How can I detect these breakpoints using 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?

解决方案

Edit: This library is now available through Bower and NPM. See github repo for details.

UPDATED ANSWER:

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

Disclaimer: I'm the author.

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

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

---

ORIGINAL ANSWER:

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

Insert the following elements just before </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>

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');
}

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屋！