398 votos

Sistema de rejilla fija o fluido, en diseño, basado en Twitter Bootstrap

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

Para comenzar con, usted puede tener una ordinario fijo container, o un container-fluid.

Entonces uno puede incluir una ordinario row, o un líquido fila, row-fluid. Es decir, se puede fijar un recipiente con un líquido fila, o un contenedor de fluido... con una fila fija?

Luego, encima de eso, usted puede incluir el '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.

En los ejemplos de la página en sí misma, hay de lo que se presenta como un ejemplo de una red fija y una cuadrícula fluida, que

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 la página de ejemplo utiliza el facultativo que responden preguntas de los medios? En tanto cuadrícula ejemplos, si empiezo poco a poco el estrechamiento de mi ventana del navegador, la cuadrícula de elementos no conseguir poco a poco más estrecho-una vez determinados (responder) el 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 " fluido " ejemplo se comportan exactamente de la misma aquí -- entonces, ¿qué diablos es la diferencia?

443voto

eterps Puntos 7567

Cuando usted decide entre ancho fijo y fluido de ancho que se necesita para pensar en términos de su página ENTERA. Generalmente, usted quiere que escoger una o la otra, pero no ambas. 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 de cuadrícula fluida, que en el Andamiaje de la página no son ejemplos, sino más bien la documentación de la aplicación de fijo y fluido ancho de diseños.

El buen ancho fijo ejemplo está aquí. El líquido ancho ejemplo está aquí.

Al observar el ancho fijo ejemplo, no se debe ver el contenido de cambiar los tamaños de cuando tu navegador es mayor que 960px de ancho. Este es el máximo (fijo) 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 tu navegador y ver la disposición de ajustar a un tamaño diferente.

Por el contrario, el líquido de ancho diseño siempre estirar para ajustarse a la ventana de tu navegador, no importa qué tan amplia se pone. Las consultas de medios de comunicación indican que cuando los estilos cambian, pero el ancho 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 usar un ancho fijo o fluido ancho de diseño para su página.

Cuando la creación de las filas, asegúrese de utilizar row con un diseño de ancho fijo, y row-fluid con un fluido de ancho. No mezclar y coincidir (a menos que tenga una muy buena razón para hacer esto).

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

Estos violines son completamente Bootstrap libre, basada en el más puro CSS preguntas de los medios, que las convierte en un buen punto de partida para cualquier persona dispuesta a embarcaciones similares solución sin utilizar Twitter Bootstrap.

21voto

Lido Puntos 168

Interesante debate. Me estaba haciendo esta pregunta. 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 área de visualización de 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 para el 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 será redimensionada. Así que basado en su diseño el propósito de que usted puede seleccionar la forma en que el diseño se comporta.

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

7voto

Thilanka De Silva Puntos 415

Pros

  • De ancho fijo diseños son mucho más fáciles de usar y fáciles de personalizar en términos de diseño.
  • Los anchos son los mismos para cada navegador, por lo que hay menos problemas con las imágenes, formularios, vídeos 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 lo suficientemente ancha a mayor resolución para ser fácilmente legibles.

Los 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 "divina proporción", 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, dependiendo de la estructura fija de ancho.
  • Perfecta de texturas, patrones y de la imagen de continuación son necesarios para acomodar a las personas con mayores resoluciones.
  • De ancho fijo diseños generalmente tienen menor puntuación global cuando se trata de la facilidad de uso.

6voto

Ying Puntos 541

Diseño fluido en Bootstrap 3.

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

container-fluid se agrega en Bootstrap 3.1

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

.container-fijo;

El .container-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;
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X