如何使用Twitter Bootstrap API检测您正在使用哪个设备视图？

Question

我刚刚开始使用Twitter Bootstrap API来完成我即将推出的项目.主导航包含3个主要元素:

• 网站导航
• 社交链接导航
• 搜索网站表单

我在移动设备上查看网站时使用折叠插件折叠网站导航和搜索表单.移动视图有2个按钮,单击此按钮可打开/关闭搜索表单或主导航.

但是,如果我关闭搜索表单然后将浏览器调整为桌面视图,搜索表单仍然隐藏在此视图中？

我已经阅读过有关使用诸如visible-mobile等类的内容,但这些类似乎与崩溃插件冲突.我也意识到我可能会编写自己的CSS黑客来解决这个问题,但我想我会问是否有更简单的解决方案.

Bootstrap有显示,显示,隐藏和隐藏的事件,所以我想也许我可以写一些自定义JS,它会在每个特定的设备视图中显示或隐藏这些项目.但是我不知道如何检测我当时正在使用的设备.

思考？

提前致谢

Answer 1

如果您想知道自己所处的环境,请尝试使用Bootstrap自己的CSS类.创建一个元素,将其添加到页面,应用其帮助程序类并检查它是否隐藏以确定它是否是当前环境.以下功能就是这样:

Bootstrap 4

function findBootstrapEnvironment() {
    let envs = ['xs', 'sm', 'md', 'lg', 'xl'];

    let el = document.createElement('div');
    document.body.appendChild(el);

    let curEnv = envs.shift();

    for (let env of envs.reverse()) {
        el.classList.add(`d-${env}-none`);

        if (window.getComputedStyle(el).display === 'none') {
            curEnv = env;
            break;
        }
    }

    document.body.removeChild(el);
    return curEnv;
}

Bootstrap 3

function findBootstrapEnvironment() {
    var envs = ['xs', 'sm', 'md', 'lg'];

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

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
}

Bootstrap 2

function findBootstrapEnvironment() {
    var envs = ['phone', 'tablet', 'desktop'];

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

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
}

Answer 2

在@Raphael_和@ user568109的答案的基础上,在Bootstrap 3中,现在内置了响应.

要在Javascript中检测设备类型,请使用Bootstrap的响应类创建仅显示在所需设备上的对象.然后检查它的:hidden财产.

例:

1. 创建一个<div>没有内容的面板,这些内容将显示在eXtra Small设备上更大的内容上(感谢@Mario Awad):

   <div id="desktopTest" class="hidden-xs"></div>
   

   或者,排除特定设备:

   <div id="desktopTest" class="visible-sm visible-md visible-lg"></div>
   

2. 检查值#desktopTest:

   if ($('#desktopTest').is(':hidden')) {
       // device is == eXtra Small
   } else {
       // device is >= SMaller 
   }
   

Answer 3

原始答案：
基于@Alastair McCormack的答案，建议您使用此代码

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

只需将其添加到容器div的末尾，您将获得有关当前视图的简单动态信息。

更新（2019-03-03）：
先前的代码与Bootstrap 4不兼容，因为已删除所有hidden-*和visible-*类。在这里，您可以使用与Bootstrap 3和Bootstrap 4版本兼容的新代码（此功劳归功于该代码）：

<div class="visible-xs hidden-sm hidden-md hidden-lg hidden-xl d-block d-sm-none">xs</div>
<div class="hidden-xs visible-sm hidden-md hidden-lg hidden-xl d-none d-sm-block d-md-none">sm</div>
<div class="hidden-xs hidden-sm visible-md hidden-lg hidden-xl d-none d-md-block d-lg-none">md</div>
<div class="hidden-xs hidden-sm hidden-md visible-lg hidden-xl d-none d-lg-block d-xl-none">lg</div>
<div class="hidden-xs hidden-sm hidden-md hidden-lg visible-xl d-none d-xl-block">xl</div>

您可以使用此小提琴对其进行测试。

请注意，我包括hidden-xl与visible-xl过，但我相信他们是不是真的被任何引导版本。

Answer 4

我最初在这里发布了答案,Bootstrap v.4.x的解决方案.

Twitter Bootstrap 4.1.x的JS断点检测

该引导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;
};

用于Bootstrap v4-beta的JS断点检测

最新的Bootstrap v4-alpha和Bootstrap v4-beta在网格断点上有不同的方法,所以这是实现相同的传统方法:

/**
 * 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本身的原生响应显示类.