mins - Sistema de red fluida o fija, en diseño responsivo, basado en Twitter Bootstrap
correct bootstrap structure (5)
Me estoy confundiendo acerca de las diversas opciones en la cuadrícula de inicio de Twitter , y cómo van juntas.
Para empezar, puede tener un container fijo normal o un container-fluid .
Entonces cualquiera de los dos puede incluir una row ordinaria o una fila fluida, row-fluid . Es decir, puede tener un contenedor fijo con una fila de fluido, o un fluido de contenedor ... ¿con una fila fija?
Luego, además de eso, puede incluir las consultas de medios "sensibles", o no.
Me estoy confundiendo en cuanto a cómo interactúan estas cosas. Pero comencemos con un ejemplo obvio.
En la página de ejemplos , 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, ambas cuadrículas se comportan de manera idéntica. Tal vez porque la página de ejemplo utiliza las consultas de medios de respuesta opcionales? 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 otros anchos de límite. Pero tanto el ejemplo ''fijo'' ordinario como el ejemplo ''fluido'' se comportan exactamente igual aquí, entonces ¿qué diablos es la diferencia?
Cuando decide entre ancho fijo y ancho fluido, debe pensar en términos de su página ENTERO. 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 de Andamios está utilizando un diseño de ancho fijo. La cuadrícula fija y la cuadrícula fluida en la página de Scaffolding no son ejemplos, sino la documentación para implementar diseños de ancho fijo y fluido.
El ejemplo correcto de ancho fijo está here . El ejemplo de ancho de fluido adecuado está here .
Al observar el ejemplo de ancho fijo, no debería ver los tamaños cambiantes de contenido cuando su navegador tiene más de 960px 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.
A la inversa, 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 los medios indican cuándo cambian los estilos, pero el ancho de los contenedores es siempre un porcentaje de la ventana del navegador (en lugar de un número fijo de píxeles).
Las consultas de medios ''sensibles'' están listas para funcionar. Solo debe decidir si desea utilizar un diseño de ancho fijo o ancho de fluido para su página.
Anteriormente, en bootstrap 2, tenía que usar row-fluid dentro de un contenedor de fluido y row dentro de un contenedor fijo. Con la introducción de bootstrap 3, se eliminó el row-fluid , ya no se usa .
EDIT : Según los comentarios, algunos jsFiddles para:
- diseño fluido no sensible ,
- diseño de respuesta fluida ,
- diseño fijo que no responde ,
- Disposición receptiva fija .
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 cualquier persona que quiera crear una solución similar sin usar Twitter Bootstrap.
Discusión interesante. Yo también me estaba haciendo 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 un viewport de 960px de ancho, cada columna tiene un ancho fijo que nunca cambiará.
El trazado fluido se comporta diferente. Imagina que has establecido el ancho de tu diseño principal en 100% de ancho. Ahora, cada columna solo se calculará a su tamaño relativo (es decir, 25%) y se extenderá a medida que se redimensionará el navegador. Por lo tanto, según el propósito de su diseño, puede seleccionar cómo se comporta su diseño.
Aquí hay un buen artículo sobre fluido vs. flexión .
Disposición fluida en bootstrap 3.
A diferencia de Boostrap 2, Bootstrap 3 no tiene una mezcla de líquido de contenedor para hacer un recipiente 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 la pantalla y funciona mejor en pantalla grande. Resulta que es fácil crear un diseño de cuadrícula fluido utilizando los mixins de Bootstrap 3. La siguiente línea hace un diseño de cuadrícula de respuesta fluida:
.container-fix;
La mezcla fija de .container fija el contenido en el centro de la pantalla y agrega rellenos. No especifica un ancho de página fijo.
Otro enfoque es utilizar el estilo CSS de Eric Flowers.
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
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, los formularios, el video y otros contenidos que tienen un ancho fijo.
- No hay necesidad de ancho mínimo o ancho máximo, que no es compatible con todos los navegadores de todos modos.
- 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 en una resolución más grande para que sea fácilmente legible.
Contras
- Un diseño de ancho fijo puede crear un espacio en blanco excesivo para los usuarios con resoluciones de pantalla más grandes, lo que altera 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 una puntuación general más baja cuando se trata de usabilidad.
puede usar esto - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. Echa un vistazo ... Encontré este realmente muy útil. Buen rendimiento, peso muy ligero, todos los navegadores importantes son amigables y fluidos en sí mismos, por lo que realmente no necesita un sistema de arranque para la red.