2014-09-17 1 views
-1

Мне нужно добавить в тег тела классы (в соответствии с размерами bootstrap sm, md, lg, xl). Есть ли более свободный способ сделать это?добавьте классы размера бутстрапа в тело

function body_classes(){ 
      var current_width = $(window).width(); 
      if(current_width < 750) 
      $('body').addClass("body-xs").removeClass("body-sm").removeClass("body-md").removeClass("body-lg").removeClass("body-xl"); 
      else if(current_width < 970) 
      $('body').addClass("body-sm").removeClass("body-xs").removeClass("body-md").removeClass("body-lg").removeClass("body-xl"); 
      else if(current_width < 1170) 
      $('body').addClass("body-md").removeClass("body-xs").removeClass("body-sm").removeClass("body-lg").removeClass("body-xl");  else if(current_width < 1450) 
      $('body').addClass("body-lg").removeClass("body-xs").removeClass("body-sm").removeClass("body-md").removeClass("body-xl"); else 
      $('body').addClass("body-xl").removeClass("body-xs").removeClass("body-sm").removeClass("body-md").removeClass("body-lg"); 
     } 

     body_classes(); 

     window.onresize = function(event) { 
     body_classes(); 
     }; 
+3

eeh? эти классы не существуют в Bootstrap! Кроме того, вам это совсем не нужно, поскольку вся концепция Bootstrap для вас НЕ ДЕЛАЕТ, что вы хотите сделать! Есть ли какая-то особая причина, по которой вы это делаете? – Devin

+0

Что происходит – Luke

+0

Возможно, вы забыли добавить загрузочные js-файлы на свою страницу. –

ответ

0

jQueryUI имеет метод switchClass, что, вероятно, лучше работать. Кроме того, вы можете удалить несколько классов в switchClass метода с использованием пространства в качестве разделителя:

function body_classes() { 

    var current_width = $(window).width(); 

    if (current_width < 750) { 
     $('body').switchClass("body-sm body-md body-lg body-xl", "body-xs"); 
    } else if (current_width < 970) { 
     $('body').switchClass("body-xs body-md body-lg body-xl", "body-sm"); 
    } else if (current_width < 1170) { 
     $('body').switchClass("body-xs body-sm body-lg body-xl", "body-md"); 
    } else if (current_width < 1450) { 
     $('body').switchClass("body-xs body-sm body-md body-xl", "body-lg"); 
    } else { 
     $('body').switchClass("body-xs body-sm body-md body-lg", "body-xl") 
    } 

}; 

body_classes(); 

window.onresize = function(event) { 
    body_classes(); 
}; 
0
function body_classes() { 

var current_width = $(window).width(); 

if (current_width < 480) { 
    $('body').removeClass('body-sm body-md body-lg body-xl'); 
    $('body').addClass('body-xs'); 
} else if (current_width < 768) { 
    $('body').removeClass('body-sm body-md body-lg body-xl'); 
    $('body').addClass('body-sm'); 
} else if (current_width < 992) { 
    $('body').removeClass('body-sm body-md body-lg body-xl'); 
    $('body').addClass('body-md'); 
} else if (current_width < 1200) { 
    $('body').removeClass('body-sm body-md body-lg body-xl'); 
    $('body').addClass('body-lg'); 
} else if (current_width < 1450) { 
    $('body').removeClass('body-sm body-md body-lg body-xl'); 
    $('body').addClass('body-xl'); 
} 

};

Смежные вопросы