有沒有辦法讓twitter bootstrap添加一個類到body標籤（或者甚至是html標籤），它將指出它在哪個響應模式？twitter bootstrap添加類到身體指的是它的模式
我想在移動模式下對某個元素進行調整。
但是我不能引用它，因爲引導程序在它改變響應模式時不會在這個莊園中追加類。
我想我正在尋找某種可能的js hack，除非有一個簡單的設置可以爲我做到這一點。
有3種模式，這樣的事情：
和IM尋找這種類：
<body class='desktop'>
然後，當它更改爲平板電腦時：
<body class='tablet'>
Twitter的自舉是基於媒體的質疑所以我會做什麼，將是例如創建，其中我用我想調整的樣式相同的那些媒體查詢自己的CSS文件。看到這個link得到的想法，並從bootstrap.css源看看他們如何應用樣式的例子。這樣你就不需要添加js的東西。是的，根據你的問題的信息，我以爲你只是想調整的風格不是被從數據庫被裝載
編輯：
如果你想要做一些更復雜，甚至有javascript我會通過檢查這裏有很好的討論的用戶代理來做到這一點：user agent stuff to detect mobile
如果您的意圖是從UX角度提供很多更改（不僅僅是樣式，而且還像調整jQuery動畫一樣或者如何使用javascript），我會使用yepnope.js檢查用戶代理，然後執行相應的操作。例如，我最近用它來關閉jQuery動畫，當用戶通過手機訪問網站時，像魅力一樣工作，不需要觀看laggy動畫（主要是性能不佳的android平板電腦等問題）。
如果您只需要do是在移動模式下調整元素的樣式我會用Mauno的建議去做。如果您需要做的不僅僅是這些，您可以使用Modernizr的媒體查詢測試來有條件地更改元素（或者像您所描述的那樣向類中添加一個類）。測試會是這樣的：
Modernizr.mq('only screen and (max-width: 768px)')
的Modernizr docs對如何測試媒體查詢更多詳情。
可以用普通的css完成什麼，應該用普通的css來完成，因爲代碼的複雜性問題，imo;）這就是爲什麼我會說modernizer是好的，但是當涉及到樣式時，我會推薦媒體查詢 - 不管它是唯一的移動設備或幾個設備=仍然我會使用媒體查詢樣式。 –
這是我的方法。它遵守bootstrap中設置的媒體查詢斷點，因此即使您更改了例如@ 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;
};
我有點遲到了這裏，但只是做這個...
$(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);
}
你檢查過[響應實用工具類]（http://twitter.github.com /bootstrap/scaffolding.html#responsive）？它們允許您根據*模式*隱藏或顯示元素。 – Sherbrow
這些類正在使用，但它只是隱藏和顯示的東西。如果你想編輯一些東西呢？ – cardi777