Latest web development tutorials

sistema de red de arranque

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.

¿Qué es una cuadrícula (Grid)?

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.

¿Cuál es el sistema de red Bootstrap (Grid System)?

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.

-Mobile primera estrategia

  • contenido
    • Decidir qué es lo más importante.
  • disposición
    • Prioridad diseñado anchura menor.
    • dispositivos móviles basados ​​en CSS es una prioridad, preguntas de los medios se dirigen a los Tablet PC, ordenadores de sobremesa.
  • Mejora progresiva
    • Con el aumento del tamaño de la pantalla y añadir elementos.

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

Sistema de Red de arranque de obras (Red del sistema)

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:

  • Fila debe ser colocado en.container clase, a fin de obtener la alineación apropiada (alineación) y el relleno (relleno).
  • Utilice líneas para crear un conjunto horizontal de las columnas.
  • El contenido debe ser colocado en la columna, y la columna puede ser sólo las filas hijos directos.
  • clases de cuadrícula predefinidos, tales.row y .col-xs-4,se pueden utilizar para crear rápidamente un diseño de cuadrícula. MENOS clase mixta se puede utilizar diseños más semánticas.
  • Columna para crear un hueco entre el contenido de la columna por el relleno (relleno). El relleno es de fuera.Rows a través de la negación (margen), y la última fila, primera columna indica un desplazamiento.
  • El sistema de red está disponible mediante la especificación de las doce columnas que desee para crear un centro. Por ejemplo, para crear tres columnas iguales, utilizar tres.col-xs-4.

Las consultas de medios

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) {...}

/ * Dispositivos Mediano (de escritorio, 992px en adelante) * /
@media (min-width: @ pantalla-MD-min) {...}

/ * El equipo grande (ordenador de sobremesa grande, 1200px en adelante) * /
@media (min-width: @ pantalla-lg-min) {...}

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) {...}
@media (min-width: @ pantalla-sm-min) y (max-width: @ pantalla-sm-max) {...}
@media (min-width: @ pantalla-MD-min) y (max-width: @ pantalla-MD-max) {...}
@media (min-width: @ pantalla-lg-min) {...}

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) {...}

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.

Opciones de cuadrícula

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)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列?数量和12121212
最大列宽Auto60px78px95px
间隙宽度30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes

La estructura básica de la cuadrícula

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"> ... </ div>
</ Div>
<Class = "contenedor" div> ....

Dejar que unos pocos ejemplos sencillos nos fijamos en la red:

columnas que responden a cero

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:

Ejemplos

<Div class = "contenedor"> <Div class = "fila" > <Div class = "Col-xs-6 col-SM-3" style = "background-color: # dedef8; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit. </ P> </ Div> <Div class = "Col-xs-6 col-SM-3" style = "background-color: # dedef8; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </ P> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed do ut eiusmod tempor incididunt. </ P> </ Div> <Div class = "CLEARfix visibles-xs" > </ div> <Div class = "Col-xs-6 col-SM-3" style = "background-color: # dedef8; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> <P> Ut enim ad minim veniam , quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </ P> </ Div> <Div class = "Col-xs-6 col-SM-3" style = "background-color: # dedef8; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim </ p> </ Div> </ Div> </ Div>

Trate »

Navegador de cambiar el tamaño de la ventana para ver los cambios, o para ver el efecto en su teléfono.

columna Offset

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"> .. </ div>, vamos a utilizar.col md-offset-3 clase para centrar este div.

Ejemplos

<Div class = "contenedor"> <H1> Hola, mundo! < / H1> <Div class = "fila" > <Div class = "col-xs-6 col-md-offset-3" style = "background-color: # dedef8; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit. </ P> </ Div> </ Div> </ Div>

Trate »

Los resultados son los siguientes:

sistema de red de columna Offset

columna anidada

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.

Ejemplos

<Div class = "contenedor"> <H1> Hola, mundo! < / H1> <Div class = "fila"> <Div class = "col-MD-3 " style = "background-color: # dedef8; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> <H4> La primera columna </ h4> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit. </ P> </ Div> <Div class = "col-md-9 " style = "background-color: # dedef8; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> <H4> La segunda columna - se divide en cuatro cajas </ h4> <Div class = "fila"> <Div class = "col-MD-6 " style = "background-color: # B18904; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> <P> Consectetur del partido del arte Tonx Culpa semiótica. Pinterest assumenda minim quis orgánica. </ P> </ Div> <Div class = "col-MD-6 " style = "background-color: # B18904; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> <P> sed no eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </ P> </ Div> </ Div> <Div class = "fila"> <Div class = "col-MD-6 " style = "background-color: # B18904; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> <P> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </ P> </ Div> <Div class = "col-MD-6 " style = "background-color: # B18904; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim. </ P> </ Div> </ Div> </ Div> </ Div> </ Div>

Trate »

Los resultados son los siguientes:

sistema de red de columna de anidación

ordenamiento de las columnas

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.

Ejemplos

<Div class = "contenedor"> <H1> Hola, mundo! < / H1> <Div class = "fila"> <P> antes de la clasificación </ p> <Div class = "col-MD-4 " style = "background-color: # dedef8; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> Salí </ div> <Div class = "col-md-8 " style = "background-color: # dedef8; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> Estoy a la derecha </ div> </ Div> <Br> <Div class = "fila"> <P> ordenados </ p> <Div class = "col-MD-4 col-md-push-8" style = "background-color: # dedef8; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> Salí </ div> <Div class = "col-md-8 col-MD-pull-4" style = "background-color: # dedef8; box-shadow: 1px 1px 1px inserción # 444, inserción 1px 1px 1px # 444;"> Estoy a la derecha </ div> </ Div> </ Div>

Trate »

Los resultados son los siguientes:

sistema de red de columna Ordenar