Bootstrap y Foundation son dos de mis marcos frontales favoritos, especialmente en prototipos para sitios web de desarrollo rápido. Todos proporcionan componentes listos para usar, acelerando mi flujo de trabajo. Excepto por algunas pequeñas diferencias, la mayoría de sus características básicas me parecen similares.
En este artículo, presentaré la construcción básica de sus cuadrículas. Primero, le mostraré cómo se construyen, describe sus componentes principales y cómo muestran diferencias con el tamaño de diferentes pantallas. Luego te ayudaré a agregar conocimiento a través de una práctica de ejemplo de la vida real.
¡Comencemos juntos!
Comparación 1: Comparación de consultas de medios
Antes de analizar las estructuras ráster de Bootstrap y Foundation, echemos un vistazo a los puntos de interrupción que proporcionan para el diseño de respuesta. Esto es lo que cada cuadro proporciona para establecer el número de barcos disponibles.
Bootstrap especifica 4 puntos de interrupción de consultas de medios basados en PX. Se muestra de la siguiente manera:
La fundación contiene 5 consultas de medios basadas en EM. Se muestran en la siguiente tabla:
Para darle una forma de comprender cómo funcionan las consultas de los medios, le sugiero que consulte la demostración de Bootstrap y las demostraciones de la base relacionadas. Pero si todavía estás confundido, la siguiente parte explicará todo.
Nota: Las pantallas de malla y súper grandes de Foundation están deshabilitadas de forma predeterminada. Si desea usarlos, debe "cancelar" y establecer los valores de las dos variables $ incluido-xl-html-grid-classes y $ include-xl-html-block-grid-classes a verdadero. Puede encontrar estas variables en la sección _settings.scss.
Comparación 2: estructura de cuadrícula
Tanto Bootstrap como Foundation proporcionan una cuadrícula en movimiento de la primera columna que consiste en filas y columnas. Las columnas están anidadas en filas. La suma de las columnas en cada fila es de 12 columnas. Las filas también se pueden anidar en columnas.
Estos dos marcos contienen muchas clases predefinidas que puede usar para establecer el tamaño de una columna. Como se mencionó anteriormente, Bootstrap contiene 4 puntos de interrupción de consultas de medios y base contiene 5. Para cada cuadrícula, tienen diferentes prefijos de clase que se pueden usar para establecer el tamaño de la columna (ver las dos tablas anteriores).
Las líneas de cuadrícula de arranque también requieren elementos encapsulados. Esto debe tener un contenedor o clase de contenedor-fluido. La clase de contenedor en un elemento tiene un valor fijo, y su valor depende de la ventana (consulte la primera tabla anterior), mientras que la clase de contenedor-fluido en un elemento se extiende al ancho completo de la ventana del navegador.
Comparación 3: columna! = 12?
Es posible que el número de columnas en un sistema de cuadrícula no sea igual a 12. En este caso, Bootstrap flotará la última columna a la izquierda, y la base la flotará hacia la derecha. Si desea anular el comportamiento predeterminado de Foundation, agregue la clase .Ed en la última columna.
Comparación 4: clase funcional
Ambos marcos proporcionan clases adicionales que le permiten definir su malla de manera muy flexible.
Las clases visibles le permiten elegir mostrar u ocultar contenido en pantallas de un tamaño específico. La clase de compensación le permite centrar columnas incompletas o ajustar el espacio entre ellas. Por supuesto, hay otras clases que pueden especificar el orden de las columnas de acuerdo con diferentes dispositivos.
Comparación cinco: bloques de cuadrícula
Además de la cuadrícula predeterminada, Foundation admite otra característica de trama, a saber, bloques de cuadrícula. Le permite crear columnas del mismo tamaño con la marca más pequeña. Para usarlo, defina la fila como el elemento UL y las columnas en la fila como el elemento LI. Luego especifique el tamaño de la columna aplicando la clase relevante al elemento UL (consulte la segunda tabla anterior para más detalles).
En este momento, puede preguntarse, ¿cuál es la diferencia entre una cuadrícula regular y un bloque de cuadrícula? Echemos un vistazo a las dos diferencias entre ellos:
A diferencia de la cuadrícula predeterminada, (bloques de cuadrícula) cada fila tiene un ancho máximo aplicado, por lo que siempre se cubre toda la ventana del navegador.
Los bloques de malla solo se pueden usar en proyectos de igual tamaño.
Usando la cuadrícula
Ahora que tenemos una buena comprensión de las cuadrículas de estos dos marcos, veamos cómo podemos usarlos para crear una página de arranque y la página de base correspondiente.
La siguiente captura de pantalla muestra el primer diseño que vamos a construir:
Comenzando con Bootstrap, definimos un elemento con la clase de contenedor. Como se discutió anteriormente, esta clase establecerá un ancho fijo para este elemento de acuerdo con el tamaño de la pantalla (consulte la tabla en Bootstrap para más detalles). Luego, agregamos un elemento con la fila de clase.
Ahora estamos listos para configurar nuestras columnas. Para pantallas grandes, queremos 4 columnas del mismo tamaño. Entonces definimos 4 elementos Div cada uno con la clase Col-LG-3. Sin embargo, para dispositivos pequeños y medianos preferimos tener dos columnas en cada fila. Por esta razón, usamos la clase Col-SM-6. Finalmente, para la pantalla ultra pequeña queremos que las columnas se apilen. Este es el comportamiento predeterminado de mover el primer marco, por lo que no es necesario definir la clase COL-XS-12.
Su HTML se ve así:
<Div> <Viv> <viv> <!-Content-> </div> <div> <!-Content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-contenido-> </div> </div> </div>
Sigamos mirando la base.
La malla de la base es muy similar a la malla de Bootstrap, pero es un poco más simple. Primero, tenemos que definir un elemento con la clase de fila, que contendrá nuestras columnas. Esta clase establece el ancho máximo del elemento en 62.5REM (1000px). A continuación, agregamos la columna. Para lograr esto, especificamos que cada elemento DIV tiene una clase de columna o columnas, y luego usamos la clase de trama correspondiente (consulte la tabla en la base de arriba para más detalles) para establecer su ancho. Del mismo modo, para dispositivos pequeños, no necesitamos definir la clase pequeña-12.
Este es HTML basado en Foundation Raster :
<Viv> <viv> <!-Content-> </div> <div> <!-Content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> </div> </div> </div>
En este momento, creo que ha comenzado a familiarizarse más con el sistema de cuadrícula de estos dos marcos. Pero quizás otro ejemplo pueda ayudarlo a comprender más claramente.
En el siguiente ejemplo, construiremos pie de página. El siguiente diagrama muestra el estilo que queremos:
Aquí, elegiremos un diseño diferente para comparar con el ejemplo anterior. Para las pantallas con una pantalla media y superior (o pantallas con una pantalla pequeña y arriba en la cuadrícula de arranque), queremos mostrar tres columnas. Sin embargo, notamos que hay una fila anidada en la última columna. Esto consiste en dos columnas. Estableceremos su ancho en la mitad del ancho de la fila en todos los dispositivos. Finalmente, ajustamos la visibilidad de las imágenes que aparecen en las filas anidadas.
Aquí está el código en Bootstrap:
<Div> <Viv> <Viv> <!-Content-> </div> <div> <!-Content-> </div> <div> <div> <a href = "#"> <p> reunirnos y discusión </p> <i> </i> </a> </div> <!-.col-xs-6-> <div> <! Content-> </iv> </div> <! </div> <!-.col-sm-4-> </div> <!-.row-> </div> <!-.container->
Aquí está el código para la fundación:
<Viv> <Viv> <!-Content-> </div> <div> <!-Content-> </div> <div> <ul> <li> <a href = "#"> <p> Reunamos y discusión </p> <i> </i> </a> </li> <li> <!-Content-> </li> </lul> </div> .Row ->
Nota: Si desea reemplazar los bloques de malla, podemos usar la malla predeterminada de Foundation para crear filas anidadas.
en conclusión
Si desea más información sobre el sistema de cuadrícula Bootstrap, puede consultar este artículo: "Bootstrap debe aprender sobre cada día (diseño)"
Finalmente, en este artículo, presento la estructura de malla de Bootstrap y Foundation. Luego vimos en un proyecto real cómo usar sus cuadrículas. Como puede ver, todas las cuadrículas son similares y pueden definirse aún más.
Espero que te guste este artículo. Tal vez pueda aplicar lo que ha aprendido a su proyecto. Para obtener más contenido de Bootstrap, siga: "Bootstrap Learning Tutorial", gracias por leer.
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.