1
00:00:00,270 --> 00:00:05,730
Bienvenido de nuevo a esta unidad. Voy a presentar una nueva herramienta llamada Bootstrap y estoy en la

2
00:00:05,730 --> 00:00:08,110
página de inicio de bootstrap. Consigo bootscom puntocom.

3
00:00:08,330 --> 00:00:12,570
Y solo quiero tomar unos minutos en este video introductorio para explicar qué es el bootstrap y por qué

4
00:00:12,570 --> 00:00:13,180
lo estamos usando.

5
00:00:13,230 --> 00:00:17,100
Y luego también para mostrarle algunos ejemplos de sitios que usan bootstrap.

6
00:00:17,100 --> 00:00:20,350
Comencemos leyendo la publicidad oficial de arranque.

7
00:00:20,610 --> 00:00:26,550
Bootstrap es el TMLC SS más popular en javascript framework para desarrollar primeros proyectos móviles con capacidad

8
00:00:26,550 --> 00:00:28,310
de respuesta en la Web.

9
00:00:28,710 --> 00:00:30,460
Vamos a romper eso un poco.

10
00:00:30,480 --> 00:00:32,540
Bootstrap es extremadamente popular.

11
00:00:32,580 --> 00:00:37,830
De hecho, es el repositorio más estrellado y bifurcado de get hub, lo que básicamente significa que tiene la mayor

12
00:00:37,830 --> 00:00:43,410
cantidad de gente que lo usa. La mayoría de la gente está de acuerdo en agregarlo para obtener ayuda y todo ese

13
00:00:43,410 --> 00:00:47,550
bootstrap es en realidad un único archivo de éxito y un solo archivo de javascript. .

14
00:00:47,550 --> 00:00:52,080
Ahora hay una gran cantidad de C S S y muchos javascript en esos archivos, pero son solo

15
00:00:52,080 --> 00:00:54,180
dos archivos y podemos incluirlos en nuestra propia aplicación.

16
00:00:54,180 --> 00:00:59,280
responden y nos ayuda a hacerlo rápido sin tener que escribir una tonelada de nuestro propio código.

17
00:00:59,280 --> 00:01:04,320
Básicamente tomamos el código de otra persona y desde Bootstrap lo agregamos a nuestra propia aplicación y nos

18
00:01:04,320 --> 00:01:05,950
ayuda a crear sitios atractivos que

19
00:01:05,970 --> 00:01:08,760
Hay dos razones principales por las que te lo estoy mostrando en este curso.

20
00:01:08,760 --> 00:01:10,890
El primero es que es muy popular.

21
00:01:10,890 --> 00:01:11,850
Muchos lugares lo usan.

22
00:01:11,850 --> 00:01:15,560
Muchas empresas lo usan muchos desarrolladores y solo vale la pena saberlo.

23
00:01:15,690 --> 00:01:20,250
Pero el segundo es que nos ayudará a hacer sitios web atractivos con bastante rapidez en este curso.

24
00:01:20,640 --> 00:01:25,080
y podemos hacer que las cosas funcionen en 10 15 minutos y nos veremos bastante bien.

25
00:01:25,250 --> 00:01:30,750
Así que cuando estamos aprendiendo y cosas cuando estamos enfocándonos en Node y Express y Mongo y mangosta y

26
00:01:30,750 --> 00:01:36,480
rodilla profunda y toda esta compleja espalda y lógica todavía podemos hacer algo que se vea bien sin tener que

27
00:01:36,480 --> 00:01:40,020
dedicar una hora o dos horas video para diseñar algo, podemos enchufarlo

28
00:01:40,020 --> 00:01:45,360
Lo siguiente que haré es darte un recorrido rápido por los muelles, pero el programa de arranque tiene

29
00:01:45,660 --> 00:01:50,840
muchos buenos ejemplos de buena documentación y realmente usan el arranque en este sitio web que tiene sentido.

30
00:01:51,060 --> 00:01:57,090
Así que empecemos haciendo clic en C Ss y eso es lo que se mencionó. Bootstrap es solo un archivo

31
00:01:57,090 --> 00:02:00,250
CSSA, un solo archivo javascript dentro de ese archivo CSSA.

32
00:02:00,300 --> 00:02:02,560
Hay muchas cosas que obtenemos gratis.

33
00:02:02,610 --> 00:02:05,420
Echemos un vistazo a los botones.

34
00:02:05,460 --> 00:02:10,890
Entonces, si queremos hacer un botón y tenemos un bootstrap incluido en nuestra aplicación, podemos agregar

35
00:02:10,890 --> 00:02:16,680
esta clase a la clase que es en realidad Beati y PTEN por defecto y obtenemos estos botones.

36
00:02:17,010 --> 00:02:18,840
Podemos hacer diferentes colores.

37
00:02:19,470 --> 00:02:21,260
Echemos un vistazo a los formularios.

38
00:02:21,360 --> 00:02:22,870
Recibimos buenas entradas aquí.

39
00:02:23,310 --> 00:02:29,310
Y también es muy importante tener en cuenta que todo es receptivo en el sitio para que pueda ver que

40
00:02:29,310 --> 00:02:31,890
obtenemos elementos que responden al ancho de la pantalla.

41
00:02:32,250 --> 00:02:34,060
También tenemos diferentes tipos de formas.

42
00:02:34,080 --> 00:02:35,680
Puedes combinar las diferentes piezas.

43
00:02:35,700 --> 00:02:38,330
Entonces aquí están usando un botón con un formulario.

44
00:02:38,400 --> 00:02:43,230
Así que es como el arranque de piezas de Lego y de muchas maneras solo ha sido de piezas

45
00:02:43,230 --> 00:02:46,660
de Lego que puedes juntar y agregar a tu sitio como mejor te parezca.

46
00:02:46,740 --> 00:02:48,690
Repasaremos la mayoría de estos componentes.

47
00:02:48,720 --> 00:02:53,800
La mayoría de estas piezas grandes una vez que comenzamos a trabajar con ella y escribimos el código de arranque nosotros mismos.

48
00:02:54,270 --> 00:03:00,420
que contienen algunas de las partes más grandes de bootstrap que podemos usar y que incluyen cosas como barras de navegación.

49
00:03:00,420 --> 00:03:05,750
Así que por ahora vamos a seguir adelante y cuándo mostrarle la siguiente pestaña que contiene componentes componentes

50
00:03:05,940 --> 00:03:11,520
Y este es probablemente uno de los aspectos más populares de bootstrap que muchos sitios usan como se

51
00:03:11,520 --> 00:03:13,680
puede ver con un poco de código.

52
00:03:13,710 --> 00:03:18,450
Parece mucho, pero te aseguro que es mucho menos de lo que sería si estuviéramos escribiendo una

53
00:03:18,450 --> 00:03:19,680
barra NAV desde cero.

54
00:03:19,680 --> 00:03:26,880
Y esto viene con forma de menú desplegable y hay varios tipos de barras de diferentes colores, algunos que se fijan

55
00:03:26,880 --> 00:03:30,660
en la parte superior de la página, algunos que se desplazarán.

56
00:03:30,690 --> 00:03:36,200
el Jumbotron, que es una forma de exhibir cierto contenido en las barras de progreso de su sitio web.

57
00:03:37,110 --> 00:03:38,390
Hay otros componentes como

58
00:03:38,670 --> 00:03:40,330
Y todos vienen con bootstrap.

59
00:03:40,680 --> 00:03:45,750
Por lo tanto, es posible que se pregunte ahora mismo si bootstrap incluye todas estas piezas y ya tienen el estilo preestablecido

60
00:03:46,040 --> 00:03:48,970
de que todos los sitios que usan bootstrap tienen el mismo aspecto.

61
00:03:49,320 --> 00:03:50,760
Y la respuesta es sí y no.

62
00:03:50,760 --> 00:03:53,240
Depende de cómo el sitio usa bootstrap.

63
00:03:53,760 --> 00:03:58,440
compañía o un proyecto que usa bootstrap bien hace difícil decir que en realidad están usando bootstrap

64
00:03:58,440 --> 00:04:03,390
porque usan esos componentes principales y luego pueden entrar y escribir sus propios estilos en la parte superior.

65
00:04:03,390 --> 00:04:04,490
Yo diría que una

66
00:04:04,500 --> 00:04:07,860
Cambie los colores cambien las fuentes cambian algunos de los efectos de desplazamiento.

67
00:04:07,920 --> 00:04:13,290
No tiene que usar exactamente los mismos colores y todo lo que viene con bootstrap, pero eso no

68
00:04:13,290 --> 00:04:17,670
significa que haya algo intrínsecamente malo en el uso de los estilos Bootstrap integrados.

69
00:04:17,670 --> 00:04:19,080
Y definitivamente haremos las dos cosas.

70
00:04:19,200 --> 00:04:23,580
Entonces, cuando estamos creando un sitio y el enfoque no está realmente en el frente, solo queremos

71
00:04:23,580 --> 00:04:25,290
hacer algo que se vea presentable rápidamente.

72
00:04:25,290 --> 00:04:30,310
La parte frontal del prototipo básico usará bootstrap y no modificaremos muchas piezas.

73
00:04:30,780 --> 00:04:34,530
Pero luego, si estamos trabajando en algo un poco más grande que no

74
00:04:34,530 --> 00:04:39,930
queremos que parezca, usamos el bootstrap sin cambiar nada, entonces vamos a incorporar algunos de nuestros estilos, básicamente, agregamos

75
00:04:39,930 --> 00:04:42,580
una capa de pintura en aerosol. encima de bootstrap.

76
00:04:42,600 --> 00:04:47,250
Lo siguiente que quiero hacer es mostrarle algunos de los sitios que se crean con bootstrap y Buddh

77
00:04:47,250 --> 00:04:50,740
trip en realidad tiene un sitio web oficial donde muestran algunos de esos sitios.

78
00:04:50,970 --> 00:04:54,330
Si haces clic en Expo lo tengo abierto ya.

79
00:04:54,330 --> 00:04:59,730
Se puede ver que muestran bellos e inspiradores usos de un bootstrap para que podamos abrir algunos de

80
00:04:59,970 --> 00:05:01,890
ellos para abrirlos y nuevas pestañas.

81
00:05:02,270 --> 00:05:03,870
Y estos son solo los más recientes.

82
00:05:03,870 --> 00:05:05,390
Hay cientos en este sitio.

83
00:05:05,420 --> 00:05:11,400
Puedes ver toneladas y toneladas de ellos y puedes seguir desplazándote y desplazándote, y luego podemos ir a algunos

84
00:05:11,400 --> 00:05:14,660
más antiguos y hay tantos sitios diferentes que lo están usando.

85
00:05:15,000 --> 00:05:17,050
Y realmente no todos se ven iguales.

86
00:05:17,610 --> 00:05:20,190
Sí, tal vez muchos de ellos tienen una barra de navegación.

87
00:05:20,190 --> 00:05:25,470
Tal vez muchos de ellos tienen este diseño de pantalla grande a pantalla completa, pero eso es más una

88
00:05:25,470 --> 00:05:28,450
tendencia de diseño que algo que lo ha hecho puramente responsable.

89
00:05:28,980 --> 00:05:30,890
Así que echemos un vistazo a algunos de estos.

90
00:05:30,930 --> 00:05:36,400
Este es el creativo Tim, que es una compañía que crea plantillas de sitios web en realidad.

91
00:05:36,630 --> 00:05:40,330
Y puedes ver que tenemos esta bonita grilla de imágenes.

92
00:05:40,500 --> 00:05:41,600
Es muy receptivo

93
00:05:41,610 --> 00:05:46,710
Si reduzco esto, tenemos nuestro pequeño bar de navegación aquí.

94
00:05:46,920 --> 00:05:52,660
Así que este es un componente de arranque de la forma en que todo se presenta en esta cuadrícula.

95
00:05:52,890 --> 00:05:57,960
Bootstrap es parcialmente responsable de eso, pero también puede ver que no están usando los

96
00:05:58,010 --> 00:05:59,540
botones Bootstrap predeterminados integrados.

97
00:05:59,580 --> 00:06:00,710
Ellos los han cambiado.

98
00:06:00,780 --> 00:06:01,960
Las cosas se ven diferentes

99
00:06:02,190 --> 00:06:06,130
Así que creo que este es un buen uso de bootstrap que es un sitio muy atractivo.

100
00:06:06,180 --> 00:06:12,170
Funciona bien y usa bootstrap pero no depende de bootstrap al 100 por ciento.

101
00:06:13,080 --> 00:06:15,120
Echemos un vistazo a uno o dos más.

102
00:06:15,480 --> 00:06:19,640
Entonces este se llama Indicus o índices algo así.

103
00:06:19,710 --> 00:06:24,200
Al parecer, diseñan y crean productos digitales que las personas disfrutan usar.

104
00:06:24,240 --> 00:06:25,520
Así que vamos a desplazarnos hacia abajo aquí.

105
00:06:25,680 --> 00:06:26,980
Eche un vistazo a lo que tenemos.

106
00:06:27,270 --> 00:06:31,950
Así que hay algo de contenido que probablemente esté construido con el sistema de cuadrícula bootstrap

107
00:06:31,950 --> 00:06:37,500
que ayuda a organizar y diseñar las cosas como ya he mencionado antes, es notoriamente difícil en Pearcey SS.

108
00:06:37,560 --> 00:06:42,420
Está mejorando, pero el bootstrap es realmente útil para ayudarnos a establecer las cosas en nuestra aplicación.

109
00:06:43,260 --> 00:06:49,380
pequeña barra de pie de página. Hay una barra de navegación aquí, así que es muy divertido ir al bootstrap Expo.

110
00:06:49,610 --> 00:06:54,620
Tómate un tiempo para explorar algunos de los proyectos que solían arrancar y ver cómo lo usan

111
00:06:54,640 --> 00:06:59,970
y las diferentes formas en que las empresas están modificando está agregando sus propias fuentes con sus propios colores

112
00:06:59,970 --> 00:07:05,160
y realmente descifra cuáles son los componentes centrales que usan muchos sitios y por qué decide usar bootstrap.

113
00:07:05,170 --> 00:07:05,930
Y tenemos una

114
00:07:06,170 --> 00:07:10,950
Y en mi opinión, todo se reduce al sistema de grillas al que dedicaremos un video

115
00:07:10,950 --> 00:07:14,970
en esta unidad y las barras de navegación y la receptividad de todo.

116
00:07:15,420 --> 00:07:15,710
DE ACUERDO.

117
00:07:15,720 --> 00:07:20,230
Entonces, para concluir, les mostraré un sitio simple que haremos.

118
00:07:20,280 --> 00:07:23,110
Esta es nuestra startup llamada Heavy Petting.

119
00:07:23,190 --> 00:07:28,200
Te ayuda a encontrar a tu alma gemela felina perfecta y usa bootstrap.

120
00:07:28,200 --> 00:07:33,610
Puedes ver que tenemos una barra de navegación aquí, así como tenemos los botones de Morgan.

121
00:07:33,630 --> 00:07:39,970
Obtenemos estos iconos pequeños, luego tenemos nuestro texto aquí y la pequeña línea de etiqueta y luego nuestro botón.

122
00:07:40,290 --> 00:07:46,880
Y luego, al cambiar el tamaño de las cosas, todo es receptivo, puedes ver que las cosas se mueven y cambian de lugar.

123
00:07:47,190 --> 00:07:52,660
Y lo más importante es que obtenemos esa pequeña hamburguesa y tenemos una barra de navegación amigable para dispositivos móviles.

124
00:07:52,710 --> 00:07:57,780
Entonces, al final de esta unidad, trabajaremos en la creación de esta página de inicio de inicio

125
00:07:57,960 --> 00:08:00,540
falso que combina personas y mascotas en relaciones románticas