1
00:00:03,460 --> 00:00:06,755
En el módulo anterior,

2
00:00:06,755 --> 00:00:12,335
examinamos el número de componentes de Bootstrap que se basan puramente en CSS.

3
00:00:12,335 --> 00:00:15,945
Por lo tanto, al aplicar las clases CSS para estos componentes,

4
00:00:15,945 --> 00:00:19,490
pudimos crearlos en nuestra página web.

5
00:00:19,490 --> 00:00:26,500
En este módulo, vamos a examinar más componentes basados en JavaScript de Bootstrap.

6
00:00:26,500 --> 00:00:30,580
Así que resumiendo, como vimos en el módulo anterior,

7
00:00:30,580 --> 00:00:34,755
Bootstrap soporta una serie de clases CSS que se pueden aplicar a

8
00:00:34,755 --> 00:00:43,260
su marcado HTML en sus páginas web para activar y hacer uso de estas clases CSS.

9
00:00:43,260 --> 00:00:49,610
Por lo tanto, podría ver cómo las clases CSS modificaron las etiquetas HTML genéricas y

10
00:00:49,610 --> 00:00:56,365
proporcionaron la propia forma de Bootstrap de presentar la misma información.

11
00:00:56,365 --> 00:01:02,180
Por lo tanto, los componentes que se basan puramente en CSS se pueden activar fácilmente

12
00:01:02,180 --> 00:01:04,260
aplicando las clases CSS bootstrap a

13
00:01:04,260 --> 00:01:09,270
las diversas etiquetas HTML que están allí en sus páginas web.

14
00:01:09,270 --> 00:01:14,525
Bootstrap por sí mismo se puede usar puramente para sus clases CSS.

15
00:01:14,525 --> 00:01:19,500
Otro aspecto de las clases CSS de Bootstraps que vimos fue

16
00:01:19,500 --> 00:01:24,630
que la mayoría de estos componentes comenzaron con una clase base que aplicó.

17
00:01:24,630 --> 00:01:27,660
Como, por ejemplo, cuando miras el botón,

18
00:01:27,660 --> 00:01:31,575
viste que la clase base era la clase BTN.

19
00:01:31,575 --> 00:01:33,160
Luego aplicaría algo así como

20
00:01:33,160 --> 00:01:38,160
un primario BTN que agregaría sus colores al BTN,

21
00:01:38,160 --> 00:01:43,175
luego podría definir el tamaño del botón diciendo BTN SM.

22
00:01:43,175 --> 00:01:49,905
Entonces también podría definir el botón para que sea un bloque completo usando la clase de bloque BTN.

23
00:01:49,905 --> 00:01:56,260
Por lo tanto, todas estas clases y modificadores posteriores a la clase BTN base.

24
00:01:56,260 --> 00:01:59,430
Así que este enfoque, lo verá una

25
00:01:59,430 --> 00:02:03,330
y otra vez en muchos de los componentes de Bootstraps.

26
00:02:03,330 --> 00:02:07,925
Por lo tanto, tendrá una clase base y luego un conjunto de clases modificadoras que

27
00:02:07,925 --> 00:02:14,164
se pueden aplicar para modificar el comportamiento del componente base.

28
00:02:14,164 --> 00:02:20,210
Esto facilita el diseño fácil de su página web.

29
00:02:20,210 --> 00:02:24,260
Tomando otro ejemplo, podemos ver la clase Nav.

30
00:02:24,260 --> 00:02:28,020
Utilizamos la clase Nav en la barra de navegación que

31
00:02:28,020 --> 00:02:33,635
incluimos en nuestra página web en el módulo anterior.

32
00:02:33,635 --> 00:02:40,130
La clase Nav, modificamos eso aplicando la clase Nav-bar Nav a ella.

33
00:02:40,130 --> 00:02:45,660
Así que eso nos proporcionó una cierta forma de presentar la información de navegación.

34
00:02:45,660 --> 00:02:51,310
En este módulo, examinaremos las pestañas de

35
00:02:51,310 --> 00:02:58,295
navegación y las pastillas de navegación que son otra forma de presentar información de navegación para la página web.

36
00:02:58,295 --> 00:03:04,180
Las pestañas y las píldoras que estamos presentando de nuevo la navegación,

37
00:03:04,180 --> 00:03:10,265
soportado con un plugin de JavaScript,

38
00:03:10,265 --> 00:03:15,195
proporciona una forma mejorada de proporcionar navegación dentro de su contenido.

39
00:03:15,195 --> 00:03:18,835
Por lo tanto, examinaremos eso en este módulo en particular.

40
00:03:18,835 --> 00:03:23,620
Utilizo esto como ejemplo para ilustrarle cómo comenzó desde una clase base,

41
00:03:23,620 --> 00:03:28,075
puede modificar aplicando las clases modificadoras a la clase base.

42
00:03:28,075 --> 00:03:30,640
Por supuesto, si desea poner en

43
00:03:30,640 --> 00:03:35,285
acción la parte JavaScript de sus componentes de Bootstrap,

44
00:03:35,285 --> 00:03:38,670
entonces debe comenzar a aplicar las clases de JavaScript.

45
00:03:38,670 --> 00:03:41,725
Por lo tanto, Bootstrap soporta una serie de componentes que

46
00:03:41,725 --> 00:03:44,970
se soportan a través de plugins de JavaScript.

47
00:03:44,970 --> 00:03:47,880
Ahora, cuando usa estos complementos en su página web,

48
00:03:47,880 --> 00:03:52,890
puede incluir plugins individuales que realmente va a usar en su sitio web,

49
00:03:52,890 --> 00:03:55,815
o todo el conjunto de plugins.

50
00:03:55,815 --> 00:03:59,500
Ahora, lo que vamos a hacer en los ejercicios es

51
00:03:59,500 --> 00:04:03,495
incluir todo el conjunto de plugins porque sólo queremos explorarlos todos.

52
00:04:03,495 --> 00:04:05,870
Pero si está diseñando un sitio web,

53
00:04:05,870 --> 00:04:09,000
puede incluir solo un subconjunto de estos complementos

54
00:04:09,000 --> 00:04:12,300
que realmente está empleando en su sitio web,

55
00:04:12,300 --> 00:04:15,630
reduciendo así la cantidad de código JavaScript que necesita

56
00:04:15,630 --> 00:04:21,470
ser enviado a un usuario que está viendo su página web.

57
00:04:21,470 --> 00:04:27,590
Esta es la forma en que veo el enfoque de Bootstraps para usar JavaScript en

58
00:04:27,590 --> 00:04:33,905
su propio soporte para componentes de Bootstrap que están habilitados con JavaScript.

59
00:04:33,905 --> 00:04:36,785
Si miras JavaScript por sí solo,

60
00:04:36,785 --> 00:04:44,845
proporciona mucha flexibilidad y te permite hacer muchas cosas interesantes.

61
00:04:44,845 --> 00:04:46,695
Pero eso también implica

62
00:04:46,695 --> 00:04:52,200
escribir código JavaScript para ser utilizado cuando está diseñando su sitio web.

63
00:04:52,200 --> 00:04:58,730
Ahora, veo JavaScript como un gran luchador de sumo con mucha capacidad,

64
00:04:58,730 --> 00:05:02,670
mucha potencia, pero indomable.

65
00:05:02,670 --> 00:05:09,875
Ahora, jQuery como una biblioteca que está construida sobre JavaScript,

66
00:05:09,875 --> 00:05:14,815
esencialmente toma el luchador de sumo y luego lo empaqueta de una manera mejor para hacer que

67
00:05:14,815 --> 00:05:20,435
este gorila de cien libras en un tamaño más manejable,

68
00:05:20,435 --> 00:05:23,790
más fácil de abordar y más fácil de

69
00:05:23,790 --> 00:05:28,235
incluir y hacer uso en su sitio web diseño.

70
00:05:28,235 --> 00:05:31,855
Por lo tanto, si está utilizando la biblioteca jQuery directamente,

71
00:05:31,855 --> 00:05:34,510
definitivamente puede aprovechar muchos de

72
00:05:34,510 --> 00:05:40,175
los componentes de jQuery y hacer uso de ellos en su página web.

73
00:05:40,175 --> 00:05:44,480
Ahora, ese es un enfoque que siempre puede tomar porque jQuery

74
00:05:44,480 --> 00:05:48,170
ya se incluirá en su página web de Bootstrap,

75
00:05:48,170 --> 00:05:52,910
si va a aprovechar los componentes basados en JavaScript.

76
00:05:52,910 --> 00:05:56,545
Bootstrap lleva esto un paso más allá,

77
00:05:56,545 --> 00:05:59,145
y luego mirando el

78
00:05:59,145 --> 00:06:04,395
enfoque de la imagen de Bootstrap es tomar al luchador de sumo y luego ponerlo en una caja.

79
00:06:04,395 --> 00:06:09,730
Esencialmente de pie para empaquetar

80
00:06:09,730 --> 00:06:18,935
sus complementos de JavaScript en un componente que puede usar más fácilmente en sus páginas web.

81
00:06:18,935 --> 00:06:24,775
Por lo tanto, los componentes basados en Bootstrap JavaScript esencialmente toman soporte basado en jQuery,

82
00:06:24,775 --> 00:06:28,760
pero luego los empaquetan de una manera que pueda emplearlos en

83
00:06:28,760 --> 00:06:34,390
su página web incluso sin escribir una sola línea de código JavaScript.

84
00:06:34,390 --> 00:06:38,955
Aquí es donde el componente Bootstrap JavaScript

85
00:06:38,955 --> 00:06:43,030
se puede usar sin escribir una sola línea de código.

86
00:06:43,030 --> 00:06:46,620
La forma en que se admite en Bootstrap es que,

87
00:06:46,620 --> 00:06:51,400
los componentes de JavaScript admiten una serie de

88
00:06:51,400 --> 00:06:56,940
atributos de estrella de guiones de datos que puede aplicar a sus etiquetas HTML.

89
00:06:56,940 --> 00:07:00,120
Entonces, me verás usando cosas como alternar

90
00:07:00,120 --> 00:07:04,370
datos, espía de datos, objetivo de datos, etc.

91
00:07:04,370 --> 00:07:07,795
Si recuerdas, cuando diseñamos la barra de navegación,

92
00:07:07,795 --> 00:07:11,120
habías visto un par de estos atributos.

93
00:07:11,120 --> 00:07:15,660
Allí diseñamos el botón para las pantallas extra pequeñas.

94
00:07:15,660 --> 00:07:21,550
Ahora, es hora de que [inaudible] por qué lo hicimos en el módulo anterior.

95
00:07:21,550 --> 00:07:26,935
Por lo tanto, vamos a explorar este enfoque con gran detalle en este módulo,

96
00:07:26,935 --> 00:07:33,000
mirando varios componentes de Bootstrap que aprovechan el soporte de JavaScript.

97
00:07:33,000 --> 00:07:35,015
Por supuesto, puede aprovechar

98
00:07:35,015 --> 00:07:38,650
la API de JavaScript completa que está

99
00:07:38,650 --> 00:07:42,945
disponible para todos estos componentes escribiendo código JavaScript.

100
00:07:42,945 --> 00:07:46,130
Vamos a aplazar esto al siguiente módulo,

101
00:07:46,130 --> 00:07:51,370
donde examinaremos cómo puede escribir código JavaScript simple basado en

102
00:07:51,370 --> 00:07:54,580
la sintaxis jQuery para agregar

103
00:07:54,580 --> 00:08:00,070
más funcionalidad a sus componentes de Bootstrap basados en JavaScript.