61

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

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

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

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

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

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

想法？

提前致谢

4

7 回答 7

162

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

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

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

引导程序 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;
        }
    }
}
于 2013-03-01T04:15:57.203 回答
43

基于 @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 
}
于 2013-08-20T15:25:27.450 回答
6

原始答案：
基于@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 版本兼容（一些功劳归于这个 SO 答案）：

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

你可以用这个 fiddle测试它。

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

于 2015-06-30T11:17:08.410 回答
6

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

Twitter Bootstrap 4.1.x 的 JS 断点检测

Bootstrap v.4.0.0（以及最新版本的Bootstrap 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 本身的原生响应式显示类。

于 2016-05-10T14:19:25.880 回答
3

我的答案是使用类似于@Raphael_ 提出的机制，但是，您可以用它做更多的事情。有关详细信息，请参阅此答案以及最新版本的项目github 存储库。

断点检测示例：

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

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

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

      // do some other stuff!

    })
});
于 2014-06-06T16:21:07.753 回答
0

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

于 2017-12-05T19:57:32.387 回答
-1

结合上面的答案，这个对我有用：

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';
}
于 2013-11-07T20:10:22.903 回答