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

2
00:00:06,755 --> 00:00:12,335
examinamos o número de componentes Bootstrap que são puramente baseados em CSS.

3
00:00:12,335 --> 00:00:15,945
Então, aplicando as classes CSS para esses componentes,

4
00:00:15,945 --> 00:00:19,490
fomos capazes de criá-los em nossa página web.

5
00:00:19,490 --> 00:00:26,500
Neste módulo, vamos examinar mais componentes baseados em JavaScript do Bootstrap.

6
00:00:26,500 --> 00:00:30,580
Então resumindo, como vimos no módulo anterior,

7
00:00:30,580 --> 00:00:34,755
Bootstrap suporta um número de classes CSS que podem ser aplicadas à

8
00:00:34,755 --> 00:00:43,260
sua marcação HTML em suas páginas da Web para ativar e fazer uso dessas classes CSS.

9
00:00:43,260 --> 00:00:49,610
Então, você pode ver como as classes CSS modificaram as tags HTML genéricas e

10
00:00:49,610 --> 00:00:56,365
forneceu a própria maneira do Bootstrap de apresentar as mesmas informações.

11
00:00:56,365 --> 00:01:02,180
Assim, os componentes que são puramente baseados em CSS podem ser facilmente ativados

12
00:01:02,180 --> 00:01:04,260
aplicando as classes CSS bootstrap para

13
00:01:04,260 --> 00:01:09,270
as várias tags HTML que estão lá em suas páginas da Web.

14
00:01:09,270 --> 00:01:14,525
Bootstrap por si só pode ser usado puramente para suas classes CSS.

15
00:01:14,525 --> 00:01:19,500
Um outro aspecto das classes CSS Bootstraps que vimos foi

16
00:01:19,500 --> 00:01:24,630
que a maioria desses componentes começou com uma classe base que você aplicou.

17
00:01:24,630 --> 00:01:27,660
Como por exemplo, quando você olha para o botão,

18
00:01:27,660 --> 00:01:31,575
você viu que a classe base era a classe BTN.

19
00:01:31,575 --> 00:01:33,160
Então você aplicaria algo como

20
00:01:33,160 --> 00:01:38,160
um primário BTN que adicionaria suas cores ao BTN,

21
00:01:38,160 --> 00:01:43,175
então você poderia definir o tamanho do botão dizendo BTN SM.

22
00:01:43,175 --> 00:01:49,905
Em seguida, você também pode definir o botão para ser um bloco inteiro usando a classe de bloco BTN.

23
00:01:49,905 --> 00:01:56,260
Então, todas essas classes subseqüentes e modificadores para a classe BTN base.

24
00:01:56,260 --> 00:01:59,430
Então, esta abordagem, você vai vê-lo uma

25
00:01:59,430 --> 00:02:03,330
e outra vez em muitos dos componentes Bootstraps.

26
00:02:03,330 --> 00:02:07,925
Então você terá uma classe base, em seguida, conjunto de classes modificadoras que podem ser

27
00:02:07,925 --> 00:02:14,164
aplicadas para modificar o comportamento do componente base.

28
00:02:14,164 --> 00:02:20,210
Isso facilita o design da sua página web.

29
00:02:20,210 --> 00:02:24,260
Tomando outro exemplo, podemos olhar para a classe Nav.

30
00:02:24,260 --> 00:02:28,020
Usamos a classe Nav na barra Naval que

31
00:02:28,020 --> 00:02:33,635
incluímos em nossa página web no módulo anterior.

32
00:02:33,635 --> 00:02:40,130
A classe Nav, modificamos isso aplicando a classe Nav-bar Nav a ela.

33
00:02:40,130 --> 00:02:45,660
Isso nos proporcionou uma certa forma de apresentar as informações de navegação.

34
00:02:45,660 --> 00:02:51,310
Neste módulo, vamos examinar Nav-tabs e

35
00:02:51,310 --> 00:02:58,295
NAV-tablets que são mais uma forma de apresentar informações de navegação para a página web.

36
00:02:58,295 --> 00:03:04,180
As guias e as pílulas que estamos apresentando navegação novamente,

37
00:03:04,180 --> 00:03:10,265
suportado com um plugin JavaScript,

38
00:03:10,265 --> 00:03:15,195
fornece uma maneira aprimorada de fornecer navegação dentro do seu conteúdo.

39
00:03:15,195 --> 00:03:18,835
Então, vamos examinar isso neste módulo em particular.

40
00:03:18,835 --> 00:03:23,620
Eu uso isso como um exemplo para ilustrar como começou a partir de uma classe base,

41
00:03:23,620 --> 00:03:28,075
você pode modificar aplicando as classes modificadoras para a classe base.

42
00:03:28,075 --> 00:03:30,640
Claro, se você quiser trazer a

43
00:03:30,640 --> 00:03:35,285
parte JavaScript de seus componentes Bootstrap em ação,

44
00:03:35,285 --> 00:03:38,670
então você deve começar a aplicar as classes JavaScript.

45
00:03:38,670 --> 00:03:41,725
Então, o Bootstrap suporta uma série de componentes que

46
00:03:41,725 --> 00:03:44,970
são suportados através de plugins JavaScript.

47
00:03:44,970 --> 00:03:47,880
Agora, quando você usa esses plugins em sua página da Web,

48
00:03:47,880 --> 00:03:52,890
você pode incluir plugins individuais que você está realmente indo para usar em seu site,

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

50
00:03:55,815 --> 00:03:59,500
Agora, o que nós vamos fazer nos exercícios é,

51
00:03:59,500 --> 00:04:03,495
incluir todo o conjunto de plugins porque nós só queremos explorar todos eles.

52
00:04:03,495 --> 00:04:05,870
Mas se você estiver projetando um site,

53
00:04:05,870 --> 00:04:09,000
você pode incluir apenas um subconjunto desses plugins

54
00:04:09,000 --> 00:04:12,300
que você está realmente empregando em seu site,

55
00:04:12,300 --> 00:04:15,630
reduzindo assim a quantidade de código JavaScript que precisa

56
00:04:15,630 --> 00:04:21,470
ser enviado para um usuário que está visualizando sua página da Web.

57
00:04:21,470 --> 00:04:27,590
Esta é a maneira que eu olhar para Bootstraps abordagem para usar JavaScript em

58
00:04:27,590 --> 00:04:33,905
seu próprio suporte para componentes Bootstrap que são habilitados com JavaScript.

59
00:04:33,905 --> 00:04:36,785
Se você olhar para o JavaScript por conta própria,

60
00:04:36,785 --> 00:04:44,845
ele fornece muita flexibilidade e permite que você faça muitas coisas interessantes.

61
00:04:44,845 --> 00:04:46,695
Mas isso também implica

62
00:04:46,695 --> 00:04:52,200
escrever código JavaScript para ser usado quando você está projetando seu site.

63
00:04:52,200 --> 00:04:58,730
Agora, eu vejo o JavaScript como um grande lutador de sumô com muita capacidade,

64
00:04:58,730 --> 00:05:02,670
muito poder, mas indomável.

65
00:05:02,670 --> 00:05:09,875
Agora, jQuery como uma biblioteca que é construído em cima do JavaScript,

66
00:05:09,875 --> 00:05:14,815
essencialmente leva o lutador de sumo e, em seguida, empacota de uma maneira melhor para tornar

67
00:05:14,815 --> 00:05:20,435
este gorila de cem libras em um tamanho mais gerenciável,

68
00:05:20,435 --> 00:05:23,790
mais fácil de abordar e mais fácil de

69
00:05:23,790 --> 00:05:28,235
incluir e fazer uso em seu site design.

70
00:05:28,235 --> 00:05:31,855
Então, se você estiver usando a biblioteca jQuery diretamente,

71
00:05:31,855 --> 00:05:34,510
você pode definitivamente aproveitar muitos

72
00:05:34,510 --> 00:05:40,175
dos componentes jQuery e fazer uso deles em sua página web.

73
00:05:40,175 --> 00:05:44,480
Agora, essa é uma abordagem que você sempre pode tomar porque jQuery

74
00:05:44,480 --> 00:05:48,170
já vai ser incluído em sua página da Web do Bootstrap,

75
00:05:48,170 --> 00:05:52,910
se você estiver indo para alavancar os componentes baseados em JavaScript.

76
00:05:52,910 --> 00:05:56,545
Bootstrap leva isso um passo adiante,

77
00:05:56,545 --> 00:05:59,145
e, em seguida, olhando para a

78
00:05:59,145 --> 00:06:04,395
abordagem de Bootstrap imagem é tomar o lutador de sumô e, em seguida, colocá-lo em uma caixa.

79
00:06:04,395 --> 00:06:09,730
Essencialmente, para empacotar

80
00:06:09,730 --> 00:06:18,935
seus plugins JavaScript em um componente que você pode usar mais facilmente em suas páginas da Web.

81
00:06:18,935 --> 00:06:24,775
Então, os componentes baseados em JavaScript do Bootstrap essencialmente tomam suporte baseado em JQuery,

82
00:06:24,775 --> 00:06:28,760
mas, em seguida, empacote-os de uma forma que você pode empregá-los em

83
00:06:28,760 --> 00:06:34,390
sua página da Web, mesmo sem escrever uma única linha de código JavaScript.

84
00:06:34,390 --> 00:06:38,955
É aqui que o componente JavaScript Bootstrap

85
00:06:38,955 --> 00:06:43,030
pode ser usado sem escrever uma única linha de código.

86
00:06:43,030 --> 00:06:46,620
A forma como ele é suportado no Bootstrap é que,

87
00:06:46,620 --> 00:06:51,400
os componentes JavaScript suportam uma série de

88
00:06:51,400 --> 00:06:56,940
atributos de estrela de hífen de dados que você pode aplicar às suas tags HTML.

89
00:06:56,940 --> 00:07:00,120
Então, você vai me ver usando coisas como data-toggle,

90
00:07:00,120 --> 00:07:04,370
data-spy, data-target, e assim por diante.

91
00:07:04,370 --> 00:07:07,795
Se você se lembra, quando projetamos a barra Naval,

92
00:07:07,795 --> 00:07:11,120
você tinha visto alguns desses atributos.

93
00:07:11,120 --> 00:07:15,660
Lá nós projetamos o botão para as telas extra pequenas.

94
00:07:15,660 --> 00:07:21,550
Agora, é hora de nós [inaudível] por que fizemos isso no módulo anterior.

95
00:07:21,550 --> 00:07:26,935
Então, vamos explorar essa abordagem com grande detalhe neste módulo,

96
00:07:26,935 --> 00:07:33,000
olhando para vários componentes do Bootstrap que aproveitam o suporte a JavaScript.

97
00:07:33,000 --> 00:07:35,015
Claro, você pode aproveitar

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

99
00:07:38,650 --> 00:07:42,945
disponível para todos esses componentes, na verdade escrevendo código JavaScript.

100
00:07:42,945 --> 00:07:46,130
Vamos adiar isso para o próximo módulo,

101
00:07:46,130 --> 00:07:51,370
onde vamos examinar como você pode escrever código JavaScript simples baseado

102
00:07:51,370 --> 00:07:54,580
na sintaxe jQuery para adicionar

103
00:07:54,580 --> 00:08:00,070
mais funcionalidade aos seus componentes Bootstrap baseados em JavaScript.