1
00:00:00,180 --> 00:00:04,680
Bienvenido de nuevo a esta lección. Te mostraré cómo instalar bootstrap en tus propias aplicaciones.

2
00:00:04,740 --> 00:00:08,370
Y una vez que hayas hecho eso, te mostraré algunos de los conceptos básicos importantes del uso del tono.

3
00:00:08,850 --> 00:00:14,180
Así que estoy en el punto com de arranque en la página de inicio y aquí hay un enlace de descarga de arranque.

4
00:00:14,850 --> 00:00:19,580
Y no es realmente un enlace de descarga directa porque tenemos dos opciones principales sobre cómo usar el arranque.

5
00:00:20,430 --> 00:00:24,340
Podemos descargar los archivos y lo haré para comenzar.

6
00:00:24,530 --> 00:00:29,360
Luego podemos tomar esos archivos y agregarlos a nuestra aplicación antes de ir más allá.

7
00:00:29,430 --> 00:00:35,230
Tengo un simple equipo de búsqueda que presentaré que llamo cosas básicas h DML m l.

8
00:00:35,790 --> 00:00:40,770
Y solo agregaré un título y agregaremos solo algunos elementos diferentes de bootstrap.

9
00:00:40,800 --> 00:00:45,510
Una vez que lo tengamos instalado, no haremos nada exhaustivo, solo lo usaremos como zona de

10
00:00:45,510 --> 00:00:47,960
juegos para algunos de los componentes básicos de arranque.

11
00:00:48,510 --> 00:00:54,840
De acuerdo, comencemos agregando solo un básico de arranque H-1 y

12
00:00:57,720 --> 00:00:58,460
guarde.

13
00:00:58,700 --> 00:01:01,790
Y luego, vamos a abrir esto en el navegador.

14
00:01:03,240 --> 00:01:05,280
Solo mantenlo ahí por ahora.

15
00:01:05,280 --> 00:01:06,690
Ahora para instalar bootstrap.

16
00:01:06,780 --> 00:01:08,190
Lo descargué

17
00:01:08,250 --> 00:01:13,720
Entonces, si abro ese archivo, podría ver dentro de aquí que hay algunos componentes diferentes.

18
00:01:13,830 --> 00:01:19,650
Hay un directorio C S S y dentro del directorio CCS hay bastantes archivos, pero

19
00:01:19,650 --> 00:01:23,890
en realidad solo hay un archivo importante que se arranca CSSA.

20
00:01:24,630 --> 00:01:27,710
Y este es en realidad el mismo archivo aquí minutos arrancados.

21
00:01:27,740 --> 00:01:32,290
SS, excepto que se ha reducido la lucha por minutos para ocupar menos espacio.

22
00:01:32,460 --> 00:01:36,280
Entonces estos dos son los archivos importantes para usar realmente bootstrap.

23
00:01:36,600 --> 00:01:41,850
Y este es un tema de arranque, los tres se usan para ayudar a agregar un tema personalizado al arranque,

24
00:01:41,850 --> 00:01:43,370
así que eso no importa tanto.

25
00:01:43,380 --> 00:01:45,680
Todo lo que necesitamos es arranque de Dotsie evaluar.

26
00:01:45,780 --> 00:01:49,430
Y comenzamos simplemente abriéndolo para que pueda ver con qué estamos trabajando.

27
00:01:49,470 --> 00:01:52,200
Este es el archivo principal de reevaluación de bootstraps.

28
00:01:52,770 --> 00:01:54,280
Son solo muchas clases.

29
00:01:54,300 --> 00:02:00,510
Si miras cada línea de CSSA, casi es un punto de declaración de clase simplemente.

30
00:02:00,690 --> 00:02:05,340
Y luego, lo que podemos hacer es usar esas clases en lugar de nuestras aplicaciones.

31
00:02:05,340 --> 00:02:12,060
Entonces, si queremos tener un botón con texto blanco y fondo rojo, vamos a aplicar el peligro del botón

32
00:02:12,060 --> 00:02:12,720
de punto.

33
00:02:12,900 --> 00:02:14,510
Y eso es lo que está haciendo aquí.

34
00:02:14,730 --> 00:02:19,590
Pero el peligro tiene un texto blanco, un fondo rojo y un borde rojizo.

35
00:02:19,650 --> 00:02:24,410
Entonces continuemos e incluyamos esto en nuestra aplicación como cualquier otro archivo CSSA.

36
00:02:24,750 --> 00:02:31,880
Así que lo que haré es arrastrarlo hasta aquí en el mismo directorio donde tengo mi equipo de estudio básico

37
00:02:32,540 --> 00:02:37,020
y también podría hacer reevaluar minutos de bootstrap en lugar de este.

38
00:02:37,020 --> 00:02:38,520
Realmente no importa.

39
00:02:38,550 --> 00:02:45,420
Técnicamente, este se carga un poco más rápido porque si lo abro puedes ver que es como una sola línea gigante, todos los

40
00:02:45,690 --> 00:02:47,570
espacios en blanco han sido eliminados.

41
00:02:47,850 --> 00:02:53,640
Por lo tanto, es más fácil de cargar, pero voy a utilizar esta versión más larga solo para que pueda

42
00:02:53,640 --> 00:02:55,450
ver exactamente con qué estamos trabajando.

43
00:02:55,470 --> 00:03:02,130
Ahora vamos a entrar en nuestro archivo actual. Cerraré esto y vamos a incluir el

44
00:03:02,130 --> 00:03:03,120
CSX arrancado.

45
00:03:03,220 --> 00:03:11,370
Así que al igual que cualquier otra hoja de estilo, necesitamos una etiqueta vinculada y el Tref es bootstrap dot C Ss

46
00:03:11,370 --> 00:03:16,310
y si guardamos y estamos renovando nuestra página aquí, notará una pequeña diferencia.

47
00:03:16,320 --> 00:03:18,140
Mira la fuente en este H-1.

48
00:03:18,420 --> 00:03:19,590
Cambia.

49
00:03:19,620 --> 00:03:24,720
Ahora tenemos bootstrap instalado o al menos los C S que van junto con bootstrap y eso es todo lo que

50
00:03:24,720 --> 00:03:25,500
necesitamos por ahora.

51
00:03:25,650 --> 00:03:30,060
No vamos a trabajar con el Javascript por el momento, no hay otra opción

52
00:03:30,510 --> 00:03:35,310
para instalar el bootstrap que realmente te brinden en el sitio web Get bootstrap aquí mismo.

53
00:03:35,400 --> 00:03:40,750
Bootstrap CDN podemos tomar este enlace aquí y agregar eso a nuestro código.

54
00:03:41,010 --> 00:03:44,870
Y es un enlace a una versión alojada de esos mismos archivos.

55
00:03:45,120 --> 00:03:49,920
Entonces, si abrimos eso en el navegador y lo pegamos, puede ver que tiene el

56
00:03:49,920 --> 00:03:56,670
contenido del archivo minimizado y está alojado en este sitio, así que podemos tener un enlace al que pueda reemplazar.

57
00:03:56,970 --> 00:03:57,540
Otro enlace

58
00:03:57,540 --> 00:04:01,530
Marque y pegue que usted es Ellen y lo comentaré.

59
00:04:01,530 --> 00:04:04,230
Por ahora, vuelve atrás y actualiza.

60
00:04:04,380 --> 00:04:06,020
Y nada cambia.

61
00:04:06,030 --> 00:04:10,950
La única diferencia es que, en el primer caso, el archivo se descargó en nuestra computadora a

62
00:04:10,950 --> 00:04:16,650
la que se estaba vinculando y en el segundo caso estamos vinculados a un archivo externo alojado en línea.

63
00:04:16,650 --> 00:04:20,750
Ahora vayamos a los documentos de arranque y comience a jugar a algunos de estos componentes.

64
00:04:21,240 --> 00:04:27,330
y hagamos clic en C Ss y solo voy a señalar algunas de las piezas más importantes que vamos a utilizar.

65
00:04:27,330 --> 00:04:29,150
Así que vuelve para obtener bootstrap

66
00:04:29,400 --> 00:04:31,940
Empecemos de manera simple con botones.

67
00:04:32,460 --> 00:04:40,650
Si queremos usar un botón, todo lo que tenemos que hacer es usar una clase batida seguida de un tipo de botón que

68
00:04:40,990 --> 00:04:48,510
está entre los valores predeterminados, lo que nos dará un botón blanco pero también es información de acceso BATNA primaria de

69
00:04:48,740 --> 00:04:49,220
VTAM.

70
00:04:49,260 --> 00:04:54,080
Peligro de advertencia y enlace y todos tienen un estilo ligeramente diferente.

71
00:04:54,240 --> 00:04:58,860
Y, por supuesto, podemos cambiar estos colores por nuestra cuenta, pero solo vamos a utilizar

72
00:04:58,860 --> 00:05:02,500
el incorporado una vez para comenzar, y él también puede ver aquí.

73
00:05:02,700 --> 00:05:08,600
No solo debemos usar un elemento de botón, podemos usar una etiqueta de anclaje, un botón o una entrada.

74
00:05:08,820 --> 00:05:10,720
Entonces probemos eso.

75
00:05:11,730 --> 00:05:13,030
Hola este H-1.

76
00:05:13,230 --> 00:05:22,740
Solo agreguemos una etiqueta de botón y las etiquetas de este botón solo digan "haga clic en mí" y simplemente actualicen la página

77
00:05:22,740 --> 00:05:25,860
ahora mismo y echen un vistazo a eso.

78
00:05:25,950 --> 00:05:27,310
Es un botón bastante feo.

79
00:05:27,690 --> 00:05:37,740
Pero si vamos y agregamos esa clase de PTEN y luego vamos a tener éxito y ahorrar, ahora obtenemos este

80
00:05:37,740 --> 00:05:39,200
increíble botón verde.

81
00:05:39,330 --> 00:05:41,870
Así que es bastante fácil conseguir algunos estilos básicos.

82
00:05:42,190 --> 00:05:47,670
Y regresemos y le mostraré algunas otras cosas sobre botones de diferentes tamaños que también

83
00:05:47,670 --> 00:05:50,110
podemos usar y es realmente fácil.

84
00:05:50,130 --> 00:05:58,410
Solo tenemos que agregar un botón grande y pequeño o un botón extra pequeño para que se pruebe después del éxito del botón y

85
00:05:58,410 --> 00:06:00,500
no tenga que ir tras él.

86
00:06:00,510 --> 00:06:08,600
No importa el orden de las clases, pero lo haré después de aquí DTN y vamos a hacer algo más pequeño y

87
00:06:08,600 --> 00:06:09,740
refrescar tu página.

88
00:06:09,750 --> 00:06:11,170
Aquí vamos.

89
00:06:11,170 --> 00:06:16,710
Voy a mover esto ahora y agreguemos algunos botones más, pero este será una etiqueta de anclaje

90
00:06:16,710 --> 00:06:24,640
y estará en una etiqueta o tenemos H. F. es igual a la barra diagonal de

91
00:06:24,660 --> 00:06:30,480
DP que cada día lee bootstrap dot com y luego el texto solo dice bootstrap docs.

92
00:06:30,550 --> 00:06:38,550
Así que haz esto un poco más grande y luego se agregará en la clase en la clase para

93
00:06:38,550 --> 00:06:47,330
que sea igual a PTEN y hagamos entre la información de Desch y lo haremos grande PTEN dash Elgie y refresh.

94
00:06:47,340 --> 00:06:48,690
Ahora tenemos dos botones.

95
00:06:48,750 --> 00:06:50,620
Uno es un elemento de botón real.

96
00:06:50,620 --> 00:06:55,210
Otro tiene una etiqueta de anclaje y si hago clic en esto, puede verlo como una etiqueta de anclaje.

97
00:06:56,340 --> 00:07:01,200
Entonces, ya en el primer minuto de usar el programa de arranque, hemos podido obtener botones de aspecto decente.

98
00:07:01,370 --> 00:07:05,330
Habría tomado de 10 a 15 líneas de CSSA por nuestra cuenta para replicar.

99
00:07:05,760 --> 00:07:06,960
Regresemos ahora.

100
00:07:06,990 --> 00:07:10,980
Vuelva a hacer esta pantalla completa y le mostraré algunas otras cosas sobre los botones.

101
00:07:11,220 --> 00:07:12,720
Entonces tenemos tamaños.

102
00:07:12,750 --> 00:07:18,560
También tenemos diferentes estados en los que podemos hacer que un botón aparezca como si estuviera activo

103
00:07:18,570 --> 00:07:21,080
y para hacerlo simplemente agregamos la clase activa.

104
00:07:21,390 --> 00:07:27,060
aparece lo suficientemente bien en el molde de la pantalla que este aparece activo.

105
00:07:27,060 --> 00:07:37,140
Entonces, si lo intentamos ahora, agreguemos un botón "A few", así que voy a duplicar nuestro pequeño botón "Click" en miniatura tres veces y en el

106
00:07:37,140 --> 00:07:43,590
último en el medio de la clase activo y refrescar y se puede ver con suerte que

107
00:07:43,620 --> 00:07:49,290
Volvamos y también podemos deshabilitar un botón agregando este atributo.

108
00:07:49,290 --> 00:07:51,850
Deshabilitado es igual a deshabilitado.

109
00:07:52,440 --> 00:07:57,950
Regresemos y deshabilitemos la última actualización.

110
00:07:58,180 --> 00:08:00,020
Y ahora este botón está deshabilitado.

111
00:08:00,120 --> 00:08:01,940
Recibimos ese simpático pequeño icono.

112
00:08:02,070 --> 00:08:05,110
No tiene un efecto de desplazamiento donde cambia de color.

113
00:08:05,220 --> 00:08:07,460
Es claramente un botón desactivado.

114
00:08:07,560 --> 00:08:14,610
Lo último que te mostraré para que podamos cambiar los colores otra vez, así que el botón peligro nocturno nos

115
00:08:14,610 --> 00:08:18,630
da esa naranja rojiza y puedes ver todos los colores aquí.

116
00:08:18,870 --> 00:08:24,300
Y, por supuesto, podría cambiarlos sobrescribiendo los estilos para que pueda hacer algo como esto en lugar de

117
00:08:24,300 --> 00:08:25,850
crear otra hoja de estilos.

118
00:08:25,860 --> 00:08:27,270
Lo haré aquí por ahora.

119
00:08:27,330 --> 00:08:32,330
Así que solo haremos una línea y también nos gusta la belleza y el peligro.

120
00:08:32,460 --> 00:08:40,050
es como se puede entrar y anular los estilos para que no tenga que usa lo que bootstrap te da de la caja.

121
00:08:40,050 --> 00:08:46,440
Podemos cambiar el color para que sea naranja y ahora podría poner en peligro la naranja de Texas y

122
00:08:46,440 --> 00:08:51,550
si quería cambiar realmente el fondo, podría hacer que el fondo sea naranja y así

123
00:08:52,200 --> 00:08:53,580
Y la mayoría de los lugares no.

124
00:08:54,030 --> 00:08:56,940
OK, así que son los botones y eso es todo lo que voy a hacer en este video.

125
00:08:56,940 --> 00:09:00,300
Solo quería darte una idea muy rápida de cómo funciona el bootstrap.

126
00:09:00,300 --> 00:09:06,450
Este patrón de agregar clases a elementos existentes y esas clases se define en ese archivo de arranque CSSA

127
00:09:06,460 --> 00:09:11,010
en el siguiente video. Voy a resaltar algunas de las otras piezas importantes que

128
00:09:11,010 --> 00:09:13,540
vienen con bootstrap incluyendo formularios e insumos.