如何使用Twitter Bootstrap API检测您正在使用哪个设备视图？ [英] How to detect which device view you're on using Twitter Bootstrap API?

问题描述

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

I have just started to play around with Twitter Bootstrap API for a project I have coming up. The main nav contains 3 main elements:

• 网站导航


• 社交链接导航


• 搜索网站表格

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

I am using the collapse plugin to collapse the site nav and search form when viewing the site on mobile devices. The mobile view has 2 buttons which when clicked toggle the search form or main nav on/off.

但是，如果我切换搜索表单然后将浏览器调整为桌面大小查看搜索表单仍然隐藏在此视图中？

However if I toggle off the search form and then resize my browser to desktop view the search form is still hidden in this view?

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

I have read about using classes such as visible-mobile etc but these seem to clash with the collapse plugin. I also realise I could probably write my own CSS hacks to fix this but thought I'd ask if there was an easier solution.

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

Bootstrap has events for show, shown, hide and hidden so I thought maybe I could write some custom JS which would show or hide these items in each particular device view. However I didn't know how to detect which device I'm using at the time.

想法？

提前致谢

推荐答案

如果您想了解自己所处的环境，请尝试使用Bootstrap自己的CSS类。创建一个元素，将其添加到页面，应用其帮助程序类并检查它是否隐藏以确定它是否是当前环境。以下函数就是这样：

If you want to know what environment you're on, try using Bootstrap's own CSS classes. Create an element, add it to the page, apply its helper classes and check if it's hidden to determine if that's the current environment. The following function does just that:

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

---

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

---

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

这篇关于如何使用Twitter Bootstrap API检测您正在使用哪个设备视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！