Bootstrap 3 的 .hidden- 和 .visible- 用于手机、平板电脑和台式机在哪里?



我对我的JQuery插件有一个特定的要求,"知道"Bootstrap使用的是什么大小(例如xs, sm, md, lg手机,平板电脑或桌面),所以我决定在body标签中添加类,我可以查询。

基于网络上的几个例子,我想出了这个JQuery Bootstrap,我称之为jstrap:

http://jsfiddle.net/TrueBlueAussie/52VtD/3767/

如果你调整输出窗格的宽度,你会看到颜色的变化基于引导的大小。

// Detect current bootstrap "size" and set appropriate "Size-" class on body element to allow for jQuery access (and additional styling)
function jstrap()
{
    var sizes = ["lg", "md", "sm", "xs", "phone", "tablet", "desktop"];
    var $el = $('<div>'),
        $body = $('body');
    $body.append($el);
    for (var i = 0; i < 7; i++)
    {
        var size = sizes[i];
        if ($el.addClass('hidden-' + size).is(':hidden'))
        {
            // Decorate body with a size class
            $body.addClass("Size-" + size);
        }
        else
        {
            // Remove this size (if previously present) as not applicable
            $body.removeClass("Size-" + size);
        }
    };
    $el.remove();
}
// Call jstrap on DOM load and on window resize
$(function ()
{
    $(window).resize(function ()
    {
        jstrap();
    });
    jstrap();
});

它在body元素上设置Size-样式,基于当前的引导样式,但我发现。hidden-phone,。hidden-tablet &.hidden-desktop似乎不起作用。根据另一个帖子回应。这个功能包含在Bootstrap 3中,但它似乎总是有。hidden-desktop,。hidden-tablet和。hidden-phone设置。

我错过了什么?

注意:这是为。less格式化的,所以没有抱怨代码格式:)

在BS3中,您只需.hidden-xs/sm/md/lg,手机/平板电脑/台式机申请BS2。[顺便说一下,X只是你所链接的问题]。

相关内容

最新更新