Acabo de empezar a jugar con Twitter Bootstrap API para un proyecto que he venido arriba. El principal de navegación contiene 3 elementos principales:

  • sitio nav
  • vínculos sociales nav
  • buscar el sitio de forma

Estoy usando el colapso plugin para contraer el sitio de navegación y de búsqueda de la forma de visualización de la página en dispositivos móviles. La vista móvil tiene 2 botones que cuando hace clic en alternar el formulario de búsqueda o de navegación on/off.

Sin embargo si puedo desactivar el formulario de búsqueda y, a continuación, cambiar el tamaño de mi navegador a la vista de escritorio el formulario de búsqueda que todavía está oculto en este punto de vista?

He leído acerca de la utilización de clases, tales como visible-mobile, etc, pero estos parecen entrar en conflicto con el colapso del plugin. También me doy cuenta de que podría escribir mi propio CSS hacks para arreglar esto, pero pensé que iba a preguntar si había una solución más fácil.

Bootstrap tiene eventos para mostrar, muestra, esconde y oculta así que pensé que tal vez podría escribir algunos personalizado JS que mostrar o ocultar estos elementos en cada dispositivo en particular a la vista. Sin embargo, yo no sabía cómo detectar el dispositivo que estoy usando en el momento.

Pensamientos?

Gracias de antemano

  • También puede que quiera usar este pequeño snippet, que muestra el tipo de dispositivo actual directamente en la parte superior de la página.
InformationsquelleAutor James Howell | 2013-01-21

7 Comentarios

  1. 148

    Si quieres saber qué ambiente en el que te encuentres, trate de usar Bootstrap propio de las clases CSS. Crear un elemento, se debe agregar a la página, aplicar sus clases auxiliares y comprobar si está oculto para determinar si ese es el entorno actual. La siguiente función no sólo eso:

    Bootstrap 4

    function findBootstrapEnvironment() {
        let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
    
        let el = document.createElement('div');
        document.body.appendChild(el);
    
        let curEnv = envs.shift();
    
        for (let env of envs.reverse()) {
            el.classList.add(`d-${env}-none`);
    
            if (window.getComputedStyle(el).display === 'none') {
                curEnv = env;
                break;
            }
        }
    
        document.body.removeChild(el);
        return curEnv;
    }

    Bootstrap 3

    function findBootstrapEnvironment() {
        var envs = ['xs', 'sm', 'md', 'lg'];
    
        var $el = $('<div>');
        $el.appendTo($('body'));
    
        for (var i = envs.length - 1; i >= 0; i--) {
            var env = envs[i];
    
            $el.addClass('hidden-'+env);
            if ($el.is(':hidden')) {
                $el.remove();
                return env;
            }
        }
    }

    Bootstrap 2

    function findBootstrapEnvironment() {
        var envs = ['phone', 'tablet', 'desktop'];
    
        var $el = $('<div>');
        $el.appendTo($('body'));
    
        for (var i = envs.length - 1; i >= 0; i--) {
            var env = envs[i];
    
            $el.addClass('hidden-'+env);
            if ($el.is(':hidden')) {
                $el.remove();
                return env;
            }
        }
    }
    • Hay alguna API de Javascript para obtener este detalle además de comprobar el marcado de forma dinámica?
    • Parece ser que no funciona, que siempre devuelve undefined, como por Bootstrap 3.0, utilizar esta matriz: ["xs", "sm", "md", "lg"]
    • Yo creo que la mejor, al considerar CSS de equivalencia, sería window.matchMedia, pero no está ampliamente soportado todavía.
    • gracias, acaba de actualizar la respuesta.
    • Ok. Yo también he buscado en Google pero no encuentra nada específicamente en bootstrap.
    • esto sólo parece devolver true en todo momento?
    • en realidad nunca devuelve true, principalmente porque no devuelven valores booleanos, pero las cadenas.
    • He hecho una pequeña, pero útil adicional para jQuery . Échale un vistazo a gitbub – github.com/Parcye/bootstrap_view $.bootstrap_view().activeClass para obtener la clase activa o $.bootstrap_view().queryClass() para consultar la vista y conseguir que la clase actual.
    • Funciona como un encanto para mí, gracias.
    • Esto es impresionante, se le hará la vida más fácil para mí.
    • Mi código HTML contiene cuatro divs con las respectivas clases css que se aplica. En JavaScript es un one-liner: $('#xs, #sm, #md, #lg').filter(':not(:hidden)').attr('id') para obtener activo en el momento de la ventanilla!
    • Que requiere que incluir manualmente marcado específico sobre todo de la página que desea utilizar y que seguramente no se verá como un buen trade-off.
    • ¿no sería más fácil usar el valor de $("body").width() (o window.document.body.clientWidth) ? Si menos de 768, entonces es xs, si <992: sm, si <1200 md, y otros lg ?
    • sería más fácil, pero no tan preciso. Ambos $('body').width() y window.document.body.clientWidth no tomar el ancho de la barra de desplazamiento en la consideración mientras que los medios de consulta. Se podría argumentar que la solución es tan simple como añadir la barra de desplazamiento de ancho pero diferentes navegadores en diferentes sistemas operativos tienen diferentes anchos de barra de desplazamiento. Además, de esta manera usted no tiene que confiar en su defecto los puntos de interrupción y funcionará incluso si usted ha cambiar.
    • Bueno, yo creo que este es el mejor enfoque bootstrap 4 plataforma utiliza las clases para determinar el tamaño del entorno ,Como otras soluciones(alrededor de desbordamiento de pila) Gracias compañero

  2. 42

    Edificio en @Raphael_ y @user568109 ‘s respuestas, en Bootstrap 3, Sensible está construido en.

    Para detectar el tipo de dispositivo en Javascript, crear un objeto que sólo se muestra en su dispositivo necesario el uso de Bootstrap con gran capacidad de respuesta de las clases. A continuación, compruebe su :hidden propiedad.

    Ejemplo:

    1. Crear un <div> panel con el contenido que se muestra en nada más grande que un Pequeño eXtra dispositivo (gracias a @Mario Awad) :

      <div id="desktopTest" class="hidden-xs"></div>

      o, para excluir a los dispositivos específicos:

      <div id="desktopTest" class="visible-sm visible-md visible-lg"></div>
    2. El valor de verificación de #desktopTest:

      if ($('#desktopTest').is(':hidden')) {
          //device is == eXtra Small
      } else {
          //device is >= SMaller 
      }
    • Gran respuesta para el Bootstrap 3. Pequeña mejora: Sustituir a la clase con este: class=»oculto-xs». Hace lo mismo que el tuyo pero es más corto y más legible para los humanos. Saludos.
    • Gracias @MarioAwad, he actualizado mi respuesta para incluir tu recomendación
    • Hay alguna API de Javascript para obtener este detalle además de comprobar el marcado de forma dinámica?
    • No soy consciente de uno. Se podría añadir el div dinámicamente en Javascript, a continuación, comprobar su visibilidad
    • Gracias por la respuesta. Pero este look tipo de hack, no de manera directa…
    • Genial!!! Guardar mis horas!

  3. 5

    Originalmente publicado respuesta aquí, la solución para Bootstrap v. 4.x.

    JS punto de interrupción de detección de Twitter Bootstrap 4.1.x

    La Bootstrap v. 4.0.0 (y la última versión Bootstrap 4.1.x) presentó la actualización de la opciones de la cuadrícula, por lo que el viejo concepto de detección pueden no ser directamente aplicado (ver las instrucciones de migración):

    • Añadido un nuevo sm cuadrícula de nivel inferior 768px para un control más granular. Ahora tenemos xs, sm, md, lg, y xl;
    • xs clases de grid se han modificado para que no requieren el infijo.

    He escrito el pequeño de la función de utilidad que respeta una cuadrícula actualizada de nombres de la clase y una nueva cuadrícula de nivel:

    /**
     * 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;
    };

    JS punto de interrupción de detección para el Bootstrap v4-beta

    La última Bootstrap v4-alfa y Bootstrap v4-beta había enfoque diferente de la red de puntos de interrupción, así que aquí está el legado manera de lograr el 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 nativo sensible pantalla clases del Bootstrap en sí.

    • Bootstrap 4 beta ha cambiado las clases: el uso de d-*-ninguno en lugar de oculta-*-up. He aquí una versión que funciona para el Bootstrap 4 beta – gist.github.com/gurubobnz/115d6fb64eb59c6f057a09fd53c721c0
    • gracias, @GuruBob, he actualizado la respuesta! la respuesta originalmente fue creado cuando sólo 4-alfa estaba en su lugar 😉
    • absolutamente maravilloso. Excelente aplicación. Gracias de YouDoer.com 🙂
  4. 5

    respuesta Original:

    Basado en @Alastair McCormack respuesta, le sugiero que utilice este código

    <div class="visible-xs hidden-sm hidden-md hidden-lg">xs</div>
    <div class="hidden-xs visible-sm hidden-md hidden-lg">sm</div>
    <div class="hidden-xs hidden-sm visible-md hidden-lg">md</div>
    <div class="hidden-xs hidden-sm hidden-md visible-lg">lg</div>

    Sólo tienes que añadir al final de su contenedor div, usted recibirá una simple dinámica de la información acerca de la vista actual.

    Update (2019-03-03):

    Código anterior no es compatible con Bootstrap 4, ya que todos los hidden-* y visible-* clases han sido eliminados. Aquí tienes el nuevo código que se puede utilizar, compatible con Bootstrap 3 y Bootstrap 4 versiones (algunos créditos va a este MODO de respuesta):

    <div class="visible-xs hidden-sm hidden-md hidden-lg hidden-xl d-block d-sm-none">xs</div>
    <div class="hidden-xs visible-sm hidden-md hidden-lg hidden-xl d-none d-sm-block d-md-none">sm</div>
    <div class="hidden-xs hidden-sm visible-md hidden-lg hidden-xl d-none d-md-block d-lg-none">md</div>
    <div class="hidden-xs hidden-sm hidden-md visible-lg hidden-xl d-none d-lg-block d-xl-none">lg</div>
    <div class="hidden-xs hidden-sm hidden-md hidden-lg visible-xl d-none d-xl-block">xl</div>

    Puedes probar con este violín.

    Por favor, tenga en cuenta que he incluido hidden-xl y visible-xl demasiado, pero creo que en realidad no son utilizados por cualquier versión de Bootstrap.

    • Super simple. Me gusta este.
    • Sí, esa es la idea. El OP se preguntó «cómo detectar el dispositivo que estoy usando en el momento», y creo que esta es una solución rápida y efectiva. Yo siempre uso este, y un comentario (o envuélvalo en un div oculto) cuando siento la necesidad de depurar el código.
    • no trabajo. 2019
    • Tienes razón: original visibles y ocultas clases de haber sido eliminado en Boostrap 4. He actualizado la respuesta.
  5. 3

    Mi respuesta es utilizando un mecanismo similar como la presentada por @Raphael_ sin embargo, usted puede hacer un poco más con él. Por favor, consulte esta respuesta para obtener más detalles y del proyecto repositorio de github para la versión más actualizada.

    Ejemplo de punto de interrupción de detección:

    if ( viewport.is('xs') ) {
      //do stuff in the lowest resolution
    }

    La ejecución de código en el cambio de tamaño de ventana (sin que suceda varias veces dentro de un lapso de tiempo de milisegundos):

    $(window).bind('resize', function() {
        viewport.changed(function() {
    
          //do some other stuff!
    
        })
    });
  6. 0

    Nicho caso, pero se puede aplicar @Kar.ma a un Mediawiki con Chameleon (bootstrap de la piel) instalado. Aprobar los «resultados» de la DIV como un argumento de plantilla, haga una prueba en contra de que dentro de la plantilla.

  7. -1

    La combinación de las respuestas de arriba, esta es una que me funciona:

    function findBootstrapDeviceSize() {
      var dsize = ['lg', 'md', 'sm', 'xs'];
      for (var i = dsize.length - 1; i >= 0; i--) {
    
        //Need to add &nbsp; for Chrome. Works fine in Firefox/Safari/Opera without it.
        //Chrome seem to have an issue with empty div's
        $el = $('<div id="sizeTest" class="hidden-'+dsize[i]+'">&nbsp;</div>');
        $el.appendTo($('body'));
    
        if ($el.is(':hidden')) {
          $el.remove();
          return dsize[i];
        }
      }
    
      return 'unknown';
    }
    • No de trabajo. Devuelve ‘xs’ en mi chrome del ordenador portátil y el teléfono.

Dejar respuesta

Please enter your comment!
Please enter your name here