2

有没有办法让 twitter bootstrap 向 body 标签（甚至是 html 标签）添加一个类，这将表明它处于什么响应模式？

我想在移动模式下对某个元素进行调整。

但我不能引用它，因为引导程序在更改响应模式时不会在这个庄园中附加类。

如果可能的话，我想我正在寻找某种 js hack，除非有一个简单的设置可以为我做到这一点。

有 3 种模式，如下所示：

  1. 桌面
  2. 药片
  3. 电话

我正在看这类课程：

<body class='desktop'>

然后当它变为平板电脑时：

<body class='tablet'>
4

4 回答 4

4

这是我的方法。它尊重在引导程序中设置的媒体查询断点，因此即使您在LESS 中更改了例如@screen-sm-min，您也不需要在javascript 端进行任何设置。

/**
 * Adds the current bootstrap media-query class to the body element and keeps it updated.
 * Attaches empty spans with bootstrap responsive utitlity classes and checks their visibility.
 * Updates the classes on window resize.
 *  
 * examples:
 * var bsc = $('body').bsClasses(); // classes available and up-to-date from now on
 * $('body').bsClasses('deactivate'); // event listeners removed, span elements removed
 * bsc.activate(); event listeners back on, spans attached again
 * 
 * @see http://getbootstrap.com/css/#responsive-utilities 
 * @see http://getbootstrap.com/css/#grid-media-queries
 */

$.fn.bsClasses = function() {

    var pluginName = 'bsClasses',
        args = Array.prototype.slice.call(arguments),
        element = $(this),

        // these are the "modes" we check for.
        modes = [
           {className: 'phone', element: $('<span class="visible-xs"></span>')},
           {className: 'tablet', element: $('<span class="visible-sm"></span>')},
           {className: 'desktop', element: $('<span class="visible-md"></span>')},
           {className: 'large', element: $('<span class="visible-lg"></span>')}
        ],
        plugin = null,
        fn = null
    ;


    function Plugin() {

        this.update = function() {
            $.each(modes, function(i) {
                element[modes[i].element.is(':visible') ? 'addClass' : 'removeClass'](modes[i].className);
            });
        };

        this.activate = function() {
            $(window).bind('resize.' + pluginName, this.update);
            $.each(modes, function(i) {
                element.append(modes[i].element);
            });
            this.update();
        };

        this.deactivate = function() {
            $(window).unbind('resize.' + pluginName);
            $.each(modes, function(i) {
                element.removeClass(modes[i].className);
                modes[i].element.remove();
            });
        };

        this.activate();
    }





    // if there already is an instance for this element, try to call functions on the instance and bail out.
    if (element.data(pluginName)) {
        plugin = element.data(pluginName);
        fn = args.shift(); 
        if (plugin[fn] instanceof Function ) {
            plugin[fn].apply(plugin, args);
        }
        else {
            window.console.warn('no such method', fn);
        }
        return plugin;
    }


    // otherwise, create a new instance and return it
    plugin = new Plugin(element);
    element.data(pluginName, plugin);
    return plugin;


};
于 2013-12-05T14:34:17.173 回答
1

Twitter boostrap 是基于媒体查询的，所以我会做的，例如创建自己的 css 文件，在其中我使用相同的媒体查询和我想要调整的样式。请参阅此链接以获取想法并查看 bootstrap.css 源中的示例，它们是如何应用样式的。这样你就不需要添加 js 的东西了。是的，根据您的问题信息，我假设您只想调整样式而不是从数据库等加载的东西。

编辑：

如果你想做一些更复杂的事情，甚至使用 javascript，我会通过检查这里有很好讨论的用户代理来做到这一点：user agent stuff to detect mobile

如果您的意图是从 UX 的角度提供很多更改（不仅是样式，还喜欢调整 jQuery 动画或如何使用 javascript），我会使用yepnope.js检查用户代理，然后执行相应的操作。例如，当用户通过移动设备访问网站时，我最近使用它来关闭 jQuery 动画，就像一个魅力，无需观看延迟动画（主要是性能不佳的 android 平板电脑等问题）

于 2012-10-23T15:44:56.357 回答
1

如果您需要做的就是在移动模式下调整元素的样式，我会接受 Mauno 的建议。如果您需要做更多的事情，您可以使用 Modernizr 的媒体查询测试来有条件地更改元素（或像您描述的那样向主体添加一个类）。测试将类似于：

Modernizr.mq('only screen and (max-width: 768px)')

Modernizr 文档有更多关于如何测试媒体查询的细节。

于 2012-10-23T15:52:58.373 回答
1

我在这里参加聚会有点晚了，但刚刚做到了...

$(document).ready(function(){
    assign_bootstrap_mode();
    $(window).resize(function() {
        assign_bootstrap_mode();
    });
});

function assign_bootstrap_mode() {
    width = $( window ).width();
    var mode = '';
    if (width<768) {
        mode = "mode-xs";
    }
    else if (width<992) {
        mode = "mode-sm";
    }
    else if (width<1200) {
        mode = "mode-md";
    }
    else if (width>1200) {
        mode = "mode-lg";
    }
    $("body").removeClass("mode-xs").removeClass("mode-sm").removeClass("mode-md").removeClass("mode-lg").addClass(mode);
}
于 2014-04-14T04:36:29.217 回答