Volveremos en esta lección y demostraremos el sistema de grilla bootstrap y el sistema de cuadrícula es probablemente la razón número
uno por la que la gente usa bootstrap en las horas de siesta de formularios.
Los botones son buenos cambios de estilo que podemos hacer con bootstrap, pero el sistema de grilla
bootstrap actuará como el esqueleto de toda nuestra aplicación.
Es una manera muy fácil para nosotros de agregar estructura y diseño a nuestra aplicación.
Así que déjame mostrarte algunos ejemplos de lo que puedes hacer con el sistema de grillas.
Tengo algunos sitios abiertos desde Bootstrap ex-beau. El primero aquí es una página de producto para una jarra de agua
y se desplaza hacia abajo.
Observe la disposición aquí.
Tenemos tres elementos uno al lado del otro y luego también notamos que a medida que cambian de tamaño se reducen y luego, cuando toco el
tamaño de la tableta, se apilan uno encima del otro.
Así que ese es el sistema de grilla bootstrap en funcionamiento, como es aquí donde tenemos otro efecto similar.
Se escalan y luego se acumulan en la tableta y el tamaño móvil.
Aquí hay otro ejemplo.
Este es el músico islandés y Olafur Arnolds y esto se desplaza hacia abajo en este sitio.
cuadrícula aquí que puede ver un diseño similar, pero no es solo que también esté construido con un sistema de cuadrícula.
Tenemos un contenido que está construido con el sistema de
Este aquí este contenido.
Estas fechas de la gira aquí.
Básicamente, utilizando el sistema de grillas podemos decir que queremos que cierto contenido ocupe el 100% de la pantalla, luego
también podemos usarlo para decir que queremos que cada uno de ellos ocupe el 25% del ancho de
la pantalla hasta que golpeemos el lado del móvil o el tamaño de la tableta para cada toma 50 de vez en cuando cuando
accedemos a Mobile cada uno ocupa el 100 por ciento.
Lo mismo hecho aquí.
Nos permite dividir eso con la pantalla en pedazos y elegir cuántas piezas queremos.
Cada uno de nuestros propios elementos para mostrar y esta es la última que hemos visto.
Se llama creativo Tim desert scroll contenido similar aquí.
Aquí está el sistema de cuadrícula y aquí también.
Entonces todo esto se hace con el sistema de grillas.
Todo esto realmente muy importante, cosas muy emocionantes.
Nos ayuda a plantear las cosas con tanta facilidad en comparación con lo que tendríamos que hacer sin bootstrap.
Así que usaremos el sistema de grilla bootstraps y casi todas las aplicaciones que hacemos usando bootstrap.
Y déjame mostrarte uno de ellos.
Esta es nuestra aplicación de campamento yo y notamos que tenemos una grilla de campings para cruzar.
Y a medida que cambio el tamaño de la pantalla, notamos que se escalan y luego vamos a dos a través y luego a Móvil.
Nos acercamos a uno y es un diseño móvil muy agradable y fácil de usar.
Así que ese es solo un lugar donde usaremos un sistema de grillas.
Ahora comencemos a escribir un código usando el sistema de cuadrícula para que aparezca en pantalla completa esta
ventana y regrese para obtener puntocom bootstrap en la pestaña Evaluados.
Puede hacer clic en el sistema de grillas.
Hay bastante para el sistema de grillas, pero comenzaré señalando un solo
número aquí 12.
Esto es realmente importante para el funcionamiento del sistema de grillas.
Entonces, cada contenedor y programa de arranque se puede dividir en 12 columnas diferentes y luego usar el
sistema de cuadrícula podemos elegir cuántas de esas 12 unidades debe tomar cada elemento.
Entonces, en este caso, parece que tienen algo ocupando aproximadamente 10 de 12 unidades.
Y luego aquí dos de las 12 unidades o podrían ser nueve y 3, pero tienen alguna razón en
la que tienen más de esos 12 en el lado izquierdo y luego una pequeña fracción en el lado derecho.
Entonces, si volvemos al campamento aquí, este es nuestro contenedor aquí.
Y cada uno de estos de 12 unidades cada uno ocupa tres unidades.
Así que terminamos con cuatro columnas iguales y luego lo reducimos aquí.
Ahora cada uno toma seis unidades de 12.
Así que de nuevo ese número 12 es muy importante.
Ahora vamos a la derecha.
Nuestra primera grilla
grid no ht m l está vacío a excepción de los archivos de arranque el archivo SS y para empezar tenemos que definir un contenedor.
Así que tengo un archivo hecho
Cada vez que usemos una red de Boucek, debe estar dentro de un contenedor.
Entonces la clase es igual a contenedor
Y lo primero que debemos hacer es encontrar otro div con una clase igual a la fila en lugar de cada fila.
Tenemos 12 unidades para elegir.
Entonces, lo que vamos a empezar haciendo es simplemente dividir 50 50, tendremos 1 div que tomará 6
de 12 y luego otro div que tomará 6 de 12.
Así que hagámoslo ahora.
Añadiremos un div y luego también agregaré mi segunda división y en este momento solo hay dos dispositivos vacíos.
No vas a trabajar.
Pero lo que haré es agregar una clase a la primera y se verá un poco extraña columna A
seis grandes y haremos lo mismo aquí.
La clase es igual a la columna de seis grandes.
Luego agregaremos algunos contenidos aquí.
Simplemente dirán columna seis grandes.
Lo mismo aqui.
Y mientras lo hago, ahorremos y no veremos mucho, no vemos la red en sí.
Para aclarar esto, definiré una clase aquí en lugar de una etiqueta de estilo.
Lo que haré es definir una clase.
Lo llamaré rosa y aplicaré esta clase a dos divs para que podamos verlos.
Entonces ahora son blancos.
Sin bordes.
Solo un poco de texto.
Pero si agregamos esto
Tan rosado.
Y luego queremos que el fondo sea rosado y haremos un borde violeta de un píxel de color púrpura sólido y
luego aplicaremos la clase de color rosa a estos dos divs.
Cada uno ocupa seis unidades.
Ahora volvemos y refrescamos.
Aquí vamos.
Puede ver que tenemos dos divs que ocupan exactamente la mitad del contenedor.
El contenedor comienza aquí y aquí.
Y nos hemos dividido en dos.
Así que ahora podemos regresar y jugar un poco más e intentemos agregar una tercera columna.
Y esta vez hará que la columna central tenga ocho unidades y luego la izquierda y la derecha serán dos.
Así que termina y voy a cambiar estos números aquí.
Aquí vamos.
Terminaremos con una bonita columna centrada en el medio y luego dos columnas más pequeñas a la izquierda y a la
derecha que podríamos usar para una barra lateral o algo así.
Entonces ese es un concepto muy básico que subyace a todo el sistema de grilla bootstrap.
Tenemos 12 unidades que atraviesan el contenedor en el que trabajamos y podemos designar esas 12
unidades de la manera que queramos.
Entonces podríamos hacer 12 columnas individuales de una columna grande y podríamos hacer
eso 12 veces así.
Asegúrate de no perder la cuenta.
Aquí vamos.
Y luego nos desharemos de estos dos por ahora.
Y si estuviera fresco verás en una fila que tenemos 12 columnas de tamaño uniforme.
Cada uno ocupa una unidad y luego también te mostraré que podemos agregar otras filas.
Así que hagámoslo ahora, la clase div es igual a la fila y simplemente irá por debajo de esta primera fila que tenemos.
Entonces, dentro de este vamos a hacer div.
La clase es igual a la columna Dasch grande y hagamos cuatro.
Así que lo dividiremos en tres unidades de tamaño uniforme.
Entonces la columna arge para ella va así.
Echemos un vistazo ahora y puede ver que no aplicamos la clase rosa, pero tenemos tres columnas de tamaño uniforme que
caen por debajo de las 12 columnas de tamaño uniforme que se crearon.
Así que podríamos agregar en la clase rosa solo para que sea más fácil ver lo que está sucediendo.
Y ahí vamos.
Entonces este es solo un simple ejemplo.
En realidad, no tendría estas cajas rosadas en nuestro sitio.
Pero como pueden ver aquí, tenemos una grilla en la que tenemos filas y cada fila tiene cuatro columnas.
Cada uno tiene tres unidades de ancho o aquí en este sitio Tim creativo.
Tenemos tres columnas que cruzan cada una de ellas, tiene cuatro unidades de ancho.
Lo mismo aqui.
Tres columnas pasando por aquí.
Tenemos cuatro columnas
Cada uno tiene tres unidades de ancho.
Así que eso es lo más básico de la grilla en el próximo video.
Hablaremos sobre cómo hacer que la grilla sea receptiva y tener diferentes diseños en diferentes tamaños.
En este momento hemos estado trabajando con la columna grande.
tamaños y los veremos en el siguiente video y también veremos cómo podemos escribir grillas
anidadas donde podemos agregar otra fila dentro de cualquiera de estas columnas y dividir esa en otras 12 piezas
He explicado con un gran medio y hay otros tres