Bootstrap 4

Question

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

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

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

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

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

Bootstrap有show，show，hide和hidden的事件，所以我想也许我可以写一些自定义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属性。

示例：

创建一个<div>面板，其中没有任何内容会显示在eXtra Small设备上的任何内容上（感谢@Mario Awad）：
```
<div id="desktopTest" class="hidden-xs"></div>
```
或，以排除特定设备：
```
<div id="desktopTest" class="visible-sm visible-md visible-lg"></div>
```

检查#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版本（一些信用额转到this SO answer）：

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

您可以使用this fiddle进行测试。

请注意，我也包括hidden-xl和visible-xl，但我相信它们并没有真正用于任何Bootstrap版本。

Answer 4

我最初是posted answer here， Bootstrap v.4.x 的解决方案。

Twitter Bootstrap 4.1.x的JS断点检测

Bootstrap v.4.0.0 （以及最新版本 Bootstrap 4.1.x ）引入了更新的grid options，因此旧的检测概念可能不直接应用（见the migration instructions）：

在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本身的本地responsive display classes。

Answer 5

我的回答是使用类似@Raphael_提供的机制，但是，你可以用它做更多的事情。有关最新版本，请参阅this answer了解详细信息和项目github repository。

断点检测示例：

if ( viewport.is('xs') ) {
  // do stuff in the lowest resolution
}

在窗口调整大小时执行代码（不会在毫秒内发生多次）：

$(window).bind('resize', function() {
    viewport.changed(function() {

      // do some other stuff!

    })
});

Answer 6

Niche案例，但您可以将@ Kar.ma应用于安装了Chameleon（bootstrap skin）的Mediawiki。将DIV的“结果”作为模板参数传递，然后在模板中对其进行测试。

Answer 7

结合上面的答案，这个适合我：

function findBootstrapDeviceSize() {
  var dsize = ['lg', 'md', 'sm', 'xs'];
  for (var i = dsize.length - 1; i >= 0; i--) {

    // Need to add &nbsp; for Chrome. Works fine in Firefox/Safari/Opera without it.
    // Chrome seem to have an issue with empty div's
    $el = $('<div id="sizeTest" class="hidden-'+dsize[i]+'">&nbsp;</div>');
    $el.appendTo($('body'));

    if ($el.is(':hidden')) {
      $el.remove();
      return dsize[i];
    }
  }

  return 'unknown';
}

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

7 个答案:

Bootstrap 4

Bootstrap 3

Bootstrap 2

Twitter Bootstrap 4.1.x的JS断点检测

Bootstrap v4-beta的JS断点检测