Gon*_*ing 3 jquery twitter-bootstrap
我有一个特殊的要求,我的JQuery插件"知道"Bootstrap使用的大小(例如xs,sm,md,lg手机,平板电脑或桌面),所以我决定将类添加到我可以查询的body标签.
基于网络上的几个例子,我想出了这个JQuery for Bootstrap我调用了jstrap:
如果您调整输出窗格宽度,您将看到颜色根据引导程序大小更改.
// 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();
});
Run Code Online (Sandbox Code Playgroud)
它设置Size-样式的body元素,基于当前引导的造型,但我发现.hidden电话,.hidden,平板电脑和.hidden桌面不会出现工作.据另一篇文章response.less和其他响应较少的文件从Bootstrap中丢失,该功能包含在bootstrap 3中,但似乎总是有.hidden-desktop,.hidden-tablet和.hidden-phone set.
我错过了什么?
注意:这是格式化为.less,所以没有关于代码格式的抱怨:)