Editar: esta biblioteca ahora está disponible a través de Bower y NPM. Vea el repositorio de github para más detalles.
RESPUESTA ACTUALIZADA:
Descargo de responsabilidad: soy el autor.
Aquí hay algunas cosas que puede hacer con la última versión (Responsive Bootstrap Toolkit 2.5.0):
// Wrap everything in an IIFE
(function($, viewport){
// Executes only in XS breakpoint
if( viewport.is('xs') ) {
// ...
}
// Executes in SM, MD and LG breakpoints
if( viewport.is('>=sm') ) {
// ...
}
// Executes in XS and SM breakpoints
if( viewport.is('<md') ) {
// ...
}
// Execute only after document has fully loaded
$(document).ready(function() {
if( viewport.is('xs') ) {
// ...
}
});
// Execute code each time window size changes
$(window).resize(
viewport.changed(function() {
if( viewport.is('xs') ) {
// ...
}
})
);
})(jQuery, ResponsiveBootstrapToolkit);
A partir de la versión 2.3.0, no necesita los cuatro <div>elementos mencionados a continuación.
RESPUESTA ORIGINAL:
No creo que necesites ningún gran script o biblioteca para eso. Es una tarea bastante simple.
Inserte los siguientes elementos justo antes </body>:
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
Estos 4 divs le permiten verificar el punto de interrupción actualmente activo. Para una fácil detección de JS, use la siguiente función:
function isBreakpoint( alias ) {
return $('.device-' + alias).is(':visible');
}
Ahora, para realizar una determinada acción solo en el punto de interrupción más pequeño que pueda usar:
if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}
La detección de cambios después de DOM listo también es bastante simple. Todo lo que necesita es un oyente de tamaño de ventana ligero como este:
var waitForFinalEvent = function () {
var b = {};
return function (c, d, a) {
a || (a = "I am a banana!");
b[a] && clearTimeout(b[a]);
b[a] = setTimeout(c, d)
}
}();
var fullDateString = new Date();
Una vez que esté equipado con él, puede comenzar a escuchar los cambios y ejecutar funciones específicas de punto de interrupción de esta manera:
$(window).resize(function () {
waitForFinalEvent(function(){
if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}
}, 300, fullDateString.getTime())
});
<div class="d-none d-?-block"></div>cambia la visibilidad (inserte el punto de interrupción deseado). Esas clases CSS son para Bootstrap 4 ... use lo que funcione en Bootstrap 3. Mucho más rendimiento que escuchar el evento de cambio de tamaño de ventana.