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

问题描述

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

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

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

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

我已阅读有关使用诸如visible-mobile 等类的信息，但这些似乎与折叠插件发生冲突.我也意识到我可能会编写自己的 CSS hack 来解决这个问题，但我想我会问是否有更简单的解决方案.

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

想法?

提前致谢

解决方案

如果你想知道你所处的环境，尝试使用 Bootstrap 自己的 CSS 类.创建一个元素，将其添加到页面，应用其辅助类并检查它是否隐藏以确定它是否是当前环境.下面的函数就是这样做的:

引导程序 4

function findBootstrapEnvironment() {让 envs = ['xs', 'sm', 'md', 'lg', 'xl'];让 el = document.createElement('div');document.body.appendChild(el);让 curEnv = envs.shift();for (让 envs.reverse() 的 env) {el.classList.add(`d-${env}-none`);if (window.getComputedStyle(el).display === 'none') {curEnv = 环境；休息;}}document.body.removeChild(el);返回curEnv；}

<小时>

引导程序 3

function findBootstrapEnvironment() {var envs = ['xs', 'sm', 'md', 'lg'];var $el = $('
');$el.appendTo($('body'));for (var i = envs.length - 1; i >= 0; i--) {var env = envs[i];$el.addClass('hidden-'+env);如果 ($el.is(':hidden')) {$el.remove();返回环境；}}}

<小时>

引导程序 2

function findBootstrapEnvironment() {var envs = ['手机'，'平板'，'桌面'];var $el = $('
');$el.appendTo($('body'));for (var i = envs.length - 1; i >= 0; i--) {var env = envs[i];$el.addClass('hidden-'+env);如果 ($el.is(':hidden')) {$el.remove();返回环境；}}}

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:

• site nav
• social links nav
• search the site form

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?

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 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.

Thoughts?

Thanks in advance

解决方案

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:

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

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