El mejor tutorial de sistema de red de arranque en 2024. En este tutorial podrás aprender ¿Qué es una cuadrícula (Grid)?,¿Cuál es el sistema de red Bootstrap (Grid System)?,Sistema de Red de arranque de obras (Red del sistema),Las consultas de medios,Opciones de cuadrícula,columnas que responden a cero,Ejemplos,columna Offset,Ejemplos,columna anidada,Ejemplos,ordenamiento de las columnas,Ejemplos,
En esta sección se explicará el sistema de red Bootstrap (Grid System).
Bootstrap proporciona un sistema de red de flujo sensible, preferido móvil, con el aumento de tamaño de pantalla o ventana (ventana), el sistema automáticamente se dividirá en un máximo de 12.
De Wikipedia:
En el diseño gráfico, la rejilla es una serie de líneas rectas utilizado para organizar el contenido por la estructura de intersección (vertical, horizontal) que consiste en (por lo general de dos dimensiones). Es ampliamente utilizado en el diseño de diseño de diseño de impresión y la estructura del contenido. En el diseño web, es un usado para crear rápidamente un diseño coherente y eficaz utilizando HTML y CSS enfoque.
En pocas palabras, cuadrícula de diseño web para organizar el contenido para que el sitio es fácil de navegar, y para reducir la carga del cliente.
Bootstrap documentación oficial en sistema de red Descripción:
Bootstrap incluye a, la prioridad sensible dispositivo móvil, sistema de red no fija, con el aumento de tamaño del dispositivo o ventana gráfica apropiadamente extendido a 12. Incluye clases predefinidas de opciones de diseño fáciles, también incluye poderosa para generar diseños más semánticas clases mixtas.
Vamos a entender la forma en la declaración anterior. Bootstrap 3 es una prioridad del dispositivo móvil, en este sentido, el código de arranque para los dispositivos de pantalla pequeña (como la telefonía móvil, tablet), luego se extendió a los dispositivos de pantalla de gran tamaño (tales como ordenadores portátiles, ordenadores de escritorio) de los componentes y la red.
sistema de red de respuesta con el aumento de tamaño de pantalla o ventana (ventana), el sistema automáticamente se dividirá en un máximo de 12.
1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
4 | 4 | 4 | |||||||||
4 | 8 | ||||||||||
6 | 6 | ||||||||||
12 |
El sistema de red a través de una serie de filas y columnas con contenido para crear un diseño de página. Las siguientes listas de la red de distribución Bootstrap es como funciona:
Las consultas de medios son "reglas CSS condicionales." muy chic Sólo se aplica a algunos basados en algunos criterios CSS predeterminado. Si se cumplen estos requisitos, a continuación, aplicar el estilo apropiado.
Bootstrap medios consultas le permiten moverse en función del tamaño de la ventana, mostrar y ocultar el contenido. Las siguientes preguntas de los medios que utilizan los archivos menos utilizados para crear sistema de red Bootstrap umbral crítico punto de demarcación.
/ * Dispositivos ultra pequeños (teléfonos móviles, menos de 768px) * / / * Por defecto, el Bootstrap no hay preguntas de los medios * / / * Pequeños dispositivos (tabletas, 768px en adelante) * / @media (min-width: @ pantalla-sm-min) {es.} / * Dispositivos Mediano (de escritorio, 992px en adelante) * / @media (min-width: @ pantalla-MD-min) {es.} / * El equipo grande (ordenador de sobremesa grande, 1200px en adelante) * / @media (min-width: @ pantalla-lg-min) {es.}
A veces nos contenemos consultade ancho máximo los medios de comunicación en el código, lo que afectará a la CSS confinado dentro de un rango menor de tamaños de pantalla.
@media (max-width: @ pantalla-xs-max) {es.} @media (min-width: @ pantalla-sm-min) y (max-width: @ pantalla-sm-max) {es.} @media (min-width: @ pantalla-MD-min) y (max-width: @ pantalla-MD-max) {es.} @media (min-width: @ pantalla-lg-min) {es.}
consulta de medios tiene dos partes, la primera de una especificación del dispositivo, a continuación, una regla de tamaño. En el caso anterior, establezca las siguientes reglas:
Veamos esta línea de código:
@media (min-width: @ pantalla-sm-min) y (max-width: @ pantalla-sm-max) {es.}
Para todos con unmin-width: @dispositivos depantalla-SM-min,si el ancho de la pantalla es menor que@ pantalla-sm-max,lo hará algún procesamiento.
La siguiente tabla resume cómo el sistema de red de rutina de carga a través de múltiples dispositivos funciona:
超小设备手机(<768px) | 小型设备平板电脑(≥768px) | 中型设备台式电脑(≥992px) | 大型设备台式电脑(≥1200px) | |
---|---|---|---|---|
网格行为 | 一直是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 |
最大容器宽度 | None (auto) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列?数量和 | 12 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
Aquí es la estructura básica de la red de Bootstrap:
<Div class = "contenedor"> <Div class = "fila"> <Div class = "col - * - *"> </ div> <Div class = "col - * - *"> </ div> </ Div> <Div class = "fila"> es. </ div> </ Div> <Class = "contenedor" div> eses
Dejar que unos pocos ejemplos sencillos nos fijamos en la red:
El siguiente ejemplo incluye cuatro rejilla, pero no podemos determinar la posición de la cuadrícula se muestra en un pequeño dispositivo de navegación.
Para resolver este problema, puede utilizar el uso.clearfix clase y utilidad de respuesta para resolver, como se muestra en los siguientes ejemplos:
Navegador de cambiar el tamaño de la ventana para ver los cambios, o para ver el efecto en su teléfono.
El desplazamiento es una función útil para el diseño más profesional. Pueden ser utilizados para hacer más espacio para la columna. Porejemplo, .col-xs = * La clase no admite compensaciones, pero pueden ser simplemente usando una celda vacía para lograr el efecto.
Para utilizar el desplazamiento en una pantalla grande, utilice* categoría .col-md-offset.La izquierda fuera de estas clases habría una columna de el (margen) aumentó* columna, donde *rango es dea 1-11.
En el siguiente ejemplo, tenemos <div class = "col-md -6"> es </ div>, vamos a utilizar.col md-offset-3 clase para centrar este div.
Los resultados son los siguientes:
El valor predeterminado de mallas anidadas en el contenido, añadir un nuevo.row, y dentro de una columna .col-MD-existente *Agregar un grupo columnas* .col-MD-.anidado fila debe contener un conjunto de columnas, que establece el número de columnas no puede ser más de 12 (de hecho, no hay ningún requisito de que usted tiene que llenar 12).
En el siguiente ejemplo, el diseño tiene dos columnas, la segunda columna se divide en dos filas de cuatro cajas.
Los resultados son los siguientes:
sistema de red de arranque con otra característica ideal es que se puede escribir fácilmente una columna en una orden, entonces el orden se muestra en otra columna.
Puede cambiar fácilmente el orden con una función.col-md-push columnas de la cuadrícula *y.col-md-pullclase*,donde*rango es dea 1-11.
En el siguiente ejemplo, tenemos un diseño de dos columnas, columna de la izquierda es muy estrecho, como una barra lateral. Vamos a utilizar.col-md-push * y la clase .col-md-pull *para intercambiar el orden de las dos columnas.
Los resultados son los siguientes: