Question

有没有办法让twitter bootstrap在body标签（甚至是html标签）中添加一个类，它会指示它所处的响应模式？

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

但是我无法引用它，因为当改变响应模式时，bootstrap不会在这个庄园中附加类。

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

有3种模式，如下所示：

桌面
片剂
电话

我正在看这类课程：

<body class='desktop'>

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

<body class='tablet'>

Answer 1

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

/**
 * 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;


};

Answer 2

Twitter boostrap基于媒体查询，所以我会做的，例如创建自己的css文件，我使用那些我想要调整的样式的相同媒体查询。请参阅此link以获取想法并查看bootstrap.css源代码示例如何应用样式。这样你就不需要添加js了。是的，基于你的问题信息，我假设你只想调整样式而不是从db等加载的东西。

修改

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

如果您的目的是从UX的角度提供很多变化（不仅仅是样式，而且还要调整jQuery动画或者如何使用javascript），我会使用yepnope.js检查用户代理，然后执行相应的操作。例如，我最近使用它在用户通过手机访问网站时关闭jQuery动画，像魅力一样工作，无需观看延迟动画（主要是表现不佳的Android平板电脑等问题）。

Answer 3

如果你需要做的只是在移动模式下调整元素的样式，我会选择Mauno的建议。如果您需要做更多的事情，可以使用Modernizr的媒体查询测试来有条件地更改元素（或者像您所描述的那样将类添加到正文中）。测试将是这样的：

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

Modernizr docs详细介绍了如何测试媒体查询。

Answer 4

我在这里参加派对有点晚了，但就这样做了......

$(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);
}

twitter bootstrap将类添加到指向它的模式的body

4 个答案: