我对我的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只是你所链接的问题]。