1
00:00:03,910 --> 00:00:06,210
Coloque suas botas,

2
00:00:06,210 --> 00:00:08,470
e vamos começar com Bootstrap.

3
00:00:08,470 --> 00:00:13,045
Tenho certeza que seus dedos estão coçando para colocar suas mãos em volta do Bootstrap.

4
00:00:13,045 --> 00:00:18,250
Então, primeiro passo, vá para

5
00:00:18,250 --> 00:00:22,280
as instruções de exercícios que seguem este vídeo

6
00:00:22,280 --> 00:00:27,805
na página do seu curso Bootstrap em Coursera.

7
00:00:27,805 --> 00:00:29,840
E, em seguida, nas instruções,

8
00:00:29,840 --> 00:00:35,520
você verá um link para este arquivo Bootstrap4-starter.zip.

9
00:00:35,520 --> 00:00:39,695
Baixe o arquivo zip para o seu computador.

10
00:00:39,695 --> 00:00:46,610
Além disso, as instruções passo a passo ilustradas neste vídeo

11
00:00:46,610 --> 00:00:52,995
também serão dadas nas instruções de exercício que seguem este vídeo.

12
00:00:52,995 --> 00:01:00,595
Lá, você terá acesso a qualquer um dos trechos de código que você precisa para este exercício.

13
00:01:00,595 --> 00:01:04,920
Este seria o caso de todos os exercícios no futuro, também.

14
00:01:04,920 --> 00:01:08,125
Então, se você precisar se apossar dos trechos de código,

15
00:01:08,125 --> 00:01:10,145
é aí que você os encontrará.

16
00:01:10,145 --> 00:01:12,180
Depois de baixar o arquivo zip,

17
00:01:12,180 --> 00:01:16,230
mova esse arquivo zip para um local conveniente no computador.

18
00:01:16,230 --> 00:01:23,375
Então, aqui, eu o movi para uma pasta chamada Coursera no meu computador,

19
00:01:23,375 --> 00:01:27,145
e então eu tenho o arquivo zip com esse nome longo lá.

20
00:01:27,145 --> 00:01:28,765
Apenas descompacte o arquivo.

21
00:01:28,765 --> 00:01:30,445
Depois de descompactar o arquivo,

22
00:01:30,445 --> 00:01:36,715
você encontrará uma pasta chamada Bootstrap4 criada em seu computador.

23
00:01:36,715 --> 00:01:38,965
Dentro da pasta Bootstrap4,

24
00:01:38,965 --> 00:01:42,450
você verá outra pasta chamada Confusion, lá.

25
00:01:42,450 --> 00:01:46,260
Vá para a pasta Confusion e você veria dois arquivos lá,

26
00:01:46,260 --> 00:01:49,600
index.html e package.json arquivo.

27
00:01:49,600 --> 00:01:53,795
Agora, abra uma janela de comando ou

28
00:01:53,795 --> 00:02:00,290
um terminal e, em seguida, mova para esta pasta em sua janela de comando ou terminal.

29
00:02:00,290 --> 00:02:05,125
No prompt de comando, digite npm install.

30
00:02:05,125 --> 00:02:09,150
Note que eu já tenho o arquivo package.json lá dentro.

31
00:02:09,150 --> 00:02:12,745
Portanto, o arquivo package.json é configurado para que

32
00:02:12,745 --> 00:02:19,200
a dependência de desenvolvimento lite-server seja instalada se eu digitar npm install.

33
00:02:19,200 --> 00:02:21,150
Então, uma vez que você digitar npm install,

34
00:02:21,150 --> 00:02:27,160
você verá que o lite-server será instalado em sua pasta node_modules cada.

35
00:02:27,160 --> 00:02:30,415
Uma vez concluído,

36
00:02:30,415 --> 00:02:35,930
abra esta pasta no seu editor favorito.

37
00:02:35,930 --> 00:02:39,060
Depois de ter a pasta aberta no editor,

38
00:02:39,060 --> 00:02:45,170
crie um arquivo.gitignore e, em

39
00:02:45,170 --> 00:02:50,530
seguida, coloque node_modules no arquivo gitignore e salve.

40
00:02:50,530 --> 00:02:54,940
Portanto, isto é para garantir que quando você faz um gitcommit,

41
00:02:54,940 --> 00:02:57,615
a pasta node_modules não será confirmada.

42
00:02:57,615 --> 00:03:05,475
Depois disso, é hora de ir buscar Bootstrap para uso em nosso projeto.

43
00:03:05,475 --> 00:03:08,050
Antes de buscar Bootstrap,

44
00:03:08,050 --> 00:03:11,810
vamos fazer um commit do estado atual do arquivo.

45
00:03:11,810 --> 00:03:18,535
Então, faça git init e inicialize seu repositório git.

46
00:03:18,535 --> 00:03:21,600
Então você pode verificar o status do git,

47
00:03:21,600 --> 00:03:25,290
e você veria que esses arquivos precisam ser confirmados,

48
00:03:25,290 --> 00:03:29,315
adicionar todos os arquivos,

49
00:03:29,315 --> 00:03:38,885
gitcommit -m “Configuração Inicial”.

50
00:03:38,885 --> 00:03:43,745
Então este é o ponto de partida da sua pasta neste momento.

51
00:03:43,745 --> 00:03:52,785
Então, com isso, seu ponto de partida do seu projeto web foi agora comprometido com o git.

52
00:03:52,785 --> 00:03:57,770
Agora você pode configurar este git para sincronizar com um repositório online,

53
00:03:57,770 --> 00:04:00,800
assim como falamos nos exercícios git.

54
00:04:00,800 --> 00:04:05,690
Assim, você pode configurar um repositório no Bitbucket ou no Github e, em seguida,

55
00:04:05,690 --> 00:04:11,430
sincronizar este projeto com esse repositório git.

56
00:04:11,430 --> 00:04:15,265
Nosso próximo passo é ir buscar Bootstrap.

57
00:04:15,265 --> 00:04:25,260
Para fazer isso, adicione o tipo de prompt npm install bootstrap @4 .0.0 e também —save,

58
00:04:25,260 --> 00:04:29,470
e deixe o Bootstrap ser instalado.

59
00:04:29,470 --> 00:04:31,880
Uma vez que Bootstrap é instalado,

60
00:04:31,880 --> 00:04:35,535
percebemos que também precisamos instalar seu peer,

61
00:04:35,535 --> 00:04:38,975
que é jQuery, bem como Popper.js.

62
00:04:38,975 --> 00:04:46,350
Então, vamos em frente e instalar o jQuery e o Popper.js nesta pasta do projeto.

63
00:04:46,350 --> 00:04:50,905
Então, para fazer isso, adicione o tipo de prompt npm install

64
00:04:50,905 --> 00:04:55,115
jquery @3 .3.1

65
00:04:55,115 --> 00:05:03,185
e Popper.js @1 .12.9 —save.

66
00:05:03,185 --> 00:05:06,385
Agora, sempre que instalo qualquer um dos pacotes npm,

67
00:05:06,385 --> 00:05:11,620
estou especificando explicitamente a versão do pacote que você deve instalar.

68
00:05:11,620 --> 00:05:17,580
A razão para isso é que eu quero ter certeza de que, à medida que você passar por este exercício,

69
00:05:17,580 --> 00:05:19,500
todas as etapas funcionarão corretamente.

70
00:05:19,500 --> 00:05:25,380
Então eu estou especificando a versão exata dos módulos npm a serem instalados.

71
00:05:25,380 --> 00:05:33,235
Então, aqui, estamos instalando o jQuery versão 3.3.1 e Popper.js versão 1.12.9.

72
00:05:33,235 --> 00:05:40,895
Posteriormente, também, especificarei as versões exatas dos módulos a serem instalados.

73
00:05:40,895 --> 00:05:44,130
Então vamos em frente e instalar estes.

74
00:05:46,530 --> 00:05:49,030
E uma vez que eles são instalados,

75
00:05:49,030 --> 00:05:51,055
podemos ir para o próximo passo.

76
00:05:51,055 --> 00:05:55,615
Voltando para a nossa pasta de projeto,

77
00:05:55,615 --> 00:05:58,070
você verá que se você entrar em node_modules,

78
00:05:58,070 --> 00:06:02,675
você verá uma pasta lá chamada Bootstrap.

79
00:06:02,675 --> 00:06:04,865
E dentro da pasta chamada Bootstrap,

80
00:06:04,865 --> 00:06:07,845
você encontrará uma pasta chamada dist.

81
00:06:07,845 --> 00:06:09,910
Então, dentro da pasta dist,

82
00:06:09,910 --> 00:06:13,705
você vai encontrar duas sub-pastas chamadas CSS e js.

83
00:06:13,705 --> 00:06:15,775
Se você entrar na pasta CSS,

84
00:06:15,775 --> 00:06:20,820
você encontrará um monte de arquivos CSS pré-compilados aqui.

85
00:06:20,820 --> 00:06:27,630
O que é de interesse para nós no início é Bootstrap min.css.

86
00:06:27,630 --> 00:06:31,620
Esse é o arquivo que vamos incluir em nosso

87
00:06:31,620 --> 00:06:36,020
arquivo index.html para fazer uso do Bootstrap em nosso projeto.

88
00:06:36,020 --> 00:06:38,820
Da mesma forma, indo para a pasta js,

89
00:06:38,820 --> 00:06:42,165
você veria que há um arquivo Bootstrap min.js.

90
00:06:42,165 --> 00:06:45,680
Nós vamos incluir isso também em nosso index.htm.

91
00:06:45,680 --> 00:06:48,790
Então esse será o próximo passo que você me verá fazendo.

92
00:06:48,790 --> 00:06:51,215
Antes de irmos para o próximo passo,

93
00:06:51,215 --> 00:06:55,550
vamos iniciar nosso lite-server para que possamos ver as alterações que fazemos no

94
00:06:55,550 --> 00:07:01,860
index.html imediatamente refletidas em nossa página web em tempo real.

95
00:07:01,860 --> 00:07:03,630
Então vamos iniciar os servidores de lite-.

96
00:07:03,630 --> 00:07:07,240
Então, digite o prompt tipo npm start

97
00:07:07,240 --> 00:07:09,915
e, em seguida, que deve iniciar seu lite-server.

98
00:07:09,915 --> 00:07:13,485
Agora você pode ver, na tela,

99
00:07:13,485 --> 00:07:21,785
meu editor à esquerda e a versão atual da página index.html à direita.

100
00:07:21,785 --> 00:07:23,215
Então, como você pode ver,

101
00:07:23,215 --> 00:07:27,615
eu já configurei a página index.html com algum conteúdo.

102
00:07:27,615 --> 00:07:33,820
Esta página web parece a típica página web de um professor de ciência da computação.

103
00:07:33,820 --> 00:07:41,170
Vamos agora abrir a página index.html em nosso editor.

104
00:07:41,170 --> 00:07:45,645
E então, na parte principal da página index.html,

105
00:07:45,645 --> 00:07:47,360
logo antes do título,

106
00:07:47,360 --> 00:07:49,935
vou colar um pouco de código.

107
00:07:49,935 --> 00:07:53,730
Este trecho de código é dado a você nas instruções.

108
00:07:53,730 --> 00:07:56,740
Então você pode simplesmente copiar e colar este trecho de código,

109
00:07:56,740 --> 00:08:00,765
e eu vou orientá-lo através do que este trecho de código está tentando fazer.

110
00:08:00,765 --> 00:08:05,585
Você vai notar que eu tenho três meta tags aqui.

111
00:08:05,585 --> 00:08:09,130
O primeiro diz charset="utf-8".

112
00:08:09,130 --> 00:08:11,860
Então este é o unicode que vai ser usado.

113
00:08:11,860 --> 00:08:17,675
A segunda linha que diz meta name="viewport”,

114
00:08:17,675 --> 00:08:21,100
Eu vou voltar e explicar esta linha particular para

115
00:08:21,100 --> 00:08:25,745
você na próxima lição quando vamos olhar para web design responsivo.

116
00:08:25,745 --> 00:08:30,100
Agora, deixe-me chamar a sua atenção para esta linha em particular que

117
00:08:30,100 --> 00:08:34,840
diz link rel="stylesheet”, e depois href.

118
00:08:34,840 --> 00:08:43,495
Note que estou especificando href como “node_modules/bootstrap/dist/css/bootstrap.min.css”.

119
00:08:43,495 --> 00:08:49,150
Então o que eu estou especificando é que o arquivo bootstrap.min.css,

120
00:08:49,150 --> 00:08:52,970
que contém as classes CSS correspondentes ao Bootstrap que nós

121
00:08:52,970 --> 00:08:57,995
baixamos usando NPM para nossa pasta node_modules,

122
00:08:57,995 --> 00:09:05,350
eu vou incluir isso no cabeçalho da minha página index.html.

123
00:09:05,350 --> 00:09:09,370
Então você precisa incluir as classes CSS fornecidas pelo Bootstrap.

124
00:09:09,370 --> 00:09:15,150
Você também precisa incluir as classes JavaScript fornecidas pelo Bootstrap, o

125
00:09:15,150 --> 00:09:19,445
que vamos fazer na parte inferior desta página.

126
00:09:19,445 --> 00:09:23,465
Indo para a parte inferior desta página, observe,

127
00:09:23,465 --> 00:09:27,400
pouco antes da tag body de fechamento,

128
00:09:27,400 --> 00:09:32,820
eu vou colar no código para incluir todos os scripts lá.

129
00:09:32,820 --> 00:09:35,105
Então, para fazer isso,

130
00:09:35,105 --> 00:09:41,300
eu apenas colar nas três linhas para o script incluir o jQuery

131
00:09:41,300 --> 00:09:45,085
, Popper.js e também o Bootstrap min.js.

132
00:09:45,085 --> 00:09:48,635
E observe a ordem em que incluí isso.

133
00:09:48,635 --> 00:09:50,895
Então o Bootstrap está na parte inferior.

134
00:09:50,895 --> 00:09:57,340
Então, desde Bootstrap é dependente tanto jQuery e Popper nessa ordem,

135
00:09:57,340 --> 00:09:59,945
então eu vou primeiro inserir jQuery.

136
00:09:59,945 --> 00:10:03,835
E depois disso, inserimos Popper e, finalmente,

137
00:10:03,835 --> 00:10:09,585
Bootstrap min.js na parte inferior do arquivo index.html.

138
00:10:09,585 --> 00:10:13,400
Agora, isso está incluído na parte inferior da página.

139
00:10:13,400 --> 00:10:18,665
Porque quando você está carregando a página de um servidor web,

140
00:10:18,665 --> 00:10:24,360
você deseja que as classes CSS sejam carregadas imediatamente para que, à medida que a página começa

141
00:10:24,360 --> 00:10:26,430
a renderizar, quando

142
00:10:26,430 --> 00:10:29,810
o JavaScript é buscado, o JavaScript precisa executar para fazer alterações em

143
00:10:29,810 --> 00:10:33,395
sua página com o código JavaScript,

144
00:10:33,395 --> 00:10:34,970
e que vai levar um pouco de tempo.

145
00:10:34,970 --> 00:10:38,060
Portanto, você não deseja que o usuário esteja esperando que

146
00:10:38,060 --> 00:10:43,805
a página inteira seja carregada antes que ele veja algo na janela do navegador.

147
00:10:43,805 --> 00:10:48,720
Então é por isso que normalmente carregamos as classes JavaScript

148
00:10:48,720 --> 00:10:55,325
para o final da nossa página html pouco antes do body tech.

149
00:10:55,325 --> 00:10:58,270
Depois de fazer essas alterações,

150
00:10:58,270 --> 00:11:00,065
vamos salvar o arquivo.

151
00:11:00,065 --> 00:11:04,420
Agora, a razão pela qual eu estou mostrando o

152
00:11:04,420 --> 00:11:09,385
arquivo index.html no meu editor e também o navegador ao lado dele é,

153
00:11:09,385 --> 00:11:13,630
no momento em que você salva as alterações que você fez no arquivo index.html,

154
00:11:13,630 --> 00:11:18,920
observe como a renderização do navegador desse arquivo

155
00:11:18,920 --> 00:11:26,525
imediatamente atualiza e veja o Bootstrap já em ação no a página.

156
00:11:26,525 --> 00:11:33,150
Neste momento, você verá que sua página está usando o Times New Roman para renderizar todo o conteúdo.

157
00:11:33,150 --> 00:11:36,130
No momento em que eu salvar a página da Web,

158
00:11:36,130 --> 00:11:42,670
você percebe que as fontes que estão sendo usadas em sua página da Web foram alteradas.

159
00:11:42,670 --> 00:11:48,425
Agora, sua página web está configurado para fazer uso das classes Bootstrap,

160
00:11:48,425 --> 00:11:53,850
e ele está usando a tipografia padrão Bootstraps para renderizar todo o conteúdo.

161
00:11:53,850 --> 00:12:01,360
O Bootstrap, por padrão, usa Helvetica Neue para a fonte.

162
00:12:01,360 --> 00:12:06,180
Você pode alterar a fonte padrão para bootstrap e assim por diante,

163
00:12:06,180 --> 00:12:09,905
mas isso estará além do escopo de nossa discussão agora.

164
00:12:09,905 --> 00:12:15,120
Então, uma vez que você configurar sua página index.html e salvá-la,

165
00:12:15,120 --> 00:12:20,710
você verá imediatamente o Bootstrap entrando em ação em nossa página da web.

166
00:12:20,710 --> 00:12:23,675
Então é assim que eu vou continuar ilustrando, à

167
00:12:23,675 --> 00:12:27,385
medida que adicionamos várias bootstraps, classes CSS

168
00:12:27,385 --> 00:12:30,435
e componentes à nossa página web,

169
00:12:30,435 --> 00:12:35,720
como a renderização dele em nosso navegador vai continuar mudando.

170
00:12:35,720 --> 00:12:44,860
Agora, obviamente, a renderização da página em nosso navegador ainda é terrível.

171
00:12:44,860 --> 00:12:49,230
É melhor do que a típica página de professores de ciência da computação,

172
00:12:49,230 --> 00:12:51,715
mas definitivamente não legível.

173
00:12:51,715 --> 00:12:58,320
Precisamos agora trazer em ação as várias classes CSS e

174
00:12:58,320 --> 00:12:59,910
os componentes JavaScript que

175
00:12:59,910 --> 00:13:06,960
nosso framework Bootstrap web UI fornece, a fim de projetar nossa página web.

176
00:13:06,960 --> 00:13:12,720
Então vamos fazer isso passo a passo à medida que passamos por este exercício.

177
00:13:12,720 --> 00:13:18,535
Este pode ser um momento conveniente para você fazer um commit git

178
00:13:18,535 --> 00:13:24,355
das alterações que você fez para que, no final deste exercício,

179
00:13:24,355 --> 00:13:30,365
seu estado da pasta do projeto será salvo em seu repositório git.

180
00:13:30,365 --> 00:13:36,610
Indo para minha pasta Confusion em outra guia da minha janela de terminal,

181
00:13:36,610 --> 00:13:38,990
se eu digitar git status,

182
00:13:38,990 --> 00:13:44,455
agora vejo que meu arquivo index.html e o pacote do arquivo JSON foram modificados.

183
00:13:44,455 --> 00:13:47,930
Então eu vou fazer um compromisso.

184
00:13:59,540 --> 00:14:04,635
Então, agora, meu status

185
00:14:04,635 --> 00:14:10,610
da pasta no final deste exercício foi comprometido com meu repositório git.

186
00:14:10,610 --> 00:14:13,920
Você pode sincronizar isso com seu repositório on-line para que

187
00:14:13,920 --> 00:14:18,390
o estado do seu projeto seja salvo neste momento.

188
00:14:18,390 --> 00:14:24,955
Com isso, completamos nosso primeiro exercício Bootstrap.

189
00:14:24,955 --> 00:14:33,210
Você já viu como podemos configurar o Bootstrap para ser usado em nosso projeto web.

190
00:14:33,210 --> 00:14:36,140
À medida que avançamos para os próximos exercícios,

191
00:14:36,140 --> 00:14:42,470
vamos empregar as aulas Bootstrap para projetar nossas páginas web.