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

399

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?

jrochkind
fuente
66
¿Quizás este es un mejor ejemplo del estilo de diseño fluido?
Cody Gray

Respuestas:

442

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:

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.

Eterps
fuente
1
hmm, está bien, los documentos me parecieron sugerir que podías mezclar y combinar fluido y arreglado, pero supongo que ese es un uso avanzado para el que no estoy listo. :) Todavía no entiendo cómo los responsivecambios son fijos y fluidos respectivamente, puedes usar responsive (o no) con ambos, fijo y fluido, ¿verdad? ¿Puedes explicar cómo responde cada uno de ellos?
jrochkind
8
Lo confuso para mí sigue siendo que el ejemplo de 'ancho fijo adecuado' cambia los tamaños de las columnas a medida que cambia la ventana del navegador (¿porque responde?) Y también lo hace el ejemplo de ancho de fluido adecuado. Pero supongo que el ejemplo de ancho de fluido lo hace de forma continua, y el ejemplo de respuesta de ancho fijo lo hace en saltos discretos, además de alcanzar un tamaño máximo. ¿Es asi? ¿Qué tal fluido receptivo vs no receptivo?
jrochkind
16
Tu lo tienes. En el diseño de ancho fijo, las columnas cambian cuando la ventana del navegador alcanza un ancho definido en una consulta de medios. Entonces, cuando tenga una ventana de más de 960 píxeles de ancho, se mantendrá en su ancho máximo. Luego, cuando reduzca su navegador a 959 px, se ajustará a un nuevo diseño basado en una consulta de medios que tenga un ancho máximo de 768 px. Entonces, debido a que está viendo un diseño de ancho fijo, las columnas no cambiarán cuando el ancho de su navegador esté entre 768 y 960.
Eterps
3
Y cuando esté viendo un diseño de ancho fluido, los tamaños de las columnas siempre cambiarán para coincidir con el ancho de su navegador. El diseño en sí también cambiará de acuerdo con las consultas de medios, como con un diseño de ancho fijo.
Eterps
12
Lo más importante para recordar es que ancho fijo = píxeles y ancho de fluido = porcentaje. La capacidad de respuesta proviene de todas las elegantes reglas CSS definidas en bootstrap-responsive.css, y esas reglas se aplican a ambos diseños.
Eterps
21

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 .

Piscina
fuente
7

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.
Thilanka De Silva
fuente
6

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;
}
Ying
fuente
2
No entiendo por qué la gente sigue diciendo que "contenedor de líquido" no es compatible con Bootstrap 3, mientras que sí. Acabo de comprobar dos veces y en Bootstrap 3.1.0 está claramente definido.
Bart
10
Eso se debe a que se eliminó en 3 y se volvió a agregar en 3.1 .
Steve Klösters
-2

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.

entusiasta
fuente
1
Si bien este enlace puede responder la pregunta, es mejor incluir aquí las partes esenciales de la respuesta y proporcionar el enlace como referencia. Las respuestas de solo enlace pueden volverse inválidas si la página vinculada cambia. - De la opinión
piet.t
Estoy de acuerdo .. pero esto no es una referencia a la respuesta, esto es un enlace al plugin, donde los los archivos pueden ser descargados, supongo que no puedo adjuntar archivos con respuesta aquí ..
entusiasta del