El sistema de cuadrícula es "sistemas de cuadrícula" en inglés, y algunas personas lo traducen como "sistema de cuadrícula". Utiliza un diseño de diseño de cuadrícula fijo. Su estilo es ordenado y conciso. Se hizo muy popular después de la Segunda Guerra Mundial y se ha convertido en uno de los estilos principales del diseño de publicaciones hoy.
En 1692, Louis XIV, el recién ascendido rey francés, sintió que el nivel de impresión de Francia era insatisfactorio, por lo que ordenó el establecimiento de un comité especial real para administrar la impresión. Su primera tarea es diseñar nuevas fuentes que sean científicas, razonables y de valor funcional. El comité fue dirigido por el matemático Nicolas Jaugeon. Se basaron en cuerpos romanos y se usaron cuadrados como base de diseño. Cada cuadrícula cuadrada se dividió en 64 unidades cuadradas básicas, y cada unidad cuadrada se dividió en 36 cuadrículas pequeñas. De esta manera, un diseño de impresión consta de 2.304 pequeñas cuadrículas. En esta rigurosa red de cuadrícula geométrica, se diseñó la forma de la fuente, la disposición de diseño y la efectividad de la función de comunicación. Esta es la actividad más temprana del mundo para realizar experimentos científicos sobre fuentes y diseños, y también es el prototipo más temprano del sistema de cuadrícula.
La definición del sistema de ráster de la página web es: usar una matriz de cuadrícula regular para guiar y estandarizar el diseño y la distribución de información en la página web. Los sistemas de ráster web se desarrollan a partir de sistemas planos de trama. Para el diseño web, el uso de sistemas de cuadrícula no solo puede hacer que la información en las páginas web sea más hermosa y fácil de leer, sino también más utilizable. Además, para el desarrollo front-end, las páginas web serán más flexibles y estandarizadas.
Bootstrap proporciona un sistema de rejilla de transmisión de primer móvil y sensible. A medida que aumenta la pantalla o el tamaño de la visión, el sistema se dividirá automáticamente en hasta 12 columnas. Incluye clases predefinidas fáciles de usar y también potentes mixins para generar más diseños semánticos.
En otras palabras, Bootstrap divide el ancho de un elemento en 12 partes. Organizamos los elementos en esta fila que se dividen en 12 partes.
1. Objetivos básicos
Haga las siguientes dos filas y el ancho de cada celda en estas dos filas cambiará debido a diferentes dispositivos:
En la pequeña pantalla del teléfono móvil, el ascendente A cuentas para 2 partes B cuentas para 10 partes, la descuido A cuenta para 1 Parte B cuentas para 10 partes C cuentas para 1 piezas y el ABC comparte estas 12 partes.
En la pantalla media de la tableta, A ascendente A cuentas de 8 partes B cuentas para 4 partes, AB comparte estas 12 piezas, a la baja A cuentas de 10 partes B cuentas para 1 Parte C cuentas por 1 parte, ABC comparte estas 12 partes.
En la pantalla grande de la PC, A al alza A cuentas de 4 B cuentas para 8 acciones, AB comparte estas 12 acciones, a la baja A cuentas de 1 B cuentas de 10 C cuentas para 1, ABC comparte estas 12 acciones.
2. Proceso de producción
Primero configure Bootstrap en la carpeta web y descargue los componentes en el sitio web oficial (haga clic para abrir el enlace). La versión Bootstrap utilizada en el entorno de producción (haga clic para abrir el enlace). Bootstrap3 no es compatible con 2. Se recomienda usar Bootstrap3 directamente de acuerdo con sus documentos de desarrollo. Después de descomprimir bootstrap, copie las 3 carpetas obtenidas CSS, fuentes y JS al directorio del sitio. Si es el proyecto web JSP de Eclipse, colóquelos en la carpeta Webroot.
El código es el siguiente, consulte los comentarios para más detalles:
< xmlns = "http://www.w3.org/1999/xhtml"> <fead> <!-codificación web, archivos externos que se utilizarán, se adaptarán automáticamente a la pantalla-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <link href = "csps" csp.cs " rel = "Stylesheet" Media = "Screen"> <Meta name = "Viewport" Content = "width = Device-width, inicial-scale = 1.0, user-scalable = no"> <title> Grid System </title> </head> <body> <!-Uso de bootstrap si no usa el panel, pondrá los elementos en un contenedor de cuentas para el 100% de la pantalla-<! -> <div> <!-Define una línea-> <div> <!-Xs representa la pequeña pantalla del teléfono móvil, MD representa la pantalla en la tableta, y LG representa la pantalla grande de la PC-> <!-La suma de los elementos del mismo par debe ser igual a 12, de lo contrario, un error que ocurre como un color de luz, como un col-xs-2+B de A es igual a 12-> <!-BG-Warning, de lo contrario, se produce un error de luz, como un color de luz, como un col-x-2+B de A es igual a 12-> <!-BG-Warning, de lo contrario, se produce un error de luz, como un color de luz, como un color de luz, es el color de la luz de la luz. -> <div> a </div> <div> b </div> </div> <div> <!-La verdad aquí es lo mismo que el anterior, col-xs-1+b de col-xs-1+c de col-xs-10 es igual a 12-> <div> a </div> <div> b </div> <div> c </div> </div> </body> </hml>