Sistema de red fluido o fijo, en diseño receptivo, basado en Twitter Bootstrap

Me estoy confundiendo acerca de las diversas opciones en la cuadrícula bootstrap de twitter y cómo van juntas.

Para empezar, puede tener un fijo ordinario container, o un container-fluid.

Entonces, o uno puede incluir ya sea una ordinaria row, o una fila de fluido, row-fluid. Es decir, ¿puede tener un contenedor fijo con una fila de fluido, o un contenedor de fluido ... con una fila fija?

Luego, además de eso, puede incluir las consultas de medios 'sensibles', o no.

Me estoy confundiendo sobre cómo interactúan estas cosas. Pero comencemos con un ejemplo obvio.

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

Sin embargo, en mi navegador, en esa página de ejemplo en sí, ambas cuadrículas se comportan de manera idéntica. ¿Quizás porque la página de ejemplo usa consultas opcionales de medios receptivos? En ambos ejemplos de cuadrícula, si empiezo a reducir gradualmente la ventana de mi navegador, los elementos de la cuadrícula no se vuelven gradualmente más estrechos: una vez que se alcanza un cierto ancho de límite (sensible), se ajustan a un tamaño más pequeño y nuevamente a anchos de límite adicionales. Pero tanto el ejemplo "fijo" ordinario como el ejemplo "fluido" se comportan exactamente igual aquí, entonces, ¿cuál es la diferencia?

Cuando decida entre ancho fijo y ancho de fluido, debe pensar en términos de su página COMPLETA. En general, desea elegir uno u otro, pero no ambos. Los ejemplos que enumeró en su pregunta están, de hecho, en la misma página de ancho fijo. En otras palabras, la página Scaffolding está utilizando un diseño de ancho fijo. La cuadrícula fija y la cuadrícula de fluidos en la página Andamios no están destinados a ser ejemplos, sino más bien la documentación para implementar diseños de ancho fijo y fluido.

El ejemplo correcto de ancho fijo está aquí . El ejemplo de ancho de fluido adecuado está aquí .

Al observar el ejemplo de ancho fijo, no debería ver que el contenido cambia de tamaño cuando su navegador tiene más de 960 píxeles de ancho. Este es el ancho máximo (fijo) de la página. Las consultas de medios en un diseño de ancho fijo designarán los anchos mínimos para estilos particulares. Verá esto en acción cuando reduzca la ventana de su navegador y vea que el diseño se ajusta a un tamaño diferente.

Por el contrario, el diseño de ancho fluido siempre se estirará para adaptarse a la ventana de su navegador, sin importar qué tan ancho sea. Las consultas de medios indican cuándo cambian los estilos, pero el ancho de los contenedores siempre es un porcentaje de la ventana de su navegador (en lugar de un número fijo de píxeles).

Las consultas de medios 'receptivas' están listas para funcionar. Solo necesita decidir si desea usar un diseño de ancho fijo o ancho fluido para su página.

Anteriormente, en Bootstrap 2, tenía que usar row-fluiddentro de un contenedor de fluido y rowdentro de un contenedor fijo. Con la introducción de Bootstrap 3, row-fluidse eliminó, ya no lo use .

EDITAR : Según los comentarios, algunos jsFiddles para:

• diseño fluido que no responde ,
• diseño fluido receptivo ,
• diseño fijo que no responde ,
• diseño receptivo fijo .

Estos violines están completamente libres de Bootstrap, basados ​​en consultas de medios CSS puros, lo que los convierte en un buen punto de partida para cualquiera que esté dispuesto a crear una solución similar sin usar Twitter Bootstrap.

Interesante discusión. También me hacía esta pregunta. La principal diferencia entre fluido y fijo es simplemente que el diseño fijo tiene un ancho fijo en términos de todo el diseño del sitio web (ventana gráfica). Si tiene una ventana gráfica de 960 px de ancho, cada columna tiene un ancho fijo que nunca cambiará.

El diseño fluido se comporta de manera diferente. Imagine que ha establecido el ancho de su diseño principal en 100% de ancho. Ahora cada columna solo se calculará según su tamaño relativo (es decir, el 25%) y los tramos a medida que se redimensione el navegador. Entonces, según su propósito de diseño, puede seleccionar cómo se comporta su diseño.

Aquí hay un buen artículo sobre fluido versus flexión .

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

Pros

• Los diseños de ancho fijo son mucho más fáciles de usar y más fáciles de personalizar en términos de diseño.
• Los anchos son los mismos para todos los navegadores, por lo que hay menos problemas con las imágenes, formularios, videos y otros contenidos de ancho fijo.
• No hay necesidad de ancho mínimo o ancho máximo, que de todos modos no es compatible con todos los navegadores.
• Incluso si un sitio web está diseñado para ser compatible con la resolución de pantalla más pequeña, 800 × 600, el contenido seguirá siendo lo suficientemente ancho a una resolución mayor para que sea fácilmente legible.

Contras

• Un diseño de ancho fijo puede crear un espacio en blanco excesivo para usuarios con resoluciones de pantalla más grandes, alterando así la "proporción divina", la "Regla de los tercios", el equilibrio general y otros principios de diseño.
• Las resoluciones de pantalla más pequeñas pueden requerir una barra de desplazamiento horizontal, dependiendo del ancho del diseño fijo.
• Se necesitan texturas sin costura, patrones y continuación de imagen para acomodar a aquellos con resoluciones más grandes.
• Los diseños de ancho fijo generalmente tienen un puntaje general más bajo cuando se trata de usabilidad.

Diseño fluido en Bootstrap 3.

A diferencia de Boostrap 2, Bootstrap 3 no tiene una mezcla .container-fluid para hacer un contenedor de fluido. El .container es un diseño de cuadrícula sensible de ancho fijo. En una pantalla grande, hay espacios en blanco excesivos en ambos lados del contenido de la página web.

container-fluid se agrega de nuevo en Bootstrap 3.1

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

.container-fixed;

El mixin .container-fixed establece el contenido en el centro de la pantalla y agrega rellenos. No especifica un ancho de página fijo.

Otro enfoque es usar el estilo CSS de Eric Flowers

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

puede usar esto: https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. eche un vistazo ... este me pareció realmente muy útil. Buen rendimiento, muy ligero, todo importante para el navegador y fluido en sí mismo, por lo que realmente no necesita bootstrap para la red.