1
00:00:00,410 --> 00:00:06,720
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

2
00:00:06,720 --> 00:00:11,310
uno por la que la gente usa bootstrap en las horas de siesta de formularios.

3
00:00:11,310 --> 00:00:16,500
Los botones son buenos cambios de estilo que podemos hacer con bootstrap, pero el sistema de grilla

4
00:00:16,500 --> 00:00:19,290
bootstrap actuará como el esqueleto de toda nuestra aplicación.

5
00:00:19,440 --> 00:00:23,980
Es una manera muy fácil para nosotros de agregar estructura y diseño a nuestra aplicación.

6
00:00:24,000 --> 00:00:27,480
Así que déjame mostrarte algunos ejemplos de lo que puedes hacer con el sistema de grillas.

7
00:00:27,480 --> 00:00:33,990
Tengo algunos sitios abiertos desde Bootstrap ex-beau. El primero aquí es una página de producto para una jarra de agua

8
00:00:34,380 --> 00:00:36,140
y se desplaza hacia abajo.

9
00:00:36,240 --> 00:00:37,530
Observe la disposición aquí.

10
00:00:37,560 --> 00:00:46,740
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

11
00:00:46,890 --> 00:00:50,310
tamaño de la tableta, se apilan uno encima del otro.

12
00:00:51,090 --> 00:00:56,940
Así que ese es el sistema de grilla bootstrap en funcionamiento, como es aquí donde tenemos otro efecto similar.

13
00:00:57,270 --> 00:01:02,100
Se escalan y luego se acumulan en la tableta y el tamaño móvil.

14
00:01:02,880 --> 00:01:04,110
Aquí hay otro ejemplo.

15
00:01:04,140 --> 00:01:10,440
Este es el músico islandés y Olafur Arnolds y esto se desplaza hacia abajo en este sitio.

16
00:01:10,560 --> 00:01:19,260
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.

17
00:01:19,260 --> 00:01:23,150
Tenemos un contenido que está construido con el sistema de

18
00:01:23,160 --> 00:01:25,210
Este aquí este contenido.

19
00:01:26,100 --> 00:01:28,350
Estas fechas de la gira aquí.

20
00:01:28,350 --> 00:01:33,930
Básicamente, utilizando el sistema de grillas podemos decir que queremos que cierto contenido ocupe el 100% de la pantalla, luego

21
00:01:34,950 --> 00:01:39,870
también podemos usarlo para decir que queremos que cada uno de ellos ocupe el 25% del ancho de

22
00:01:39,870 --> 00:01:46,620
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

23
00:01:46,620 --> 00:01:49,220
accedemos a Mobile cada uno ocupa el 100 por ciento.

24
00:01:49,860 --> 00:01:50,850
Lo mismo hecho aquí.

25
00:01:50,850 --> 00:01:56,660
Nos permite dividir eso con la pantalla en pedazos y elegir cuántas piezas queremos.

26
00:01:56,790 --> 00:02:00,660
Cada uno de nuestros propios elementos para mostrar y esta es la última que hemos visto.

27
00:02:00,660 --> 00:02:05,670
Se llama creativo Tim desert scroll contenido similar aquí.

28
00:02:05,680 --> 00:02:09,530
Aquí está el sistema de cuadrícula y aquí también.

29
00:02:09,570 --> 00:02:11,430
Entonces todo esto se hace con el sistema de grillas.

30
00:02:11,430 --> 00:02:15,590
Todo esto realmente muy importante, cosas muy emocionantes.

31
00:02:15,760 --> 00:02:20,640
Nos ayuda a plantear las cosas con tanta facilidad en comparación con lo que tendríamos que hacer sin bootstrap.

32
00:02:20,670 --> 00:02:25,660
Así que usaremos el sistema de grilla bootstraps y casi todas las aplicaciones que hacemos usando bootstrap.

33
00:02:25,890 --> 00:02:27,500
Y déjame mostrarte uno de ellos.

34
00:02:27,540 --> 00:02:33,940
Esta es nuestra aplicación de campamento yo y notamos que tenemos una grilla de campings para cruzar.

35
00:02:33,960 --> 00:02:39,750
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.

36
00:02:40,050 --> 00:02:44,480
Nos acercamos a uno y es un diseño móvil muy agradable y fácil de usar.

37
00:02:44,760 --> 00:02:47,840
Así que ese es solo un lugar donde usaremos un sistema de grillas.

38
00:02:47,850 --> 00:02:54,060
Ahora comencemos a escribir un código usando el sistema de cuadrícula para que aparezca en pantalla completa esta

39
00:02:54,060 --> 00:02:57,800
ventana y regrese para obtener puntocom bootstrap en la pestaña Evaluados.

40
00:02:58,050 --> 00:03:00,850
Puede hacer clic en el sistema de grillas.

41
00:03:00,850 --> 00:03:05,670
Hay bastante para el sistema de grillas, pero comenzaré señalando un solo

42
00:03:06,130 --> 00:03:07,300
número aquí 12.

43
00:03:07,470 --> 00:03:09,890
Esto es realmente importante para el funcionamiento del sistema de grillas.

44
00:03:09,900 --> 00:03:15,930
Entonces, cada contenedor y programa de arranque se puede dividir en 12 columnas diferentes y luego usar el

45
00:03:16,230 --> 00:03:21,150
sistema de cuadrícula podemos elegir cuántas de esas 12 unidades debe tomar cada elemento.

46
00:03:21,150 --> 00:03:27,050
Entonces, en este caso, parece que tienen algo ocupando aproximadamente 10 de 12 unidades.

47
00:03:27,060 --> 00:03:33,420
Y luego aquí dos de las 12 unidades o podrían ser nueve y 3, pero tienen alguna razón en

48
00:03:33,420 --> 00:03:40,320
la que tienen más de esos 12 en el lado izquierdo y luego una pequeña fracción en el lado derecho.

49
00:03:40,770 --> 00:03:46,510
Entonces, si volvemos al campamento aquí, este es nuestro contenedor aquí.

50
00:03:46,890 --> 00:03:51,670
Y cada uno de estos de 12 unidades cada uno ocupa tres unidades.

51
00:03:51,810 --> 00:03:56,850
Así que terminamos con cuatro columnas iguales y luego lo reducimos aquí.

52
00:03:56,880 --> 00:04:00,040
Ahora cada uno toma seis unidades de 12.

53
00:04:00,240 --> 00:04:02,840
Así que de nuevo ese número 12 es muy importante.

54
00:04:02,850 --> 00:04:03,660
Ahora vamos a la derecha.

55
00:04:03,660 --> 00:04:05,130
Nuestra primera grilla

56
00:04:05,250 --> 00:04:12,710
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.

57
00:04:12,870 --> 00:04:14,640
Así que tengo un archivo hecho

58
00:04:14,860 --> 00:04:18,180
Cada vez que usemos una red de Boucek, debe estar dentro de un contenedor.

59
00:04:18,210 --> 00:04:22,230
Entonces la clase es igual a contenedor

60
00:04:22,290 --> 00:04:28,950
Y lo primero que debemos hacer es encontrar otro div con una clase igual a la fila en lugar de cada fila.

61
00:04:29,220 --> 00:04:31,100
Tenemos 12 unidades para elegir.

62
00:04:31,350 --> 00:04:37,110
Entonces, lo que vamos a empezar haciendo es simplemente dividir 50 50, tendremos 1 div que tomará 6

63
00:04:37,110 --> 00:04:40,730
de 12 y luego otro div que tomará 6 de 12.

64
00:04:41,070 --> 00:04:42,050
Así que hagámoslo ahora.

65
00:04:42,120 --> 00:04:48,060
Añadiremos un div y luego también agregaré mi segunda división y en este momento solo hay dos dispositivos vacíos.

66
00:04:48,330 --> 00:04:49,430
No vas a trabajar.

67
00:04:49,650 --> 00:04:57,000
Pero lo que haré es agregar una clase a la primera y se verá un poco extraña columna A

68
00:04:57,670 --> 00:05:00,300
seis grandes y haremos lo mismo aquí.

69
00:05:00,300 --> 00:05:03,520
La clase es igual a la columna de seis grandes.

70
00:05:03,630 --> 00:05:05,200
Luego agregaremos algunos contenidos aquí.

71
00:05:05,210 --> 00:05:10,880
Simplemente dirán columna seis grandes.

72
00:05:10,950 --> 00:05:12,140
Lo mismo aqui.

73
00:05:12,210 --> 00:05:18,950
Y mientras lo hago, ahorremos y no veremos mucho, no vemos la red en sí.

74
00:05:19,020 --> 00:05:24,300
Para aclarar esto, definiré una clase aquí en lugar de una etiqueta de estilo.

75
00:05:24,300 --> 00:05:26,670
Lo que haré es definir una clase.

76
00:05:26,730 --> 00:05:31,350
Lo llamaré rosa y aplicaré esta clase a dos divs para que podamos verlos.

77
00:05:31,490 --> 00:05:32,820
Entonces ahora son blancos.

78
00:05:32,820 --> 00:05:33,660
Sin bordes.

79
00:05:33,750 --> 00:05:34,840
Solo un poco de texto.

80
00:05:35,010 --> 00:05:36,050
Pero si agregamos esto

81
00:05:36,180 --> 00:05:37,010
Tan rosado.

82
00:05:37,140 --> 00:05:45,660
Y luego queremos que el fondo sea rosado y haremos un borde violeta de un píxel de color púrpura sólido y

83
00:05:45,660 --> 00:05:49,950
luego aplicaremos la clase de color rosa a estos dos divs.

84
00:05:49,950 --> 00:05:52,660
Cada uno ocupa seis unidades.

85
00:05:52,680 --> 00:05:54,570
Ahora volvemos y refrescamos.

86
00:05:54,900 --> 00:05:55,580
Aquí vamos.

87
00:05:55,800 --> 00:05:59,640
Puede ver que tenemos dos divs que ocupan exactamente la mitad del contenedor.

88
00:05:59,670 --> 00:06:01,930
El contenedor comienza aquí y aquí.

89
00:06:02,460 --> 00:06:04,530
Y nos hemos dividido en dos.

90
00:06:04,620 --> 00:06:10,110
Así que ahora podemos regresar y jugar un poco más e intentemos agregar una tercera columna.

91
00:06:10,410 --> 00:06:16,150
Y esta vez hará que la columna central tenga ocho unidades y luego la izquierda y la derecha serán dos.

92
00:06:16,170 --> 00:06:21,270
Así que termina y voy a cambiar estos números aquí.

93
00:06:21,280 --> 00:06:22,200
Aquí vamos.

94
00:06:22,200 --> 00:06:27,960
Terminaremos con una bonita columna centrada en el medio y luego dos columnas más pequeñas a la izquierda y a la

95
00:06:27,960 --> 00:06:30,900
derecha que podríamos usar para una barra lateral o algo así.

96
00:06:30,900 --> 00:06:34,860
Entonces ese es un concepto muy básico que subyace a todo el sistema de grilla bootstrap.

97
00:06:34,920 --> 00:06:40,290
Tenemos 12 unidades que atraviesan el contenedor en el que trabajamos y podemos designar esas 12

98
00:06:40,290 --> 00:06:42,210
unidades de la manera que queramos.

99
00:06:42,240 --> 00:06:49,830
Entonces podríamos hacer 12 columnas individuales de una columna grande y podríamos hacer

100
00:06:49,830 --> 00:06:52,170
eso 12 veces así.

101
00:06:52,290 --> 00:06:53,600
Asegúrate de no perder la cuenta.

102
00:06:54,090 --> 00:06:54,670
Aquí vamos.

103
00:06:54,690 --> 00:06:56,620
Y luego nos desharemos de estos dos por ahora.

104
00:06:56,820 --> 00:07:01,630
Y si estuviera fresco verás en una fila que tenemos 12 columnas de tamaño uniforme.

105
00:07:01,650 --> 00:07:07,570
Cada uno ocupa una unidad y luego también te mostraré que podemos agregar otras filas.

106
00:07:07,740 --> 00:07:14,390
Así que hagámoslo ahora, la clase div es igual a la fila y simplemente irá por debajo de esta primera fila que tenemos.

107
00:07:14,730 --> 00:07:18,870
Entonces, dentro de este vamos a hacer div.

108
00:07:19,020 --> 00:07:23,350
La clase es igual a la columna Dasch grande y hagamos cuatro.

109
00:07:23,370 --> 00:07:27,280
Así que lo dividiremos en tres unidades de tamaño uniforme.

110
00:07:27,360 --> 00:07:36,260
Entonces la columna arge para ella va así.

111
00:07:36,420 --> 00:07:44,190
Echemos un vistazo ahora y puede ver que no aplicamos la clase rosa, pero tenemos tres columnas de tamaño uniforme que

112
00:07:44,190 --> 00:07:49,260
caen por debajo de las 12 columnas de tamaño uniforme que se crearon.

113
00:07:49,470 --> 00:07:53,240
Así que podríamos agregar en la clase rosa solo para que sea más fácil ver lo que está sucediendo.

114
00:07:53,940 --> 00:07:54,800
Y ahí vamos.

115
00:07:55,140 --> 00:07:57,350
Entonces este es solo un simple ejemplo.

116
00:07:57,420 --> 00:08:01,470
En realidad, no tendría estas cajas rosadas en nuestro sitio.

117
00:08:01,710 --> 00:08:08,730
Pero como pueden ver aquí, tenemos una grilla en la que tenemos filas y cada fila tiene cuatro columnas.

118
00:08:08,760 --> 00:08:15,830
Cada uno tiene tres unidades de ancho o aquí en este sitio Tim creativo.

119
00:08:15,900 --> 00:08:19,830
Tenemos tres columnas que cruzan cada una de ellas, tiene cuatro unidades de ancho.

120
00:08:20,070 --> 00:08:20,900
Lo mismo aqui.

121
00:08:20,900 --> 00:08:23,860
Tres columnas pasando por aquí.

122
00:08:23,910 --> 00:08:24,960
Tenemos cuatro columnas

123
00:08:24,960 --> 00:08:26,840
Cada uno tiene tres unidades de ancho.

124
00:08:27,390 --> 00:08:30,650
Así que eso es lo más básico de la grilla en el próximo video.

125
00:08:30,660 --> 00:08:35,850
Hablaremos sobre cómo hacer que la grilla sea receptiva y tener diferentes diseños en diferentes tamaños.

126
00:08:35,850 --> 00:08:38,230
En este momento hemos estado trabajando con la columna grande.

127
00:08:38,250 --> 00:08:43,050
tamaños y los veremos en el siguiente video y también veremos cómo podemos escribir grillas

128
00:08:43,050 --> 00:08:49,080
anidadas donde podemos agregar otra fila dentro de cualquiera de estas columnas y dividir esa en otras 12 piezas

129
00:08:49,080 --> 00:08:52,290
He explicado con un gran medio y hay otros tres