有没有办法让 twitter bootstrap 向 body 标签（甚至是 html 标签）添加一个类，这将表明它处于什么响应模式？
我想在移动模式下对某个元素进行调整。
但我不能引用它，因为引导程序在更改响应模式时不会在这个庄园中附加类。
如果可能的话，我想我正在寻找某种 js hack，除非有一个简单的设置可以为我做到这一点。
有 3 种模式，如下所示：
我正在看这类课程：
<body class='desktop'>
然后当它变为平板电脑时：
<body class='tablet'>
这是我的方法。它尊重在引导程序中设置的媒体查询断点，因此即使您在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;
};
Twitter boostrap 是基于媒体查询的，所以我会做的，例如创建自己的 css 文件，在其中我使用相同的媒体查询和我想要调整的样式。请参阅此链接以获取想法并查看 bootstrap.css 源中的示例，它们是如何应用样式的。这样你就不需要添加 js 的东西了。是的，根据您的问题信息，我假设您只想调整样式而不是从数据库等加载的东西。
编辑：
如果你想做一些更复杂的事情，甚至使用 javascript，我会通过检查这里有很好讨论的用户代理来做到这一点：user agent stuff to detect mobile
如果您的意图是从 UX 的角度提供很多更改（不仅是样式，还喜欢调整 jQuery 动画或如何使用 javascript），我会使用yepnope.js检查用户代理，然后执行相应的操作。例如，当用户通过移动设备访问网站时，我最近使用它来关闭 jQuery 动画，就像一个魅力，无需观看延迟动画（主要是性能不佳的 android 平板电脑等问题）
如果您需要做的就是在移动模式下调整元素的样式，我会接受 Mauno 的建议。如果您需要做更多的事情，您可以使用 Modernizr 的媒体查询测试来有条件地更改元素（或像您描述的那样向主体添加一个类）。测试将类似于：
Modernizr.mq('only screen and (max-width: 768px)')
Modernizr 文档有更多关于如何测试媒体查询的细节。
我在这里参加聚会有点晚了，但刚刚做到了...
$(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);
}