1
00:00:03,730 --> 00:00:06,755
Nas palestras anteriores,

2
00:00:06,755 --> 00:00:12,055
aprendemos sobre design responsivo e o sistema de grade bootstrap.

3
00:00:12,055 --> 00:00:18,050
Vimos como a grade bootstrap nos permite projetar sites responsivos.

4
00:00:18,050 --> 00:00:21,890
É hora de avançarmos para o próximo exercício.

5
00:00:21,890 --> 00:00:27,755
Vamos começar a trabalhar com a página html índice que criamos em

6
00:00:27,755 --> 00:00:34,945
nosso exercício anterior e aplicar as classes de grade bootstrap para torná-la responsiva.

7
00:00:34,945 --> 00:00:40,760
Dando uma olhada rápida em nossa página web no navegador, vemos que

8
00:00:40,760 --> 00:00:46,415
ainda é terrível, embora as fontes tenham melhorado um pouco,

9
00:00:46,415 --> 00:00:50,645
e agora estamos usando as fontes padrão bootstraps.

10
00:00:50,645 --> 00:01:00,930
Vamos agora tentar aplicar as classes de grade bootstrap para index.html para melhorar seu layout.

11
00:01:00,930 --> 00:01:03,805
Indo para a página index.html,

12
00:01:03,805 --> 00:01:07,960
deixe-me chamar rapidamente sua atenção para esta linha específica na

13
00:01:07,960 --> 00:01:12,805
página index.html que já incluímos no exercício anterior.

14
00:01:12,805 --> 00:01:14,660
Eu tinha me referido a esta linha,

15
00:01:14,660 --> 00:01:17,065
então estávamos falando sobre o sistema de grade bootstrap.

16
00:01:17,065 --> 00:01:23,895
Então, aqui, vemos que nós especificamos as metatags com uma porta de visualização e o conteúdo,

17
00:01:23,895 --> 00:01:26,090
largura como largura do dispositivo,

18
00:01:26,090 --> 00:01:29,205
e escala inicial um e encolher para caber no.

19
00:01:29,205 --> 00:01:33,210
Portanto, esta meta tag nos permite tornar

20
00:01:33,210 --> 00:01:39,225
nossa página web responsiva, olhando para o caractere de porta de exibição.

21
00:01:39,225 --> 00:01:42,630
Avançando para o próximo passo.

22
00:01:42,630 --> 00:01:49,080
Nós vamos rolar para baixo para o corpo desta página index.html,

23
00:01:49,080 --> 00:01:54,570
e, em seguida, olhar para cima a primeira div que vem logo abaixo da tag cabeçalho lá,

24
00:01:54,570 --> 00:02:00,480
para este div você vai aplicar o recipiente de classe.

25
00:02:00,480 --> 00:02:05,550
Já aprendemos sobre a classe de contêiner na palestra anterior.

26
00:02:05,550 --> 00:02:09,125
Então, uma vez que aplicamos a classe container, em

27
00:02:09,125 --> 00:02:12,410
seguida, olhando para a nossa página web vemos

28
00:02:12,410 --> 00:02:16,620
que parte do conteúdo ali mesmo já se adaptou.

29
00:02:16,620 --> 00:02:23,080
Veja a diferença entre o conteúdo aqui em cima e o abaixo aqui.

30
00:02:23,080 --> 00:02:25,370
Agora este conteúdo abaixo aqui,

31
00:02:25,370 --> 00:02:30,960
está no rodapé da nossa página index.html e este conteúdo está no cabeçalho.

32
00:02:30,960 --> 00:02:36,890
Mas esse conteúdo no meio é o conteúdo real da nossa página web,

33
00:02:36,890 --> 00:02:40,785
que está dentro da div à qual aplicamos o contêiner.

34
00:02:40,785 --> 00:02:47,480
Então, aplicando a classe de contêiner você pode ver imediatamente que a largura da página dentro da

35
00:02:47,480 --> 00:02:50,700
qual nosso conteúdo é colocado para fora agora

36
00:02:50,700 --> 00:02:54,660
encolhida e, em seguida, você tem algum espaço extra restante em ambos os lados,

37
00:02:54,660 --> 00:02:58,935
então, com esta largura do contêiner sendo um contêiner de tamanho fixo,

38
00:02:58,935 --> 00:03:02,330
nosso conteúdo será corrigido para este largura particular

39
00:03:02,330 --> 00:03:07,425
na tela deixando margem suficiente em ambos os lados como espaço em branco.

40
00:03:07,425 --> 00:03:13,315
Vamos aplicar a mesma classe de contêiner para o cabeçalho e rodapé também

41
00:03:13,315 --> 00:03:17,355
e, em seguida, ver como o conteúdo muda.

42
00:03:17,355 --> 00:03:20,200
Voltando para nossa página web,

43
00:03:20,200 --> 00:03:24,940
o que eu vou fazer agora é para o conteúdo interno aqui,

44
00:03:24,940 --> 00:03:28,165
a div interna dentro do recipiente,

45
00:03:28,165 --> 00:03:34,110
eu vou aplicar a classe como a classe linha aqui,

46
00:03:34,110 --> 00:03:35,885
para este primeiro,

47
00:03:35,885 --> 00:03:38,125
e eu vou simplesmente copiar isso.

48
00:03:38,125 --> 00:03:44,675
Eu vou aplicar o mesmo para o segundo div aqui que está alinhado para o div,

49
00:03:44,675 --> 00:03:49,230
e também rolar para baixo e, em seguida, para o terceiro div aqui,

50
00:03:49,230 --> 00:03:51,375
Eu também estou aplicando a classe linha aqui.

51
00:03:51,375 --> 00:03:56,110
Então agora, o conteúdo dentro desta classe de contêiner mais externa,

52
00:03:56,110 --> 00:03:57,950
agora é dividido em três linhas,

53
00:03:57,950 --> 00:04:01,395
então o que está dentro aqui será uma linha,

54
00:04:01,395 --> 00:04:02,640
o que quer que esteja dentro aqui,

55
00:04:02,640 --> 00:04:06,150
será a segunda linha e a outra aqui será a terceira linha.

56
00:04:06,150 --> 00:04:10,380
Mais tarde, aplicaremos as classes de coluna a isso.

57
00:04:10,380 --> 00:04:17,695
Vamos agora passar para o cabeçalho no corpo do nosso index.html.

58
00:04:17,695 --> 00:04:23,970
E para o cabeçalho, vou aplicar uma classe chamada de jumbotron.

59
00:04:23,970 --> 00:04:28,265
O componente jumbotron permite que você

60
00:04:28,265 --> 00:04:33,805
defina o conteúdo dentro do jumbotron do resto da página.

61
00:04:33,805 --> 00:04:39,035
Vamos ver o resultado em um curto espaço de tempo quando estamos na página web resultante.

62
00:04:39,035 --> 00:04:42,215
Agora, para a div dentro deste cabeçalho,

63
00:04:42,215 --> 00:04:46,360
eu vou aplicar a classe como recipiente, de

64
00:04:46,360 --> 00:04:49,410
modo que o que está dentro do conteúdo

65
00:04:49,410 --> 00:04:52,945
será agora restringido pela largura do recipiente lá.

66
00:04:52,945 --> 00:04:57,670
Da mesma forma, movendo-se para baixo para

67
00:04:58,780 --> 00:05:01,650
o rodapé aqui, no rodapé também,

68
00:05:01,650 --> 00:05:04,720
a primeira div dentro do rodapé,

69
00:05:04,720 --> 00:05:09,360
Eu vou aplicar a classe como recipiente.

70
00:05:09,360 --> 00:05:13,055
E a div lá dentro,

71
00:05:13,055 --> 00:05:16,755
eu vou aplicar a classe como linha lá,

72
00:05:16,755 --> 00:05:19,735
para a div lá dentro.

73
00:05:19,735 --> 00:05:25,225
Então essa div nos levará até essa div particular aqui.

74
00:05:25,225 --> 00:05:29,105
E, em seguida, a próxima div também que é logo abaixo disso,

75
00:05:29,105 --> 00:05:31,820
Vou aplicar a classe como linha.

76
00:05:31,820 --> 00:05:35,380
Então agora meu rodapé contém duas linhas aqui,

77
00:05:35,380 --> 00:05:38,520
vamos estilizar o conteúdo usando coluna,

78
00:05:38,520 --> 00:05:40,110
classes em um curto espaço de tempo.

79
00:05:40,110 --> 00:05:42,365
Indo para o cabeçalho também,

80
00:05:42,365 --> 00:05:51,500
Vou aplicar a classe linha para o segundo div dentro do recipiente div aqui.

81
00:05:51,500 --> 00:05:54,920
Então esta div que corresponde eu tenho isso,

82
00:05:54,920 --> 00:05:58,605
será uma única linha no cabeçalho.

83
00:05:58,605 --> 00:06:02,400
Vamos dar uma olhada em nossa página web resultante.

84
00:06:02,400 --> 00:06:04,365
Indo para a nossa página web,

85
00:06:04,365 --> 00:06:09,300
agora você pode ver que o conteúdo do cabeçalho é agora separado

86
00:06:09,300 --> 00:06:14,935
do resto dentro desta caixa cinza no topo aqui.

87
00:06:14,935 --> 00:06:22,735
Mas o conteúdo em si agora está alinhado com o conteúdo abaixo aqui.

88
00:06:22,735 --> 00:06:25,685
Agora, este é o resultado do uso do contêiner.

89
00:06:25,685 --> 00:06:27,550
Movendo-se para o rodapé,

90
00:06:27,550 --> 00:06:32,635
agora você pode ver que o conteúdo do rodapé também agora alinhado dentro do contêiner.

91
00:06:32,635 --> 00:06:36,800
Mas a página ainda não parece tão grande,

92
00:06:36,800 --> 00:06:44,705
vamos agora aplicar as classes de coluna para as divs internas agora.

93
00:06:44,705 --> 00:06:48,665
Voltando para a página index.html,

94
00:06:48,665 --> 00:06:51,865
vamos agora começar a aplicar as classes de coluna.

95
00:06:51,865 --> 00:06:58,365
Então, indo para o cabeçalho, para a segunda div interna dentro do jumbotron aqui,

96
00:06:58,365 --> 00:07:06,230
deixe-me aplicar uma classe como coluna 12, coluna sm-6.

97
00:07:06,230 --> 00:07:09,960
Então, aqui o conteúdo

98
00:07:09,960 --> 00:07:15,525
nesta primeira div ocupará toda a linha para tamanhos de tela extra pequenos

99
00:07:15,525 --> 00:07:18,770
e, em seguida, ocupará metade da linha, então é por isso que a coluna

100
00:07:18,770 --> 00:07:24,235
sm-6 para tamanhos de tela pequenos a extra grandes.

101
00:07:24,235 --> 00:07:26,480
Agora, da mesma forma para a segunda div aqui,

102
00:07:26,480 --> 00:07:28,715
embora não contenha nenhum conteúdo lá,

103
00:07:28,715 --> 00:07:37,840
eu vou definir as classes de coluna aqui como coluna 12 e, em seguida, coluna sm.

104
00:07:37,840 --> 00:07:40,990
Então, observe que aqui especificando a coluna 12,

105
00:07:40,990 --> 00:07:45,270
estou explicitamente afirmando que, para tamanhos de tela extra pequenos, qualquer conteúdo que esteja

106
00:07:45,270 --> 00:07:49,860
dentro desta div será empilhado abaixo do conteúdo aqui.

107
00:07:49,860 --> 00:07:54,150
E, em seguida, para tamanhos de tela pequenos a extra grandes,

108
00:07:54,150 --> 00:07:59,270
esse conteúdo ocupará a quantidade restante de

109
00:07:59,270 --> 00:08:04,925
colunas na linha para tamanhos de tela pequenos a extra grandes.

110
00:08:04,925 --> 00:08:09,255
Então aqui, neste caso, uma vez que seis colunas são ocupadas por

111
00:08:09,255 --> 00:08:12,745
este conteúdo, isso irá obter as seis colunas restantes lá.

112
00:08:12,745 --> 00:08:18,030
Movendo para baixo para as linhas de

113
00:08:18,030 --> 00:08:20,110
conteúdo aqui, para o conteúdo aqui,

114
00:08:20,110 --> 00:08:22,860
então para este primeiro conteúdo,

115
00:08:22,860 --> 00:08:24,590
que é um rótulo aqui,

116
00:08:24,590 --> 00:08:29,240
eu vou aplicar as classes como coluna 12,

117
00:08:29,240 --> 00:08:34,985
coluna sm-4, coluna md-3.

118
00:08:34,985 --> 00:08:39,770
Então, afirmando que, para tamanhos de tela extra pequenos,

119
00:08:39,770 --> 00:08:42,650
isso ocupará toda a linha, para pequeno,

120
00:08:42,650 --> 00:08:44,160
ocupará colunas cheias

121
00:08:44,160 --> 00:08:46,585
e, em seguida, para médio a extra grande,

122
00:08:46,585 --> 00:08:50,395
ocupará três colunas na linha.

123
00:08:50,395 --> 00:08:56,810
Agora, então a parte restante será ocupada pelo conteúdo abaixo aqui, de

124
00:08:56,810 --> 00:09:00,575
modo que, para isso, eu vou aplicar as classes como col,

125
00:09:00,575 --> 00:09:05,715
indicando que isso será empilhado abaixo

126
00:09:05,715 --> 00:09:11,025
do conteúdo aqui nos tamanhos de tela extra pequena,

127
00:09:11,025 --> 00:09:12,690
e então eu vou dizer coluna sm,

128
00:09:12,690 --> 00:09:16,940
então o que significa que isso vai ocupar o restantes oito colunas aqui,

129
00:09:16,940 --> 00:09:19,300
porque quatro colunas são ocupadas por esta,

130
00:09:19,300 --> 00:09:22,360
e então vamos dizer coluna md,

131
00:09:22,360 --> 00:09:24,320
então o que significa que isso ocupará

132
00:09:24,320 --> 00:09:27,300
as restantes nove colunas porque três colunas são

133
00:09:27,300 --> 00:09:33,230
ocupadas para tamanhos de tela médio a extra grande pelo conteúdo acima aqui.

134
00:09:33,230 --> 00:09:37,810
Agora que eu defini para a primeira linha de conteúdo,

135
00:09:37,810 --> 00:09:43,070
eu vou tomar o mesmo aplicativo de classe de coluna aqui,

136
00:09:43,070 --> 00:09:49,415
e, em seguida, aplicar isso para a segunda linha aqui,

137
00:09:49,415 --> 00:09:52,345
e também a terceira linha de conteúdo aqui.

138
00:09:52,345 --> 00:09:57,240
Da mesma forma, eu vou copiar este e, em seguida, aplicar o mesmo para

139
00:09:57,240 --> 00:10:04,690
as divs conteúdo abaixo aqui.

140
00:10:04,690 --> 00:10:11,950
Então agora nós configuramos tanto o cabeçalho e as colunas de conteúdo lá.

141
00:10:11,950 --> 00:10:14,690
Vamos agora descer para o rodapé.

142
00:10:14,690 --> 00:10:21,260
No rodapé, você vai notar que esta div contém três divs internas aqui,

143
00:10:21,260 --> 00:10:23,720
então para cada uma dessas três divs internas aqui,

144
00:10:23,720 --> 00:10:26,570
eu vou aplicar as classes de coluna correspondentes.

145
00:10:26,570 --> 00:10:27,680
Então, para o primeiro,

146
00:10:27,680 --> 00:10:35,280
que contém links para as várias páginas que farão parte deste site,

147
00:10:35,280 --> 00:10:38,395
eu vou aplicar uma classe de coluna,

148
00:10:38,395 --> 00:10:46,045
como coluna quatro, coluna sm-2 aqui.

149
00:10:46,045 --> 00:10:50,840
Então, o que significa que para tamanhos de tela extra pequenos,

150
00:10:50,840 --> 00:10:55,320
isso ocupará quatro colunas e para pequeno a extra grande,

151
00:10:55,320 --> 00:10:58,660
ele ocupará apenas duas colunas aqui.

152
00:10:59,040 --> 00:11:01,790
Então, para o segundo,

153
00:11:01,790 --> 00:11:08,425
a segunda div lá vou aplicar as classes como coluna sete.

154
00:11:08,425 --> 00:11:12,050
Então note que eu tenho quatro aqui e depois sete aqui, de

155
00:11:12,050 --> 00:11:14,755
modo que o total ocupa 11 colunas.

156
00:11:14,755 --> 00:11:16,430
Deixei uma coluna vazia.

157
00:11:16,430 --> 00:11:21,520
Voltarei mais tarde para aplicar uma compensação para cuidar da coluna extra.

158
00:11:21,520 --> 00:11:23,400
Então esta é a coluna sete,

159
00:11:23,400 --> 00:11:31,345
e então col-sm-5 para a segunda.

160
00:11:31,345 --> 00:11:33,630
Então este é dois mais cinco, sete.

161
00:11:33,630 --> 00:11:36,390
Então eu ainda tenho cinco colunas sobrando,

162
00:11:36,390 --> 00:11:40,685
que eu posso usar para a terceira div aqui.

163
00:11:40,685 --> 00:11:44,610
Agora, para tamanhos de tela extra pequenos,

164
00:11:44,610 --> 00:11:47,700
esses dois conteúdos serão posicionados lado a lado,

165
00:11:47,700 --> 00:11:52,080
e então esta div que contém links para

166
00:11:52,080 --> 00:11:58,585
um site de mídia social estará em uma linha separada empilhada abaixo.

167
00:11:58,585 --> 00:12:04,390
Mas para tamanhos de tela pequenos a extra grandes,

168
00:12:04,390 --> 00:12:07,680
o primeiro ocupará duas colunas,

169
00:12:07,680 --> 00:12:10,240
o segundo ocupará cinco e o restante será

170
00:12:10,240 --> 00:12:13,545
ocupado por links de mídia social aqui.

171
00:12:13,545 --> 00:12:15,230
Então, para o terceiro,

172
00:12:15,230 --> 00:12:18,650
eu vou aplicar a classe

173
00:12:18,650 --> 00:12:26,515
como col-12 col-sm-4 aqui.

174
00:12:26,515 --> 00:12:32,625
Então col-12 col-sm-4, o que significa que isso ocupará

175
00:12:32,625 --> 00:12:37,090
um conjunto separado de 12 colunas

176
00:12:37,090 --> 00:12:42,310
empilhadas abaixo do conteúdo anterior para tamanhos de tela extra pequeno,

177
00:12:42,310 --> 00:12:45,040
mas para pequeno a extra grande ele ocupará quatro colunas.

178
00:12:45,040 --> 00:12:46,815
Então aqui estamos quatro mais cinco,

179
00:12:46,815 --> 00:12:48,430
nove mais dois 11.

180
00:12:48,430 --> 00:12:52,635
Assim, uma coluna ainda é sobra para pequeno a extra grande.

181
00:12:52,635 --> 00:12:57,510
Então é assim que eu vou aplicar a coluna mais próxima a isso.

182
00:12:57,510 --> 00:13:03,250
Agora, nós ainda temos o abaixo aqui onde nós contemos os direitos autorais para isso.

183
00:13:03,250 --> 00:13:08,745
Eu vou aplicar a classe como coluna automática, o

184
00:13:08,745 --> 00:13:12,050
que significa que este conteúdo irá ocupar

185
00:13:12,050 --> 00:13:15,515
apenas colunas suficientes como é exigido pelo conteúdo lá.

186
00:13:15,515 --> 00:13:20,405
Mais tarde, você verá que eu vou posicionar esse conteúdo no centro

187
00:13:20,405 --> 00:13:26,385
da tela usando ainda outra classe CSS bootstrap.

188
00:13:26,385 --> 00:13:29,035
Chegaremos a isso no próximo exercício.

189
00:13:29,035 --> 00:13:33,405
Então, com isso temos aplicado várias classes de coluna para o cabeçalho,

190
00:13:33,405 --> 00:13:35,880
o conteúdo e o rodapé.

191
00:13:35,880 --> 00:13:39,280
Este é um bom momento para salvarmos as alterações e, em seguida, ir e dar

192
00:13:39,280 --> 00:13:43,475
uma olhada na página indexada ou HTML atualizada.

193
00:13:43,475 --> 00:13:46,690
Olhando para a nossa página index.html,

194
00:13:46,690 --> 00:13:51,315
você notará como no cabeçalho que é o Jumbotron,

195
00:13:51,315 --> 00:13:55,145
o conteúdo agora está ocupando apenas metade da tela lá.

196
00:13:55,145 --> 00:14:00,210
A outra metade da tela desta linha em particular agora é deixada vazia.

197
00:14:00,210 --> 00:14:03,180
Descendo para as linhas de conteúdo,

198
00:14:03,180 --> 00:14:07,685
você vê que o rótulo no lado esquerdo ocupando

199
00:14:07,685 --> 00:14:14,280
três ou quatro colunas dependendo do tamanho da tela que estavam usando,

200
00:14:14,280 --> 00:14:18,250
e o restante sendo ocupado pelo resto do conteúdo.

201
00:14:18,250 --> 00:14:19,780
Então aqui temos uma linha,

202
00:14:19,780 --> 00:14:21,770
a segunda linha e a terceira linha.

203
00:14:21,770 --> 00:14:26,330
E então o rodapé aqui você pode ver que os links estão no lado esquerdo,

204
00:14:26,330 --> 00:14:28,065
os outros no meio,

205
00:14:28,065 --> 00:14:31,150
e então os links de mídia social no lado direito.

206
00:14:31,150 --> 00:14:35,460
Então isso é para uma tela de tamanho médio.

207
00:14:35,460 --> 00:14:42,765
Agora, se você quiser olhar para a mesma exibição para um tamanho de tela extra pequeno ou pequeno,

208
00:14:42,765 --> 00:14:45,045
se você estiver usando o Chrome,

209
00:14:45,045 --> 00:14:47,960
então o Chrome tem as ferramentas de desenvolvedor que você pode

210
00:14:47,960 --> 00:14:51,010
ativar clicando nas ferramentas de desenvolvedor de exibição,

211
00:14:51,010 --> 00:14:53,105
e quando as ferramentas de desenvolvedor aparecerem,

212
00:14:53,105 --> 00:14:56,890
você notará, deixe-me reduzir o tamanho Aqui.

213
00:14:56,890 --> 00:15:00,930
Você vai notar este pequeno para janelas lá.

214
00:15:00,930 --> 00:15:06,500
Então, clicando em que irá ativar a exibição responsiva para esses sites lá.

215
00:15:06,500 --> 00:15:15,680
Então você pode ver que aqui a visão desta mesma página web em um pixel para site,

216
00:15:15,680 --> 00:15:19,300
que é 411 por 731 no modo retrato,

217
00:15:19,300 --> 00:15:22,805
então que é correspondente a um tamanho de tela extra pequeno, para que

218
00:15:22,805 --> 00:15:25,300
você possa ver como o conteúdo é colocado para fora.

219
00:15:25,300 --> 00:15:28,145
Então você pode ver o conteúdo do Jumbotron lá

220
00:15:28,145 --> 00:15:31,745
e, em seguida, a parte restante do conteúdo abaixo aqui.

221
00:15:31,745 --> 00:15:34,585
E depois até ao rodapé.

222
00:15:34,585 --> 00:15:40,500
Assim, no rodapé você pode ver como os links e o anúncio tem colocado para fora lado a lado.

223
00:15:40,500 --> 00:15:45,880
Agora reduzindo o tamanho da tela para que possamos ver como esse rodapé é colocado aqui.

224
00:15:45,880 --> 00:15:48,735
Então, a parte restante, você tem os links no lado esquerdo,

225
00:15:48,735 --> 00:15:51,470
você tem o endereço no lado direito,

226
00:15:51,470 --> 00:15:56,515
e, em seguida, os links de mídia social abaixo em uma linha separada aqui,

227
00:15:56,515 --> 00:15:59,775
e, em seguida, os direitos autorais na parte inferior lá.

228
00:15:59,775 --> 00:16:04,935
Então esta é a visão interessante que vemos para tamanhos de tela extra pequenos.

229
00:16:04,935 --> 00:16:07,450
Voltando ao nosso código aqui,

230
00:16:07,450 --> 00:16:11,710
vou agora aplicar a ordem e classes offset para

231
00:16:11,710 --> 00:16:17,255
este conteúdo, a fim de exibir o conteúdo de uma maneira ligeiramente diferente.

232
00:16:17,255 --> 00:16:21,850
Então, indo para a linha de conteúdo aqui,

233
00:16:21,850 --> 00:16:27,820
para as duas divs aqui que contêm o conteúdo,

234
00:16:27,820 --> 00:16:32,020
eu vou aplicar as classes como

235
00:16:32,020 --> 00:16:40,150
order-sm-last para a primeira linha aqui.

236
00:16:40,150 --> 00:16:50,120
E então para aquele aqui embaixo eu vou aplicar ordem sm primeiro para a linha aqui embaixo.

237
00:16:50,120 --> 00:16:53,300
Então, o que significa que quando este conteúdo é exibido,

238
00:16:53,300 --> 00:16:56,090
este conteúdo será puxado para o lado esquerdo da tela e, em seguida,

239
00:16:56,090 --> 00:16:58,880
esta coluna será empurrada para o lado direito da tela.

240
00:16:58,880 --> 00:17:02,400
Então este será encomendado para o lado direito e este será encomendado para o lado esquerdo.

241
00:17:02,400 --> 00:17:08,075
Como expliquei sobre as cláusulas de ordem na palestra anterior.

242
00:17:08,075 --> 00:17:09,880
Da mesma forma a partir da segunda linha,

243
00:17:09,880 --> 00:17:13,330
eu vou deixá-lo como tal, mas a partir da terceira linha eu vou aplicar

244
00:17:13,330 --> 00:17:17,240
o mesmo conjunto de classes de ordem.

245
00:17:17,240 --> 00:17:20,290
Então eu vou para a terceira linha aqui,

246
00:17:20,290 --> 00:17:25,425
e então aplicar o order-sm-last para este,

247
00:17:25,425 --> 00:17:30,850
e então eu vou aplicar o order-sm-first para este.

248
00:17:31,460 --> 00:17:36,450
E assim este novamente será reordenado de

249
00:17:36,450 --> 00:17:38,300
tal forma que este conteúdo apareça para

250
00:17:38,300 --> 00:17:40,870
o lado esquerdo e este conteúdo aparecerá para o lado direito.

251
00:17:40,870 --> 00:17:46,640
Esta é apenas uma maneira de posicionar o conteúdo de uma maneira um pouco mais interessante.

252
00:17:46,640 --> 00:17:50,210
Agora movendo-se para o rodapé aqui,

253
00:17:50,210 --> 00:17:54,690
agora eu vou aplicar uma classe offset aqui.

254
00:17:54,690 --> 00:18:00,440
Então note que eu mencionei que essas duas colunas ocuparão quatro mais sete, 11.

255
00:18:00,440 --> 00:18:02,130
Então uma coluna é sobra.

256
00:18:02,130 --> 00:18:07,295
Então eu vou aplicar uma classe offset-1 para este.

257
00:18:07,295 --> 00:18:12,320
Então o que significa que este conteúdo nesta div será empurrado para a direita por uma coluna aqui.

258
00:18:12,320 --> 00:18:14,710
Da mesma forma, desde que eu disse offset um,

259
00:18:14,710 --> 00:18:23,145
isso será aplicado a extra pequeno todo o caminho até os tamanhos de tela extra grande.

260
00:18:23,145 --> 00:18:28,235
E assim que é o uso da classe offset.

261
00:18:28,235 --> 00:18:30,060
Então, agora que fizemos as alterações,

262
00:18:30,060 --> 00:18:36,285
vamos salvar as alterações e, em seguida, ir e dar uma olhada em nossa página web no navegador.

263
00:18:36,285 --> 00:18:38,430
Voltando para esse navegador,

264
00:18:38,430 --> 00:18:43,715
agora você vê como o cabeçalho é como antes,

265
00:18:43,715 --> 00:18:46,850
mas na primeira linha de conteúdo,

266
00:18:46,850 --> 00:18:49,090
você vê que esse conteúdo foi empurrado para

267
00:18:49,090 --> 00:18:51,925
o lado esquerdo e o rótulo para o lado direito.

268
00:18:51,925 --> 00:18:56,090
A segunda linha é diferente tem sido mantida como antes.

269
00:18:56,090 --> 00:18:58,330
Mas para o terceiro você verá que isso foi

270
00:18:58,330 --> 00:19:00,780
empurrado para a direita e isso foi empurrado para a esquerda.

271
00:19:00,780 --> 00:19:06,900
Então esse é o uso da ordem-sm-last e order-sm-first class está lá.

272
00:19:06,900 --> 00:19:08,530
Agora indo para o rodapé,

273
00:19:08,530 --> 00:19:18,195
você vê agora que o conteúdo na primeira div aqui foi empurrado para a direita por uma coluna,.

274
00:19:18,195 --> 00:19:21,560
Então você pode ver que há uma coluna de espaços em branco aqui,

275
00:19:21,560 --> 00:19:27,790
e isso não é empurrado para a direita e os restantes foram formatados de acordo.

276
00:19:27,790 --> 00:19:32,235
Então, com isso, concluímos

277
00:19:32,235 --> 00:19:37,790
as alterações em nossa página index.html ou página adicional para este exercício específico.

278
00:19:37,790 --> 00:19:41,665
Com isso, completamos este exercício particular.

279
00:19:41,665 --> 00:19:46,235
Neste exercício, analisamos o uso das

280
00:19:46,235 --> 00:19:53,800
classes de contêiner, linha e coluna, a fim de projetar nossa página web um pouco mais agradável.

281
00:19:53,800 --> 00:19:57,705
Na segunda parte do exercício que se seguirá,

282
00:19:57,705 --> 00:20:04,680
vamos adicionar mais para tentar melhorar a forma como estas páginas web são renderizadas.

283
00:20:04,680 --> 00:20:08,375
Ainda não é para minha satisfação.

284
00:20:08,375 --> 00:20:12,920
Obviamente, ainda há espaço para melhorias.

285
00:20:12,920 --> 00:20:16,290
Este pode ser um bom momento para você fazer um comentário git com

286
00:20:16,290 --> 00:20:21,470
a mensagem Bootstrap Grid Part One.