Yo estoy confundido acerca de las diversas opciones en el twitter bootstrap cuadrícula, y cómo van juntos.

Para comenzar con, usted puede tener un fijo común container, o un container-fluid.

A continuación, cualquiera de ellos puede incluir ya sea un ordinario row, o un fluido fila, row-fluid. Es decir, se puede fijar un recipiente con un líquido fila, o un contenedor de fluido de… con una fila fija?

A continuación, en la parte superior de eso, usted puede incluir la ‘sensibles’ preguntas de los medios, o no.

Me estoy confundido en cuanto a cómo estos interacción de las cosas. Pero vamos a empezar con un ejemplo obvio.

Sobre los ejemplos de la página sí mismo, no de lo que se presenta como un ejemplo de una red fija y un cuadrícula fluida

Sin embargo, en mi navegador, en el ejemplo de la página en sí — ambas redes se comportan de forma idéntica. Tal vez porque el ejemplo de la página utiliza el facultativo que responden preguntas de los medios? En tanto cuadrícula ejemplos, si empiezo poco a poco estrechando mi ventana del navegador, los elementos de cuadrícula hacer no conseguir progresivamente más estrecho, una vez que una cierta (sensible) ancho del límite es alcanzado, ajustar a un tamaño más pequeño, y de nuevo a la frontera más anchos. Pero, tanto ordinarias ‘fijo’ Y el ‘líquido’ ejemplo se comportan exactamente de la misma aquí — entonces, ¿qué diablos es la diferencia?

  • Tal vez este es un mejor ejemplo de que el líquido de estilo de diseño?
InformationsquelleAutor jrochkind | 2012-03-20

5 Comentarios

  1. 443

    Cuando usted decide entre ancho fijo y fluido de ancho que se necesita para pensar en términos de la TOTALIDAD de su página. Por lo general, usted desea elegir uno o el otro, pero no ambos. Los ejemplos que figuran en su pregunta son, en realidad, en el mismo fija el ancho de la página. En otras palabras, el Andamiaje de la página es el uso de un ancho fijo de diseño. El red fija y cuadrícula fluida en el Andamiaje de la página no están destinados a ser ejemplos, sino más bien la documentación para la implementación de fijo y fluido ancho de diseños.

    El buen ancho fijo ejemplo es aquí.
    El líquido anchura ejemplo es aquí.

    Al observar el ancho fijo ejemplo, no se debe ver el contenido de cambiar los tamaños de cuando su navegador de internet es mayor que la de 960px de ancho. Este es el máximo (fija) ancho de la página. Consultas de medios de comunicación en un ancho fijo de diseño designará el ancho mínimo de los estilos particulares. Usted verá en acción al reducir la ventana de su navegador y ver el diseño de ajustar a un tamaño diferente.

    Por el contrario, el fluido diseño de ancho-se siempre estirar para ajustarse a la ventana de tu navegador, no importa cuán amplia es. Las consultas de medios indican que cuando los estilos cambian, pero la anchura de los contenedores son siempre un porcentaje de la ventana del navegador (en lugar de un número fijo de píxeles).

    El ‘sensibles’ consultas de medios de comunicación están listos para ir. Usted sólo tiene que decidir si desea utilizar un ancho fijo o fluido diseño de ancho de la página.

    Anteriormente, en bootstrap 2, tenía que usar row-fluid en el interior de un recipiente de fluido y row en el interior de un contenedor fijo. Con la introducción de bootstrap 3, row-fluid fue eliminado, ya no lo uso.

    EDITAR: en cuanto a los comentarios, algunos jsFiddles para:

    Estos violines son completamente Bootstrap libre, basada en la pura consultas de medios CSS, lo que los convierte en un buen punto de partida, para cualquier persona dispuesta a embarcaciones de solución similar sin el uso de Twitter Bootstrap.

    • hmm, bueno, la documentación que a mí me parecía sugerir que usted puede mezclar y combinar líquido y fijo, pero supongo que es de uso avanzado no estoy listo para. 🙂 Yo todavía no entiendo cómo responsive cambios fijos y líquido respectivamente — puede utilizar sensible (o no) con ambos fijo y fluido, a la derecha? Puede usted explicar cómo responden los efectos de cada uno de ellos?
    • el confuso cosa para mí sigue siendo más que el «buen ancho fijo’ ejemplo, cambiar el tamaño de columnas de la ventana del navegador los cambios (beause es sensible?) Y así lo hace el líquido ancho de ejemplo. Pero supongo que el líquido ancho de ejemplo lo hace continuamente, y el ancho fijo sensible ejemplo lo hace en saltos discretos, así como el logro de un tamaño máximo? Es que es? Cómo sobre el líquido sensible vs no responde?
    • Lo tienes. En el diseño de ancho fijo, las columnas de cambio cuando la ventana del navegador alcanza un ancho definido en una consulta de medios de comunicación. Así que cuando usted tiene su ventana mayor de 960px de ancho, va a permanecer en su ancho máximo. Entonces, cuando usted reducir el tamaño de su navegador para 959px, se ajustará a un nuevo diseño basado en una consulta de medios de comunicación que tiene una anchura máxima de 768px. Así que, ya que está viendo un ancho fijo de diseño, las columnas no cambio cuando el ancho del navegador es entre 768 y 960.
    • Y cuando usted está viendo un fluido-diseño de ancho, el tamaño de columna se siempre cambiar para que coincida con su navegador de ancho. La disposición también va a cambiar de acuerdo a las preguntas de los medios, como con un ancho fijo de diseño.
    • La cosa más importante a recordar es que de ancho fijo = píxeles, y el líquido width = por ciento. La respuesta viene de todos los elegantes reglas CSS definidas en bootstrap-responsive.css, y estas reglas se aplican tanto a los diseños.
    • yo no puedo decir cuál es la diferencia entre twitter bootstrap líquido sensible frente a los no-sensible, aunque. tal vez sólo tengo que jugar con él más. El líquido ya cambia con el tamaño de la ventana, lo que es la parte sensible cuando usted tiene líquido sensible?
    • Ok, para que el líquido sensible, hacer esto: Abrir el líquido de ejemplo y maximizar la ventana. Se puede observar como el menú de navegación es una lista horizontal. Ahora poco a poco reducir la anchura de su navegador. En algún punto, la barra de navegación va a cambiar por lo que aparece un botón, y cuando se pulsa el botón, el menú aparece como vertical. Así que con el fluido, lo único que cambia es el ancho de los elementos. Con un diseño de respuesta, usted puede cambiar el alguna regla css basado en el ancho del navegador. Ver editado mi respuesta para algunos jsFiddle ejemplos.
    • Hizo el JSFiddle Ejemplos anteriores ayudar a todos?
    • Ellos me hicieron a mí, de cualquier forma 🙂 muchas Gracias por este debate!
    • Por cierto, ¿por qué el diseño de ancho fijo no contienen una barra lateral? Es igualmente utilizable, ¿no?
    • El diseño de ancho fijo absolutamente puede incluir una barra lateral. Mi proyecto actual que utiliza ahora. Sólo asegúrese de que está dentro de su container-fluid div, y asignarle una spanX clase. Pedí una barra lateral relacionados con la cuestión que puede ayudar a usted aquí: stackoverflow.com/questions/9386441/…
    • Sí, me imaginé que fuera durante la prueba. Supongo que los médicos tienen la culpa (de nuevo? :0) – no se ve como el fluido es el único que puede contener. Gracias 🙂
    • súper útil pregunta, respuesta y discusión aquí, muchas gracias
    • por favor, puedes editar tu respuesta y agregar todos los 4 combinación con la descripción exacta de las características de diseño para cada uno de ellos? Significa: fijo normal, fijo-sensible, de líquido normal, el líquido sensible? Este es un excelente post, pero todavía no entienden completamente lo que es el «fijo-sensible» de diseño.
    • Hey @jm666, he añadido un par de ejemplos más. Fijo-respuesta es casi exactamente el mismo que el líquido sensible, sólo utiliza los valores de los píxeles de ancho en lugar de %. Así, en un fijo normal de la página, sus anchos nunca va a cambiar. Usted puede reducir el navegador tanto como usted desea y las columnas en el ejemplo siempre será 130px cada uno. En el fijo sensible ejemplo, puede estirar y encoger la ventana de tu navegador, y las columnas seguirá siendo el mismo ancho hasta que la ventana se convierte en menos de 300px de ancho. Cuando eso sucede, la consulta de medios de comunicación activa y aplica las nuevas reglas css.
    • Muchas gracias! Tengo una tarea donde tengo que poner las imágenes en una cuadrícula. Cada uno es acerca de 300px de ancho. Quiero usar el líquido de la versión de bootstrap. Estoy practicando el móvil de la filosofía primera. así, por 320 px voy a mostrar solo 2 imágenes, pero a medida que aumente el navegador, más imágenes de flujo en la vista. Esto requiere más puntos de interrupción de bootstap usos: hay un punto de ruptura para cada nueva imagen/fila. ¿Tiene usted alguna idea de cómo conseguir esto utilizando bootstap. Yo he hecho algo, pero me gustaría escuchar/ver cómo le gustaría acercarse a ella. Probablemente voy a utilizar un ancho máximo de 1800px después de que las cosas están en el centro. thnx!
    • No se puede tener un fluido fila en un diseño fijo? No sé por qué no se puede.
    • Usted absolutamente puede mezclar el líquido con las filas en un diseño fijo. No es común, aunque, como tener porciones de la página comportarse de manera diferente que otros puedan causar confusión a los usuarios. Si usted necesita para hacer esto, simplemente reemplazar los píxeles de la anchura de las etiquetas span con valores de porcentaje, o crear sus propios % basado div y estilo para encajar dentro de la secuencia de arranque del andamio.
    • con los ejemplos que se proporcionan, se le dice que si px se utiliza como el ancho de la unidad, a continuación, utilizar fixed. si % se utiliza como el ancho de la unidad, a continuación, utilizar fluid?
    • Que es la convención utilizada por Bootstrap. USTED escoge fijo o fluido. Una vez que lo BOOTSTRAP establecerá px para la renta fija, y el % de líquido.
    • Así, una pregunta de seguimiento en esto: el Uso de un diseño fijo, con un tamaño completo de la imagen de cabecera detrás de su sitio grande título de la Bootstrap – que tamaño debo de cultivos que mi imagen?
    • Bootstrap va a cambiar el tamaño de la etiqueta img. Así que cosecha el mayor tamaño que desee.
    • Hay una forma de «bloquear» los tamaños fijos? Por ejemplo, la mina se ve perfecto en 1000px, pero se ve mal cuando se encoge. (Es por eso que yo estaba usando lo que yo pensaba que era un «fijo» de diseño.) Puedes hacer eso con bootstrap?
    • respondieron a esta pregunta fuera ASÍ, pero lo pongo aquí para el futuro info: Suena a que quieres fijo, pero no responde. No utilizar bootstrap-responsive.css (o el equivalente a menos de archivos). Usted puede probar esto muy rápidamente por comentar las dos últimas líneas de bootstrap.min.css.
    • Gracias @eterps por Favor actualizar el link de tu respuesta en «El líquido anchura ejemplo es aquí.» Tengo un 404 «no Hay una Página de GitHub aquí.» cuando se va a la twitter.github.io/bootstrap/examples/fluid.html
    • Gracias por el aviso. He arreglado los enlaces a señalar a la nueva ubicación para el Bootstrap 2.3 docs.
    • Aunque no es el punto, esta es la primera vez que he sido demostrado que la distinción entre el fluido y sensible.

  2. 21

    Discusión interesante. Me hacía esta pregunta demasiado. La principal diferencia entre el fluido y el fijo es simplemente que el diseño fijo tiene un ancho fijo en términos de la totalidad del diseño de la página web (viewport). Si usted tiene un 960px de ancho del viewport cada columna tiene un ancho fijo que nunca va a cambiar.

    El diseño fluido que se comporta diferente. Imagina que tienes establecer la anchura de su diseño principal a 100% de ancho. Ahora cada columna se calculará únicamente en base a su tamaño relativo (es decir, 25%) y se extiende como el navegador se cambia de tamaño. Así que basado en sus propósitos de presentación, puede seleccionar cómo su diseño se comporta.

    Aquí es un buen artículo sobre el líquido vs flex.

  3. 7

    Fuente – http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

    Pros

    • De ancho fijo diseños son mucho más fáciles de usar y más fácil de personalizar en términos de diseño.
    • Anchos son los mismos para cada navegador, por lo que hay menos problemas con las imágenes, las formas, vídeo y otros contenidos que son de ancho fijo.
    • No hay necesidad de min-width o max-width, que no es soportada por todos los navegadores de todos modos.
    • Incluso si un sitio web está diseñado para ser compatible con la menor resolución de pantalla de 800×600, el contenido seguirá siendo el ancho suficiente en una resolución más grande para que sea fácilmente legible.

    Contras

    • Un ancho fijo de diseño puede crear un exceso de espacio en blanco para que los usuarios con mayores resoluciones de pantalla, por lo tanto perturbador «proporción divina», la «Regla de los Tercios,» equilibrio general y otros principios de diseño.
    • Resoluciones de pantallas más pequeñas pueden requerir una barra de desplazamiento horizontal, en función de la estructura fija de ancho.
    • Perfecta de texturas, patrones y de la imagen de continuación son necesarios para dar cabida a aquellos con mayores resoluciones.
    • De ancho fijo diseños generalmente tienen menor puntuación global cuando se trata de la facilidad de uso.
  4. 6

    Diseño fluido en Bootstrap 3.

    A diferencia de Boostrap 2, Bootstrap 3 no tiene una .contenedor de fluido de mixin para hacer un recipiente de fluido. El .el contenedor es un ancho fijo diseño de cuadrícula de respuesta. En una pantalla de gran tamaño, no son excesivos los espacios en blanco en ambos lados de una página Web de contenido.

    container-fluid se agrega en Bootstrap 3.1

    Un el diseño de cuadrícula fluida utiliza todo el ancho de la pantalla y funciona mejor en pantalla grande. Resulta que es fácil crear un fluido diseño de cuadrícula usando Bootstrap 3 mixins. La siguiente línea hace un fluido diseño de cuadrícula de respuesta:

    .contenedor fijo;

    El .contenedor fijo mixin establece el contenido en el centro de la pantalla y añadir rellenos. No especifica fija el ancho de la página.

    Otro enfoque es el uso de Eric Flores de estilo CSS

    .my-fluid-container {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
    }
    • No entiendo por qué la gente sigue diciendo que ‘container-fluid’ no es compatible con Bootstrap 3, mientras que es. Acabo de volver a verificar y en Bootstrap 3.1.0 es claramente definidos.
    • Esto es debido a que fue eliminado en 3 agrega en 3.1.
  5. -2

    usted puede utilizar este – https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. echa un vistazo.. creo que este es uno realmente muy útil. Buen rendimiento, muy ligera de peso, todos los amigable con los buscadores y el líquido en sí mismo, así que realmente no necesita bootstrap para la cuadrícula.

    • Mientras que este vínculo puede responder a la pregunta, es mejor incluir a las partes esenciales de la respuesta aquí y proporcionar el enlace de referencia. Enlace-sólo respuestas puede ser válido si la página enlazada cambios. – De Revisión
    • Estoy de acuerdo .. pero esta no es una referencia a la respuesta , este es el enlace al plugin , donde los archivos se pueden descargar, supongo que no puedo adjuntar archivos con la respuesta aquí..

Dejar respuesta

Please enter your comment!
Please enter your name here