javascript - español - bootstrap tutorial
¿Cómo detectar puntos de interrupción receptivos de Twitter Bootstrap 3 usando JavaScript? (25)
Detecta punto de interrupción sensible de Twitter Bootstrap 4.1.x usando JavaScript
Bootstrap v.4.0.0 (y la última versión de Bootstrap 4.1.x ) introdujeron las opciones de grilla actualizadas, por lo que es posible que el antiguo concepto de detección no se aplique directamente (consulte las instrucciones de migración ):
- Se agregó un nuevo nivel de cuadrícula
smpor debajo de768pxpara obtener un control más detallado. Ahora tenemosxs,sm,md,lgyxl; -
xsclases de cuadrículaxsse han modificado para no requerir el infijo.
Escribí la pequeña función de utilidad que respeta un nombre de clase de grilla actualizado y un nuevo nivel de grilla:
/**
* Detect the current active responsive breakpoint in Bootstrap
* @returns {string}
* @author farside {@link https://stackoverflow.com/users/4354249/farside}
*/
function getResponsiveBreakpoint() {
var envs = {xs:"d-none", sm:"d-sm-none", md:"d-md-none", lg:"d-lg-none", xl:"d-xl-none"};
var env = "";
var $el = $("<div>");
$el.appendTo($("body"));
for (var i = Object.keys(envs).length - 1; i >= 0; i--) {
env = Object.keys(envs)[i];
$el.addClass(envs[env]);
if ($el.is(":hidden")) {
break; // env detected
}
}
$el.remove();
return env;
};
Detecta el punto de interrupción sensible de Bootstrap v4-beta usando JavaScript
Bootstrap v4-alpha y Bootstrap v4-beta tenían un enfoque diferente en los puntos de corte de la grilla, así que esta es la forma heredada de lograr lo mismo:
/**
* Detect and return the current active responsive breakpoint in Bootstrap
* @returns {string}
* @author farside {@link https://stackoverflow.com/users/4354249/farside}
*/
function getResponsiveBreakpoint() {
var envs = ["xs", "sm", "md", "lg"];
var env = "";
var $el = $("<div>");
$el.appendTo($("body"));
for (var i = envs.length - 1; i >= 0; i--) {
env = envs[i];
$el.addClass("d-" + env + "-none");;
if ($el.is(":hidden")) {
break; // env detected
}
}
$el.remove();
return env;
}
Creo que sería útil, ya que es fácil de integrar a cualquier proyecto. Utiliza clases nativas de visualización responsiva del propio Bootstrap.
Currently , Twitter Bootstrap 3 tiene los siguientes puntos de interrupción receptivos: 768px, 992px y 1200px, que representan dispositivos pequeños, medianos y grandes, respectivamente.
¿Cómo puedo detectar estos puntos de interrupción usando JavaScript?
Me gustaría escuchar con JavaScript todos los eventos relacionados que se activan cuando cambia la pantalla. Y para poder detectar si la pantalla es para dispositivos pequeños, medianos o grandes.
¿Ya hay algo hecho? ¿Cuáles son tus sugerencias?
¿Has echado un vistazo a Response.js? Está diseñado para este tipo de cosas. Combine Response.band y Response.resize.
Response.resize(function() {
if ( Response.band(1200) )
{
// 1200+
}
else if ( Response.band(992) )
{
// 992+
}
else if ( Response.band(768) )
{
// 768+
}
else
{
// 0->768
}
});
¿Por qué no usar jQuery para detectar el ancho de css actual de la clase de contenedor de arranque?
es decir..
if( parseInt($(''#container'').css(''width'')) > 1200 ){
// do something for desktop screens
}
También puede usar $ (ventana) .resize () para evitar que su diseño "ensucie la cama" si alguien cambia el tamaño de la ventana del navegador.
Aquí hay otra forma de detectar la vista actual sin poner los números de tamaño de la vista en su javascript.
Vea los fragmentos de css y javascript aquí: https://gist.github.com/steveh80/288a9a8bd4c3de16d799
Después de agregar esos fragmentos a sus archivos css y javascript, puede detectar la ventana gráfica actual de esta manera:
viewport.is(''xs'') // returns boolean
Si desea detectar un rango de ventana gráfica, utilícelo de esta manera
viewport.isEqualOrGreaterThan(''sm'') // returns true for sm, md and lg
Aquí hay una buena forma de detectarlo (quizás sea divertido, pero funciona) y puede usar el elemento necesario para que el código sea claro:
Ejemplo: css:
@media (max-width: 768px) {
#someElement
{
background: pink
}
}
y en el documento de jQuery:
if($(''#someElement'').css(''background'') == ''pink'')
{
doWhatYouNeed();
}
por supuesto, la propiedad CSS es cualquiera.
Aquí mi propia solución simple:
jQuery:
function getBootstrapBreakpoint(){
var w = $(document).innerWidth();
return (w < 768) ? ''xs'' : ((w < 992) ? ''sm'' : ((w < 1200) ? ''md'' : ''lg''));
}
VanillaJS:
function getBootstrapBreakpoint(){
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
return (w < 768) ? ''xs'' : ((w < 992) ? ''sm'' : ((w < 1200) ? ''md'' : ''lg''));
}
Basándose en la respuesta de Maciej Gurban (que es fantástico ... si te gusta esto, por favor, vota por su respuesta). Si está creando un servicio para consultas, puede devolver el servicio actualmente activo con la configuración a continuación. Esto podría reemplazar por completo otras bibliotecas de detección de punto de interrupción (como enquire.js si se incluyen algunos eventos). Tenga en cuenta que he agregado un contenedor con una identificación a los elementos DOM para acelerar el cruce DOM.
HTML
<div id="detect-breakpoints">
<div class="breakpoint device-xs visible-xs"></div>
<div class="breakpoint device-sm visible-sm"></div>
<div class="breakpoint device-md visible-md"></div>
<div class="breakpoint device-lg visible-lg"></div>
</div>
COFFEESCRIPT (AngularJS, pero esto es fácilmente convertible)
# this simple service allows us to query for the currently active breakpoint of our responsive app
myModule = angular.module(''module'').factory ''BreakpointService'', ($log) ->
# alias could be: xs, sm, md, lg or any over breakpoint grid prefix from Bootstrap 3
isBreakpoint: (alias) ->
return $(''#detect-breakpoints .device-'' + alias).is('':visible'')
# returns xs, sm, md, or lg
getBreakpoint: ->
currentBreakpoint = undefined
$visibleElement = $(''#detect-breakpoints .breakpoint:visible'')
breakpointStringsArray = [[''device-xs'', ''xs''], [''device-sm'', ''sm''], [''device-md'', ''md''], [''device-lg'', ''lg'']]
# note: _. is the lodash library
_.each breakpointStringsArray, (breakpoint) ->
if $visibleElement.hasClass(breakpoint[0])
currentBreakpoint = breakpoint[1]
return currentBreakpoint
JAVASCRIPT (AngularJS)
var myModule;
myModule = angular.module(''modules'').factory(''BreakpointService'', function($log) {
return {
isBreakpoint: function(alias) {
return $(''#detect-breakpoints .device-'' + alias).is('':visible'');
},
getBreakpoint: function() {
var $visibleElement, breakpointStringsArray, currentBreakpoint;
currentBreakpoint = void 0;
$visibleElement = $(''#detect-breakpoints .breakpoint:visible'');
breakpointStringsArray = [[''device-xs'', ''xs''], [''device-sm'', ''sm''], [''device-md'', ''md''], [''device-lg'', ''lg'']];
_.each(breakpointStringsArray, function(breakpoint) {
if ($visibleElement.hasClass(breakpoint[0])) {
currentBreakpoint = breakpoint[1];
}
});
return currentBreakpoint;
}
};
});
Bootstrap 4
setResponsiveDivs();
function setResponsiveDivs() {
var data = [
{id: ''visible-xs'', class: ''d-block d-sm-none''},
{id: ''visible-sm'', class: ''d-none d-sm-block d-md-none''},
{id: ''visible-md'', class: ''d-none d-md-block d-lg-none''},
{id: ''visible-lg'', class: ''d-none d-lg-block d-xl-none''},
{id: ''visible-xl'', class: ''d-none d-xl-block''}
];
for (var i = 0; i < data.length; i++) {
var el = document.createElement("div");
el.setAttribute(''id'', data[i].id);
el.setAttribute(''class'', data[i].class);
document.getElementsByTagName(''body'')[0].appendChild(el);
}
}
function isVisible(type) {
return window.getComputedStyle(document.getElementById(''visible-'' + type), null).getPropertyValue(''display'') === ''block'';
}
// then, at some point
window.onresize = function() {
console.log(isVisible(''xs'') === true ? ''xs'' : '''');
console.log(isVisible(''sm'') === true ? ''sm'' : '''');
console.log(isVisible(''md'') === true ? ''md'' : '''');
console.log(isVisible(''lg'') === true ? ''lg'' : '''');
console.log(isVisible(''xl'') === true ? ''xl'' : '''');
};
o minificado
function setResponsiveDivs(){for(var e=[{id:"visible-xs","class":"d-block d-sm-none"},{id:"visible-sm","class":"d-none d-sm-block d-md-none"},{id:"visible-md","class":"d-none d-md-block d-lg-none"},{id:"visible-lg","class":"d-none d-lg-block d-xl-none"},{id:"visible-xl","class":"d-none d-xl-block"}],s=0;s<e.length;s++){var l=document.createElement("div");l.setAttribute("id",e[s].id),l.setAttribute("class",e[s]["class"]),document.getElementsByTagName("body")[0].appendChild(l)}}function isVisible(e){return"block"===window.getComputedStyle(document.getElementById("visible-"+e),null).getPropertyValue("display")}setResponsiveDivs();
El CSS de Bootstrap para la clase .container ve así:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Esto significa que podemos confiar en jQuery(''.container'').css(''width'') para detectar puntos de interrupción sin los inconvenientes de confiar en jQuery(window).width() .
Podemos escribir una función como esta:
function detectBreakpoint() {
// Let''s ensure we have at least 1 container in our pages.
if (jQuery(''.container'').length == 0) {
jQuery(''body'').append(''<div class="container"></div>'');
}
var cssWidth = jQuery(''.container'').css(''width'');
if (cssWidth === ''1170px'') return ''lg'';
else if (cssWidth === ''970px'') return ''md'';
else if (cssWidth === ''750px'') return ''sm'';
return ''xs'';
}
Y luego probarlo como
jQuery(document).ready(function() {
jQuery(window).resize(function() {
jQuery(''p'').html(''current breakpoint is: '' + detectBreakpoint());
});
detectBreakpoint();
});
En lugar de insertar el siguiente muchas veces en cada página ...
<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>
Solo use JavaScript para insertarlo dinámicamente en cada página (tenga en cuenta que lo he actualizado para que funcione con Bootstrap 3 con .visible-*-block :
// Make it easy to detect screen sizes
var bootstrapSizes = ["xs", "sm", "md", "lg"];
for (var i = 0; i < bootstrapSizes.length; i++) {
$("<div />", {
class: ''device-'' + bootstrapSizes[i] + '' visible-'' + bootstrapSizes[i] + ''-block''
}).appendTo("body");
}
En lugar de usar $ (document) .width (), debe establecer una regla CSS que le proporcione esta información.
Acabo de escribir un artículo para obtenerlo con precisión. Véalo aquí: http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/
Es posible que desee agregar esto a su proyecto de arranque para verificar el punto de interrupción activo visualmente
<script type=''text/javascript''>
$(document).ready(function () {
var mode;
$(''<div class="mode-informer label-info" style="z-index:1000;position: fixed;bottom:10px;left:10px">%mode%</div>'').appendTo(''body'');
var checkMode = function () {
if ($(window).width() < 768) {
return ''xs'';
}
else if ($(window).width() >= 768 && $(window).width() < 992) {
return ''sm'';
}
else if ($(window).width() >= 992 && $(window).width() < 1200) {
return ''md'';
}
else {
return ''lg'';
}
};
var compareMode = function () {
if (mode !== checkMode()) {
mode = checkMode();
$(''.mode-informer'').text(mode).animate({
bottom: ''100''
}, 100, function () {
$(''.mode-informer'').animate({bottom: 10}, 100)
});
}
};
$(window).on(''resize'', function () {
compareMode()
});
compareMode();
});
</script>
Aquí está el BOOTPLY
He creado un método jQuery nativo para la detección de tamaño de pantalla de Twitter Bootstrap. Aquí está:
// Screen size ID will be stored in this variable (global var for JS)
var CurrentBootstrapScreenSize = ''unknown'';
$(document).ready(function () {
// <div> objects for all screen sizes required for screen size detection.
// These <div> is hidden for users eyes.
var currentScreenSizeDetectorObjects = $(''<div>'').css({
''position'':''absolute'',
''top'':''-200px''
}).addClass(''current-screen-size'').append([
$(''<div>'').addClass(''device-xs visible-xs'').html('' ''),
$(''<div>'').addClass(''device-sm visible-sm'').html('' ''),
$(''<div>'').addClass(''device-md visible-md'').html('' ''),
$(''<div>'').addClass(''device-lg visible-lg'').html('' '')
]);
// Attach <div> objects to <body>
$(''body'').prepend(currentScreenSizeDetectorObjects);
// Core method for detector
function currentScreenSizeDetectorMethod() {
$(currentScreenSizeDetectorObjects).find(''div'').each(function() {
var className = $(this).attr(''class'');
if($(this).is('':visible'')) {
if(String(className).match(/device-xs/)) CurrentBootstrapScreenSize = ''xs'';
else if(String(className).match(/device-sm/)) CurrentBootstrapScreenSize = ''sm'';
else if(String(className).match(/device-md/)) CurrentBootstrapScreenSize = ''md'';
else if(String(className).match(/device-lg/)) CurrentBootstrapScreenSize = ''lg'';
else CurrentBootstrapScreenSize = ''unknown'';
};
})
console.log(''Current Bootstrap screen size is: ''+CurrentBootstrapScreenSize);
$(''.CurrentBootstrapScreenSize'').first().html(''Bootstrap current screen size: <b>'' + CurrentBootstrapScreenSize + ''</b>'' );
}
// Bind screen size and orientation change
$(window).bind("resize orientationchange", function() {
// Execute screen detection
currentScreenSizeDetectorMethod();
});
// Execute screen detection on page initialize
currentScreenSizeDetectorMethod();
});
JSFillde: https://jsfiddle.net/pstepniewski/7dz6ubus/
JSFillde como ejemplo de pantalla completa: https://jsfiddle.net/pstepniewski/7dz6ubus/embedded/result/
No debería haber ningún problema con alguna implementación manual como la mencionada por @oozic.
Aquí hay un par de libs que puedes echarle un vistazo:
- Plugin http://responsejs.com/ - jQuery - utiliza atributos de datos html y también tiene una js api.
- enquire.js - enquire.js es una biblioteca de JavaScript liviana y pura para responder a consultas de medios de CSS
- SimpleStateManager : un administrador de estado de JavaScript para sitios web receptivos. Está diseñado para ser liviano, no tiene dependencias.
Tenga en cuenta que estas librerías están diseñadas para funcionar independientemente de bootstrap, bases, etc. Puede configurar sus propios puntos de interrupción y divertirse.
No tengo suficientes puntos de reputación para comentar, pero para aquellos que están teniendo problemas para ser "no reconocidos" cuando intentan usar ResponsiveToolKit de Maciej Gurban, también recibí ese error hasta que noté que Maciej realmente hace referencia al conjunto de herramientas desde la parte inferior del página en su CodePen
¡Intenté hacer eso y de repente funcionó! Por lo tanto, use el ResponsiveToolkit pero coloque sus enlaces en la parte inferior de la página:
No sé por qué hace una diferencia, pero lo hace.
Para cualquiera que esté interesado en esto, escribí una detección de punto de interrupción basada en puntos de corte de CSS utilizando TypeScript y Observables. no es muy difícil crear ES6, si elimina los tipos. En mi ejemplo, uso Sass, pero también es fácil de eliminar.
Aquí está mi JSFiddle: https://jsfiddle.net/StefanJelner/dorj184g/
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.7/Rx.min.js"></script>
<div id="result"></div>
SCSS:
body::before {
content: ''xs'';
display: none;
@media screen and (min-width: 480px) {
content: ''s'';
}
@media screen and (min-width: 768px) {
content: ''m'';
}
@media screen and (min-width: 1024px) {
content: ''l'';
}
@media screen and (min-width: 1280px) {
content: ''xl'';
}
}
Mecanografiado:
import { BehaviorSubject } from ''rxjs/BehaviorSubject'';
import { Observable } from ''rxjs/Observable'';
class BreakpointChangeService {
private breakpointChange$: BehaviorSubject<string>;
constructor(): BehaviorSubject<string> {
// initialize BehaviorSubject with the current content of the ::before pseudo element
this.breakpointChange$ = new Rx.BehaviorSubject(this.getBreakpoint());
// observe the window resize event, throttle it and combine it with the BehaviorSubject
Rx.Observable
.fromEvent(window, ''resize'')
.throttleTime(0, Rx.Scheduler.animationFrame)
.withLatestFrom(this.breakpointChange$)
.subscribe(this.update.bind(this))
;
return this.breakpointChange$;
}
// method to get the content of the ::before pseudo element
private getBreakpoint(): string {
// see https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript
return window.getComputedStyle(document.body, '':before'').getPropertyValue(''content'').replace(/[/"/']/g, '''');
}
private update(_, recent): void {
var current = this.getBreakpoint();
if(recent !== current) { this.breakpointChange$.next(current); }
}
}
// if the breakpoint changes, react on it
var $result = document.getElementById(''result'');
new BreakpointChangeService().subscribe(breakpoint => {
$result.innerHTML = Date.now()+'': ''+breakpoint;
});
Espero que esto ayude a alguien.
Puede usar el tamaño de la ventana y el código de los puntos de corte. Usando Angular:
angular
.module(''components.responsiveDetection'', [])
.factory(''ResponsiveDetection'', function ($window) {
return {
getBreakpoint: function () {
var w = $window.innerWidth;
if (w < 768) {
return ''xs'';
} else if (w < 992) {
return ''sm'';
} else if (w < 1200) {
return ''md'';
} else {
return ''lg'';
}
}
};
});
Si no tiene necesidades específicas, puede hacer esto:
if ($(window).width() < 768) {
// do something for small screens
}
else if ($(window).width() >= 768 && $(window).width() <= 992) {
// do something for medium screens
}
else if ($(window).width() > 992 && $(window).width() <= 1200) {
// do something for big screens
}
else {
// do something for huge screens
}
Editar: no veo por qué debería usar otra biblioteca js cuando puede hacer esto solo con jQuery ya incluido en su proyecto Bootstrap.
Si usa Knockout , puede usar el siguiente enlace personalizado para vincular el punto de interrupción de la ventana gráfica actual (xs, sm, md o lg) a un observable en su modelo. La Unión...
- envuelve los 4
divsconvisible-??Clasificar en un div con iddetect-viewporty agregarlo al cuerpo si no existe ya (para poder reutilizar este enlace sin duplicar estos divs) - establece el punto de interrupción de la ventana gráfica actual al observable encuadernado al consultar cuál de los divs es visible
- actualiza el punto de interrupción de la ventana actual cuando se cambia el tamaño de la ventana
ko.bindingHandlers[''viewport''] = {
init: function(element, valueAccessor) {
if (!document.getElementById(''detect-viewport'')) {
let detectViewportWrapper = document.createElement(''div'');
detectViewportWrapper.id = ''detect-viewport'';
["xs", "sm", "md", "lg"].forEach(function(breakpoint) {
let breakpointDiv = document.createElement(''div'');
breakpointDiv.className = ''visible-'' + breakpoint;
detectViewportWrapper.appendChild(breakpointDiv);
});
document.body.appendChild(detectViewportWrapper);
}
let setCurrentBreakpoint = function() {
valueAccessor()($(''#detect-viewport div:visible'')[0].className.substring(''visible-''.length));
}
$(window).resize(setCurrentBreakpoint);
setCurrentBreakpoint();
}
};
ko.applyBindings({
currentViewPort: ko.observable()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div data-bind="viewport: currentViewPort"></div>
<div>
Current viewport breakpoint: <strong data-bind="text: currentViewPort"></strong>
</div>
<div>
(Click the <em>full page</em> link of this snippet to test the binding with different window sizes)
</div>
Usar este enfoque con http://responsejs.com/ es mejor. Response.resize desencadena en cada cambio de tamaño de ventana donde crossover solo se activará si se cambia el punto de corte
Response.create({
prop : "width",
breakpoints : [1200, 992, 768, 480, 320, 0]
});
Response.crossover(''width'', function() {
if (Response.band(1200)) {
// 1200+
} else if (Response.band(992)) {
// 992+
} else if (Response.band(768)) {
// 768+
} else if (Response.band(480)) {
//480+
} else {
// 0->320
}
});
Response.ready(function() {
$(window).trigger(''resize'');
});
Use CSS :before y content property para imprimir el estado del punto de interrupción en <span id="breakpoint-js"> por lo que el JavaScript solo tiene que leer estos datos para convertirlo en una variable para usar dentro de su función.
(ejecuta el fragmento para ver el ejemplo)
NOTA: Agregué algunas líneas de CSS para usar el <span> como bandera roja en la esquina superior de mi navegador. Solo asegúrate de volver a display:none; antes de empujar tus cosas al público
// initialize it with jquery when DOM is ready
$(document).on(''ready'', function() {
getBootstrapBreakpoint();
});
// get bootstrap grid breakpoints
var theBreakpoint = ''xs''; // bootstrap336 default = mobile first
function getBootstrapBreakpoint(){
theBreakpoint = window.getComputedStyle(document.querySelector(''#breakpoint-js''),'':before'').getPropertyValue(''content'').replace(/[''"]+/g, '''');
console.log(''bootstrap grid breakpoint = '' + theBreakpoint);
}
#breakpoint-js {
/* display: none; //comment this while developping. Switch back to display:NONE before commit */
/* optional red flag layout */
position: fixed;
z-index: 999;
top: 0;
left: 0;
color: white;
padding: 5px 10px;
background-color: red;
opacity: .7;
/* end of optional red flag layout */
}
#breakpoint-js:before {
content: ''xs''; /* default = mobile first */
}
@media screen and (min-width: 768px) {
#breakpoint-js:before {
content: ''sm'';
}
}
@media screen and (min-width: 992px) {
#breakpoint-js:before {
content: ''md'';
}
}
@media screen and (min-width: 1200px) {
#breakpoint-js:before {
content: ''lg'';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<span id="breakpoint-js"></span>
<div class="page-header">
<h1>Bootstrap grid examples</h1>
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
</div>
</div>
Ya que bootstrap 4 saldrá pronto, pensé que compartiría una función que lo soporta (xl es ahora una cosa) y que realiza jQuery mínimo para hacer el trabajo.
/**
* Get the Bootstrap device size
* @returns {string|boolean} xs|sm|md|lg|xl on success, otherwise false if Bootstrap is not working or installed
*/
function findBootstrapEnvironment() {
var environments = [''xs'', ''sm'', ''md'', ''lg'', ''xl''];
var $el = $(''<span />'');
$el.appendTo($(''body''));
for (var i = environments.length - 1; i >= 0; i--) {
var env = environments[i];
$el.addClass(''hidden-''+env);
if ($el.is('':hidden'')) {
$el.remove();
return env;
}
}
$el.remove();
return false;
}
Para cualquiera que use knockout.js , quería algunas propiedades observables de knockout.js que me dirían cuándo se tocan los puntos de interrupción. Opté por utilizar el soporte de Modernizr para consultas de medios estilo css, de modo que los números coincidieran con las definiciones de arranque y para obtener los beneficios de compatibilidad de modernizr. Mi modelo de vista directa es el siguiente:
var viewModel = function() {
// depends on jquery, Modernizr
var self = this;
self.widthXsOrLess = ko.observable();
self.widthSmOrLess = ko.observable();
self.widthMdOrLess = ko.observable();
var setWindowSizeVars = function() {
self.widthXsOrLess(!Modernizr.mq(''(min-width: 768px)''));
self.widthSmOrLess(!Modernizr.mq(''(min-width: 992px)''));
self.widthMdOrLess(!Modernizr.mq(''(min-width: 1200px)''));
};
$(window).resize(setWindowSizeVars);
setWindowSizeVars();
};
Bootstrap4 con jQuery, solución simplificada
<div class="device-sm d-sm-none"></div>
<div class="device-md d-md-none"></div>
<div class="device-lg d-lg-none"></div>
<div class="device-xl d-xl-none"></div>
<script>
var size = $(''.device-xl'').is('':hidden'') ? ''xl'' : ($(''.device-lg'').is('':hidden'') ? ''lg''
: ($(''.device-md'').is('':hidden'') ? ''md'': ($(''.device-sm'').is('':hidden'') ? ''sm'' : ''xs'')));
alert(size);
</script>
Editar: esta biblioteca ahora está disponible a través de Bower y NPM. Ver repositorio github para más detalles.
RESPUESTA ACTUALIZADA:
- Ejemplo en vivo: CodePen
- Última versión: repositorio de Github
- ¿No te gusta Bootstrap? Comprobar: demostraciones de la Fundación y demostraciones del marco personalizado
- ¿Tener un problema? Abrir un problema
Descargo de responsabilidad: soy el autor.
Aquí hay algunas cosas que puede hacer usando 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 elementos <div> mencionados a continuación.
RESPUESTA ORIGINAL:
No creo que necesites una gran secuencia de comandos o biblioteca para eso. Es una tarea bastante simple.
Inserta los siguientes elementos justo antes de </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 detección JS fácil, 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 corte más pequeño que podría 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 del punto de interrupción de la siguiente manera:
$(window).resize(function () {
waitForFinalEvent(function(){
if( isBreakpoint(''xs'') ) {
$(''.someClass'').css(''property'', ''value'');
}
}, 300, fullDateString.getTime())
});