jQuery 检测 Bootstrap 3 状态

jQuery detect Bootstrap 3 state

本文关键字：状态 Bootstrap 检测 jQuery      更新时间：2023-09-26

在 Bootstrap 3 中，有 4 种状态：超小型设备、小型设备、中型设备和大型设备。我如何使用jQuery知道网站当前处于哪种状态？这样我就可以像在超小型设备中一样进行一些处理，然后运行此功能。

谢谢。

按照@Khurshid的回答（效果很好），我编写了一个原生的JavaScript实现，它的速度要快得多：

function findBootstrapEnvironment() {
    var envs = ["xs", "sm", "md", "lg"],    
        doc = window.document,
        temp = doc.createElement("div");
    doc.body.appendChild(temp);
    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];
        temp.className = "hidden-" + env;
        if (temp.offsetParent === null) {
            doc.body.removeChild(temp);
            return env;
        }
    }
    return "";
}

我对引导程序 3 进行了一些更改，试试这个"

function findBootstrapEnvironment() {
    var envs = ["ExtraSmall", "Small", "Medium", "Large"];
    var envValues = ["xs", "sm", "md", "lg"];
    var $el = $('<div>');
    $el.appendTo($('body'));
    for (var i = envValues.length - 1; i >= 0; i--) {
        var envVal = envValues[i];
        $el.addClass('hidden-'+envVal);
        if ($el.is(':hidden')) {
            $el.remove();
            return envs[i]
        }
    };
}

我必须为中等大小做类似的事情。

超小的媒体查询最大为 480px;

所以你可以这样说：

if($(document).width > 480)
{
  //Do Something
}

Bootstrap 4 版本：

function findBootstrapEnvironment() {
    var envs = ["sm", "md", "lg", "xl"];
    var env = "";
    var $el = $("<div>");
    $el.appendTo($("body"));
    $el.addClass("d-block");
    for (var i = envs.length - 1; i >= 0; i--) {
        env = envs[i];
        $el.addClass("d-" + env + "-none");
        if ($el.is(":hidden")) {
            $el.remove();
            return env;
        }
    }
    $el.remove();
    return "xs";    //extra small
}
相关文章：