1
00:00:03,550 --> 00:00:05,885
Na palestra anterior,

2
00:00:05,885 --> 00:00:08,860
aprendemos sobre design responsivo.

3
00:00:08,860 --> 00:00:12,300
Também mencionamos brevemente que o sistema de grade Bootstrap é

4
00:00:12,300 --> 00:00:16,505
projetado para suportar sites responsivos.

5
00:00:16,505 --> 00:00:20,275
Como a grade Bootstraps suporta isso?

6
00:00:20,275 --> 00:00:23,765
E o que exatamente a grade Bootstrap envolve,

7
00:00:23,765 --> 00:00:27,710
que nos permite projetar sites responsivos?

8
00:00:27,710 --> 00:00:32,535
Vamos falar um pouco mais de detalhes sobre o sistema de grade Bootstrap

9
00:00:32,535 --> 00:00:36,700
e como ele suporta a capacidade de resposta em seguida.

10
00:00:36,700 --> 00:00:45,450
Vimos o uso da meta tag viewport na lição anterior,

11
00:00:45,450 --> 00:00:53,590
quando fizemos o exercício inicial sobre a configuração do Bootstrap em nossa página index.html.

12
00:00:53,590 --> 00:00:58,790
Referi-me, então, brevemente, a esta linha específica do código.

13
00:00:58,790 --> 00:01:05,015
Vamos tentar entender por que usamos isso em nossa página index.html.

14
00:01:05,015 --> 00:01:08,090
O que estamos especificando aqui é que,

15
00:01:08,090 --> 00:01:14,555
quando nossa página da web está sendo processada pelo navegador em um determinado dispositivo, então,

16
00:01:14,555 --> 00:01:20,970
sua renderização no navegador levará em consideração o tamanho da tela e

17
00:01:20,970 --> 00:01:28,080
adaptará automaticamente a renderização da página à largura da tela dos dispositivos.

18
00:01:28,080 --> 00:01:32,090
Dessa forma, então temos classes responsivas,

19
00:01:32,090 --> 00:01:35,740
classes CSS embutidas em nossa estrutura de interface do usuário, em

20
00:01:35,740 --> 00:01:39,030
seguida, que irá garantir que a nossa página web é

21
00:01:39,030 --> 00:01:42,855
corretamente processado para esse tamanho de tela particular.

22
00:01:42,855 --> 00:01:46,930
É aqui que o sistema de grade Bootstrap vem em nosso resgate e

23
00:01:46,930 --> 00:01:51,000
nos permite projetar sites responsivos.

24
00:01:51,000 --> 00:01:53,480
Então, novamente, enfatizando este ponto,

25
00:01:53,480 --> 00:01:57,100
grade Bootstrap é projetado para ser responsivo.

26
00:01:57,100 --> 00:02:01,525
Você já viu o que isso significa na palestra anterior,

27
00:02:01,525 --> 00:02:07,845
e móvel primeiro, que já discutimos na palestra anterior e depois fluido,

28
00:02:07,845 --> 00:02:11,055
adaptando-se automaticamente à largura da tela.

29
00:02:11,055 --> 00:02:16,220
A grade Bootstrap aproveita o layout de flexbox CSS.

30
00:02:16,220 --> 00:02:19,860
O layout CSS flexbox, que está sendo suportado

31
00:02:19,860 --> 00:02:23,955
pelas versões mais recentes dos vários navegadores,

32
00:02:23,955 --> 00:02:30,070
permite opções de layout muito mais simples e flexíveis em CSS.

33
00:02:30,070 --> 00:02:31,980
Agora, a discussão real de

34
00:02:31,980 --> 00:02:36,800
como o layout CSS flexbox funciona está além do escopo deste curso,

35
00:02:36,800 --> 00:02:41,040
vamos nos restringir a como CSS flexbox está sendo

36
00:02:41,040 --> 00:02:45,565
aproveitado pelo Bootstrap para seu sistema de grade.

37
00:02:45,565 --> 00:02:54,710
Anteriormente Bootstrap tinha seu próprio sistema de grade que era anterior ao layout CSS flexbox,

38
00:02:54,710 --> 00:02:58,840
mas a versão mais recente do Bootstrap

39
00:02:58,840 --> 00:03:06,650
fez o layout CSS flexbox como o padrão para a grade Bootstrap.

40
00:03:06,650 --> 00:03:10,375
Este layout flexbox pode facilmente lidar com

41
00:03:10,375 --> 00:03:17,390
conteúdo dinâmico e pode adaptar os contêineres ao conteúdo dinâmico,

42
00:03:17,390 --> 00:03:20,780
e também pode facilmente se adaptar ao tamanho desconhecido

43
00:03:20,780 --> 00:03:24,890
do conteúdo real fechado dentro dos contêineres.

44
00:03:24,890 --> 00:03:30,320
O layout flexbox também suporta layout independente de direção.

45
00:03:30,320 --> 00:03:37,084
O que o layout flexbox traz para as grades Bootstrap é a capacidade de

46
00:03:37,084 --> 00:03:44,005
fazer um alinhamento vertical fácil do conteúdo dentro de um elemento pai.

47
00:03:44,005 --> 00:03:48,595
Veremos o uso disso no exercício que se segue.

48
00:03:48,595 --> 00:03:52,625
Além disso, ele permite fácil reordenação do conteúdo

49
00:03:52,625 --> 00:03:58,170
em diferentes dispositivos e resoluções de tela com a ajuda de consultas de mídia. Mais uma

50
00:03:58,170 --> 00:04:03,050
vez, veremos um pouco disso no exercício sobre como o Bootstrap

51
00:04:03,050 --> 00:04:08,645
aproveita isso para apoiar maneiras interessantes de colocar conteúdo para fora.

52
00:04:08,645 --> 00:04:11,670
Além disso, esse conteúdo em si,

53
00:04:11,670 --> 00:04:19,275
os contêineres de conteúdo também podem ser projetados para ser colunas de altura igual para que

54
00:04:19,275 --> 00:04:25,245
o contêiner de conteúdo com

55
00:04:25,245 --> 00:04:32,915
a maior altura determine a altura de todos os contêineres restantes que estão dispostos na mesma linha.

56
00:04:32,915 --> 00:04:39,375
Vamos agora falar um pouco mais de detalhes sobre a grade Bootstrap e como ela realmente funciona.

57
00:04:39,375 --> 00:04:41,400
A forma como a grade Bootstrap funciona,

58
00:04:41,400 --> 00:04:48,765
é aplicando um contêiner mais à camada mais externa.

59
00:04:48,765 --> 00:04:51,815
Podemos usar uma div para

60
00:04:51,815 --> 00:04:57,075
definir o elemento para o qual aplicamos a classe recipiente em geral.

61
00:04:57,075 --> 00:05:03,855
O recipiente é a unidade mais externa dentro da qual o conteúdo real é colocado para fora.

62
00:05:03,855 --> 00:05:10,220
Bootstrap suporta tanto a classe contêiner que é um layout de largura fixa,

63
00:05:10,220 --> 00:05:16,010
o que significa que o próprio conteúdo é restrito a uma largura fixa na tela.

64
00:05:16,010 --> 00:05:22,420
Esta classe de contêiner permite que essa largura fixa se adapte automaticamente

65
00:05:22,420 --> 00:05:25,920
ao tamanho da tela usando consultas de mídia para que

66
00:05:25,920 --> 00:05:29,695
é onde o design responsivo entra em nosso resgate.

67
00:05:29,695 --> 00:05:36,340
Mais tarde, veremos como este contêiner se ajustará a diferentes tamanhos de tela.

68
00:05:36,340 --> 00:05:39,490
Agora, também temos a flexibilidade de usar em

69
00:05:39,490 --> 00:05:42,684
outro fluido de contêiner clássico que permite que

70
00:05:42,684 --> 00:05:49,200
o recipiente se adapte automaticamente ao tamanho da tela.

71
00:05:49,200 --> 00:05:50,855
Mas o recipiente de largura fixa,

72
00:05:50,855 --> 00:05:56,270
corrige o tamanho da largura de layout real.

73
00:05:56,270 --> 00:06:01,370
Dentro do recipiente, o conteúdo será colocado para fora na forma de linhas,

74
00:06:01,370 --> 00:06:04,770
então normalmente o que nós faria é dentro

75
00:06:04,770 --> 00:06:08,360
e fora de div para o qual aplicamos a classe container,

76
00:06:08,360 --> 00:06:12,440
nós vamos incluir um div interno para o qual vamos aplicar a classe linha.

77
00:06:12,440 --> 00:06:17,550
Assim, o conteúdo em si será dividido verticalmente em várias linhas.

78
00:06:17,550 --> 00:06:21,000
E uma vez que isso é dividido em linhas, dentro de cada linha,

79
00:06:21,000 --> 00:06:25,995
você pode então layout do conteúdo usando colunas.

80
00:06:25,995 --> 00:06:28,810
Assim, cada linha em Bootstrap,

81
00:06:28,810 --> 00:06:34,565
será dividido em 12 colunas de tamanho igual.

82
00:06:34,565 --> 00:06:43,820
Agora, você pode projetar seu conteúdo para ocupar qualquer número dessas 12 colunas.

83
00:06:43,820 --> 00:06:48,900
Assim, e o fato de que o próprio conteúdo se adapta à

84
00:06:48,900 --> 00:06:51,310
largura da tela e a própria linha que está sendo

85
00:06:51,310 --> 00:06:54,710
fechada dentro do recipiente se adaptará automaticamente à largura

86
00:06:54,710 --> 00:06:58,120
da tela, e também às colunas,

87
00:06:58,120 --> 00:07:01,320
as colunas 12 serão determinadas.

88
00:07:01,320 --> 00:07:05,010
Suas larguras serão determinadas pela linha por si só.

89
00:07:05,010 --> 00:07:08,520
Então, o que significa que, para tamanhos de tela diferentes,

90
00:07:08,520 --> 00:07:12,470
qualquer que seja o conteúdo que você layout, todas essas 12 colunas

91
00:07:12,470 --> 00:07:18,220
se ajustarão automaticamente à largura permitida para o conteúdo.

92
00:07:18,220 --> 00:07:21,990
Então, é assim que a capacidade de resposta é

93
00:07:21,990 --> 00:07:27,370
incorporada na forma de grade Bootstrap de colocar para fora o conteúdo.

94
00:07:27,370 --> 00:07:30,285
Então, como exatamente fazemos o layout do conteúdo?

95
00:07:30,285 --> 00:07:33,845
Falaremos sobre isso nos próximos slides.

96
00:07:33,845 --> 00:07:36,315
A grade Bootstrap em si,

97
00:07:36,315 --> 00:07:45,160
disponibiliza-nos cinco classes para especificar tamanhos de tela diferentes por padrão.

98
00:07:45,160 --> 00:07:49,870
Há uma classe padrão que visa todos os tamanhos de tela,

99
00:07:49,870 --> 00:07:53,210
começando de extra pequeno a extra grande.

100
00:07:53,210 --> 00:07:59,205
Assim, toda a gama de larguras de tela em termos Bootstrap,

101
00:07:59,205 --> 00:08:02,884
é dividida em

102
00:08:02,884 --> 00:08:07,405
tamanhos de tela extra pequeno, pequeno, médio, grande e extra grande.

103
00:08:07,405 --> 00:08:11,180
Em seguida, veja como essas diferentes classes

104
00:08:11,180 --> 00:08:16,350
de tamanhos de tela são determinadas em detalhes em um dos slides posteriores.

105
00:08:16,350 --> 00:08:18,540
Então, dentro do seu código,

106
00:08:18,540 --> 00:08:22,830
você identificará a especificação de layout

107
00:08:22,830 --> 00:08:29,060
especificando sm para o tamanho da tela pequena,

108
00:08:29,060 --> 00:08:32,195
md para médio, lg para grande

109
00:08:32,195 --> 00:08:35,905
e xl para tamanhos de tela extra grande.

110
00:08:35,905 --> 00:08:37,400
Então, quando você faz o layout,

111
00:08:37,400 --> 00:08:40,345
como vimos no slide anterior,

112
00:08:40,345 --> 00:08:45,405
cada linha em um sistema de grade Bootstrap é dividida em 12 colunas.

113
00:08:45,405 --> 00:08:50,905
Agora, vamos layout conteúdo usando o que é chamado como as classes de coluna.

114
00:08:50,905 --> 00:08:52,450
Para as classes de coluna,

115
00:08:52,450 --> 00:08:59,162
podemos especificar como o layout é feito para diferentes larguras de tela.

116
00:08:59,162 --> 00:09:04,735
Veja os detalhes disso nos slides subsequentes mais tarde.

117
00:09:04,735 --> 00:09:11,020
Mas deixe-me chamar rapidamente sua atenção para como especificamos os tamanhos das colunas.

118
00:09:11,020 --> 00:09:13,655
Eles podem especificar os tamanhos das colunas como col,

119
00:09:13,655 --> 00:09:19,485
que é uma das classes que eles vão dizer col-sm para

120
00:09:19,485 --> 00:09:25,360
pequeno e col-md para médio e grande e extra grande e assim por diante.

121
00:09:25,360 --> 00:09:29,810
Agora, essas classes de coluna são usadas para especificar

122
00:09:29,810 --> 00:09:38,260
exatamente quantas colunas em uma linha cada pedaço de conteúdo ocupará.

123
00:09:38,260 --> 00:09:40,015
Como é que isto funciona?

124
00:09:40,015 --> 00:09:42,215
Veremos isso no próximo slide.

125
00:09:42,215 --> 00:09:45,565
Então, voltando ao nosso Bootstrap Grid,

126
00:09:45,565 --> 00:09:50,345
suponha que temos um pedaço de conteúdo e queremos estabelecer a paz do conteúdo.

127
00:09:50,345 --> 00:09:54,915
Podemos especificar que o conteúdo é fechado dentro de outra div,

128
00:09:54,915 --> 00:09:57,815
ao qual aplicamos classe coluna,

129
00:09:57,815 --> 00:10:00,390
como por exemplo, col-sm-5.

130
00:10:00,390 --> 00:10:08,560
Então, nesse caso, o que estamos especificando é que, para tamanhos

131
00:10:08,560 --> 00:10:15,890
de tela pequenos a extra grandes, esse conteúdo ocupará cinco colunas dessas 12 colunas.

132
00:10:15,890 --> 00:10:17,505
Agora, você vai me perguntar imediatamente, e

133
00:10:17,505 --> 00:10:19,835
sobre o smock extra?

134
00:10:19,835 --> 00:10:23,465
Se não for explicitamente especificado para o lockette inteligente extra

135
00:10:23,465 --> 00:10:27,120
por toda a amplitude das 12 colunas,

136
00:10:27,120 --> 00:10:31,575
eles podem especificar explicitamente a partir de

137
00:10:31,575 --> 00:10:38,135
qual intervalo o layout da coluna ocupará quantas colunas.

138
00:10:38,135 --> 00:10:39,890
Então, neste caso particular,

139
00:10:39,890 --> 00:10:42,470
quando eu especificar que eu só chamá-los de sm-5,

140
00:10:42,470 --> 00:10:48,295
o que eu quero dizer é que este conteúdo particular que é fechado dentro dessas div,

141
00:10:48,295 --> 00:10:52,375
ocupará cinco colunas para todos os tamanhos de tela,

142
00:10:52,375 --> 00:10:56,595
de pequeno todo o caminho para extra grande.

143
00:10:56,595 --> 00:11:00,595
Agora, vemos agora que fora das 12 colunas,

144
00:11:00,595 --> 00:11:02,515
já ocupamos cinco colunas.

145
00:11:02,515 --> 00:11:05,070
Ainda restam sete colunas.

146
00:11:05,070 --> 00:11:09,925
Eu poderia pegar outro pedaço de conteúdo e, em seguida, posicioná-lo à direita deste,

147
00:11:09,925 --> 00:11:14,085
defendendo outro div e, em seguida, aplicando a coluna sm-7.

148
00:11:14,085 --> 00:11:15,855
Agora, neste caso,

149
00:11:15,855 --> 00:11:18,065
você vê que 5 mais 7 é igual a 12.

150
00:11:18,065 --> 00:11:22,900
Então, esses dois pedaços de conteúdo que estão fechados nas duas divs,

151
00:11:22,900 --> 00:11:25,530
agora serão posicionados lado a lado,

152
00:11:25,530 --> 00:11:30,070
e a soma total deles está ocupando toda a largura da coluna 12.

153
00:11:30,070 --> 00:11:35,765
Então, é assim que podemos especificar e o trabalho com as 12 colunas

154
00:11:35,765 --> 00:11:42,630
na definição do layout da camada atual.

155
00:11:42,630 --> 00:11:46,960
Com o uso do layout de caixa flexível CSS, o

156
00:11:46,960 --> 00:11:51,660
Bootstrap também suporta o que é chamado de colunas de layout automático.

157
00:11:51,660 --> 00:11:52,905
Então, neste caso,

158
00:11:52,905 --> 00:11:55,380
eu posso simplesmente especificar a

159
00:11:55,380 --> 00:12:00,060
coluna sm sem especificar quantas colunas é suposto ocupar.

160
00:12:00,060 --> 00:12:07,570
Mas no caso de eu especificar três Doobs largura coluna sm no meu

161
00:12:07,570 --> 00:12:13,575
cânhamo 5, então a grade bootstrap irá automaticamente posicionar esses conteúdos dentro dessas divs

162
00:12:13,575 --> 00:12:14,905
, lado a lado,

163
00:12:14,905 --> 00:12:18,875
de modo que cada um deles recebe um terço da largura total.

164
00:12:18,875 --> 00:12:22,220
Então, uma vez que temos 12 colunas aqui,

165
00:12:22,220 --> 00:12:26,045
cada um desses três terá quatro colunas cada.

166
00:12:26,045 --> 00:12:32,525
E isso é automaticamente cuidado pelo mecanismo de layout de bootstraps.

167
00:12:32,525 --> 00:12:35,550
Agora, podemos especificar explicitamente

168
00:12:35,550 --> 00:12:40,375
o número de colunas que uma determinada parte do conteúdo ocupa.

169
00:12:40,375 --> 00:12:45,625
Então, por exemplo, suponha que eu especifique três classes de coluna,

170
00:12:45,625 --> 00:12:49,565
mas o meio eu especificar coluna sm 6.

171
00:12:49,565 --> 00:12:52,615
Então o que acontece é, quando o bootstrap faz o layout,

172
00:12:52,615 --> 00:12:55,760
o do meio ocupará seis colunas,

173
00:12:55,760 --> 00:13:01,885
e então os pedaços de conteúdo esquerdo e direito ocuparão o que for deixado de fora.

174
00:13:01,885 --> 00:13:04,785
Então, das 12 colunas que temos,

175
00:13:04,785 --> 00:13:08,630
se 6 colunas que ocupam a parte do meio do conteúdo,

176
00:13:08,630 --> 00:13:12,855
então deixamos conosco mais 6 colunas e que serão igualmente

177
00:13:12,855 --> 00:13:17,965
divididas entre o conteúdo e os dois lados desta coluna do meio.

178
00:13:17,965 --> 00:13:23,585
Então, cada um deles terá colunas livres de espaço cada.

179
00:13:23,585 --> 00:13:27,730
Então, é assim que o layout é feito automaticamente com Bootstrap.

180
00:13:27,730 --> 00:13:34,110
No exercício, veremos várias combinações de uso deste tipo de

181
00:13:34,110 --> 00:13:43,680
especificações de quantas colunas cada pedaço de conteúdo ocupará no layout de cores.

182
00:13:43,680 --> 00:13:49,135
Esta tabela resume a forma como o Bootstrap trata

183
00:13:49,135 --> 00:13:54,860
as diferentes grades de tela e, consequentemente, como você identifica essas grades de tela.

184
00:13:54,860 --> 00:13:57,095
Então, como eu especifiquei anteriormente,

185
00:13:57,095 --> 00:14:04,580
Bootstrap divide todo o intervalo de largura da tela em 5 classes.

186
00:14:04,580 --> 00:14:12,890
As telas extra pequenas são aquelas cujas grades estão abaixo de 776 pixels.

187
00:14:12,890 --> 00:14:22,090
Pequenas telas são aquelas que estão entre 576 e abaixo de 768 pixels.

188
00:14:22,090 --> 00:14:25,600
Telas médias de 768 a 992,

189
00:14:25,600 --> 00:14:31,380
grandes de 992 a 1200 e qualquer coisa sobre 1200 pixels de largura

190
00:14:31,380 --> 00:14:34,685
é tratada como uma tela extra grande.

191
00:14:34,685 --> 00:14:39,390
Então, é assim que o Bootstrap Grid padrão é configurado.

192
00:14:39,390 --> 00:14:43,570
Agora, uma vez que você se sentir confortável com o Bootstrap,

193
00:14:43,570 --> 00:14:48,595
você também pode configurar essas divisões você mesmo.

194
00:14:48,595 --> 00:14:50,770
Mas para este curso,

195
00:14:50,770 --> 00:14:56,210
vamos ficar com a configuração padrão que o bootstrap suporta.

196
00:14:56,210 --> 00:14:59,195
Agora, o comportamento da grade, neste caso,

197
00:14:59,195 --> 00:15:01,825
é que o que é colocado para fora para extra pequeno,

198
00:15:01,825 --> 00:15:04,885
será horizontal em todos os momentos,

199
00:15:04,885 --> 00:15:09,235
para os bits mais altos eles serão recolhidos para 2start largura,

200
00:15:09,235 --> 00:15:13,040
mas horizontal sobre os pontos de quebra.

201
00:15:13,040 --> 00:15:17,855
Veremos como isso funciona em um curto espaço de tempo com alguns exemplos.

202
00:15:17,855 --> 00:15:24,980
Agora, vimos o uso do contêiner no slide anterior.

203
00:15:24,980 --> 00:15:28,545
Para telas extra pequenas,

204
00:15:28,545 --> 00:15:32,895
a largura do contêiner é determinada automaticamente pela largura da tela.

205
00:15:32,895 --> 00:15:34,575
Mas para pequeno, médio,

206
00:15:34,575 --> 00:15:36,045
grande e extra grande,

207
00:15:36,045 --> 00:15:39,425
a largura do recipiente é conforme especificado.

208
00:15:39,425 --> 00:15:42,600
Então, se você usar a div com um contêiner de classe,

209
00:15:42,600 --> 00:15:46,105
então, para telas pequenas, é 540 pixels.

210
00:15:46,105 --> 00:15:52,330
Então, você notará que se você tiver uma largura de tela entre 576 e 768,

211
00:15:52,330 --> 00:15:56,485
seu conteúdo será colocado em 540 pixels,

212
00:15:56,485 --> 00:16:00,670
será centrado na largura da tela.

213
00:16:00,670 --> 00:16:08,435
Assim, o espaço restante será deixado como margens em ambos os lados deste conteúdo.

214
00:16:08,435 --> 00:16:12,795
Da mesma forma, para o meio é 720 pixels e assim por diante.

215
00:16:12,795 --> 00:16:17,640
Agora, então você especifica quantas colunas cada conteúdo ocupa.

216
00:16:17,640 --> 00:16:20,885
Em seguida, os prefixos de classe de coluna que você usará

217
00:16:20,885 --> 00:16:26,670
é.col para extra pequeno, .col-sm para pequeno,

218
00:16:26,670 --> 00:16:29,420
todo o caminho para extra grande.

219
00:16:29,420 --> 00:16:31,625
Se você especificar algo com.col-md

220
00:16:31,625 --> 00:16:36,530
, isso se aplica a telas médias a extra grandes.

221
00:16:36,530 --> 00:16:41,785
Então, sempre que você especificar qualquer col- e alguns números,

222
00:16:41,785 --> 00:16:47,895
então isso se aplica a esse tamanho de tela particular e tudo sobre esse tamanho de tela.

223
00:16:47,895 --> 00:16:51,035
Agora, em todos os casos de tamanho de tela,

224
00:16:51,035 --> 00:16:54,955
o número de colunas é definido para ser 12 colunas.

225
00:16:54,955 --> 00:17:02,345
A grade no caso de bootstrap é projetada para ser 12 colunas e que é configurável,

226
00:17:02,345 --> 00:17:04,830
mas o valor padrão é 12 colunas.

227
00:17:04,830 --> 00:17:10,355
A razão para escolher 12 é que 12 é um bom múltiplo de dois, três,

228
00:17:10,355 --> 00:17:11,755
quatro e assim por diante.

229
00:17:11,755 --> 00:17:14,965
Assim, ele oferece muita flexibilidade em termos de

230
00:17:14,965 --> 00:17:19,065
quantas colunas você escolhe para colocar seu conteúdo.

231
00:17:19,065 --> 00:17:22,345
Entre cada coluna, então se você colocar

232
00:17:22,345 --> 00:17:25,510
dois pedaços de conteúdo lado a lado com seus divs,

233
00:17:25,510 --> 00:17:31,035
entre esses dois pedaços de conteúdo eles serão uma pequena sarjeta que será deixado.

234
00:17:31,035 --> 00:17:37,255
Espaço em branco vazio que será deixado fora da largura da calha,

235
00:17:37,255 --> 00:17:41,030
que é apenas 30 pixels por padrão.

236
00:17:41,030 --> 00:17:45,855
Assim, 15 pixels são de um pedaço de conteúdo e 15 pixels de outro pedaço de conteúdo.

237
00:17:45,855 --> 00:17:48,600
SumTotal juntos 30 pixels de

238
00:17:48,600 --> 00:17:53,470
espaço em branco serão deixados entre os dois pedaços de conteúdo.

239
00:17:53,470 --> 00:17:57,465
Pense em como um layout de coluna de jornal

240
00:17:57,465 --> 00:18:01,530
é feito e você começa a ver a correspondência entre

241
00:18:01,530 --> 00:18:04,970
o layout da coluna do jornal é feito e como

242
00:18:04,970 --> 00:18:10,815
a grade do bootstrap faz o layout do conteúdo nesse campo. A

243
00:18:10,815 --> 00:18:14,725
grade do Bootastrap permite que você faça conteúdo de próximo nível, para

244
00:18:14,725 --> 00:18:20,710
que você possa incluir conteúdo dentro do conteúdo e, em seguida, fazer layout de conteúdo aninhado.

245
00:18:20,710 --> 00:18:23,790
Além disso, ele suporta offsets.

246
00:18:23,790 --> 00:18:28,712
Veremos o uso de offsets também em alguns exemplos mais tarde.

247
00:18:28,712 --> 00:18:36,555
Então vamos olhar para o nosso primeiro exemplo de como você aplicaria classes de coluna de bootstraps,

248
00:18:36,555 --> 00:18:41,515
e como eles realmente seriam renderizados em tamanhos de tela diferentes.

249
00:18:41,515 --> 00:18:47,310
Aqui está um exemplo de uma situação em que eu apliquei aos dois divs,

250
00:18:47,310 --> 00:18:53,510
coluna hífen 12 e, em seguida, coluna hífen sm hífen cinco para

251
00:18:53,510 --> 00:18:56,050
o pedaço vermelho de conteúdo e para

252
00:18:56,050 --> 00:19:00,980
o outro eu apliquei coluna hífen 12 e coluna sm sete.

253
00:19:00,980 --> 00:19:06,045
Assim, a forma como este conteúdo será colocado para fora é para telas extra pequenas,

254
00:19:06,045 --> 00:19:10,690
os dois pedaços de conteúdo serão empilhados um em cima do outro.

255
00:19:10,690 --> 00:19:15,450
Então, o vermelho será empilhado em cima da cor verde do mar.

256
00:19:15,450 --> 00:19:19,010
Mas para telas pequenas a extra grandes,

257
00:19:19,010 --> 00:19:22,310
os dois pedaços de conteúdo serão dispostos lado a lado.

258
00:19:22,310 --> 00:19:27,490
A razão para isso é porque dissemos coluna sm cinco e coluna sm sete para os dois.

259
00:19:27,490 --> 00:19:31,510
Assim, para pequenos a extra grandes, eles são dispostos lado a lado, de modo

260
00:19:31,510 --> 00:19:36,210
que o conteúdo vermelho ocupará

261
00:19:36,210 --> 00:19:45,945
as cinco colunas mais à esquerda e o conteúdo verde marinho ocupará as sete colunas à direita da sua linha,

262
00:19:45,945 --> 00:19:50,440
desde pequenos até grandes tamanhos de tela.

263
00:19:50,440 --> 00:19:55,605
Então é assim que nós especificaríamos layout de conteúdo para diferentes tamanhos de tela.

264
00:19:55,605 --> 00:20:00,220
Bootstrap também fornece classes adicionais chamadas como

265
00:20:00,220 --> 00:20:07,055
a Ordem Hyphen Classes que permitem que você reordene o conteúdo na tela.

266
00:20:07,055 --> 00:20:11,440
Assim, por exemplo, se você aplicar uma ordem sm primeiro,

267
00:20:11,440 --> 00:20:15,200
uma ordem alguma última classe para as divs,

268
00:20:15,200 --> 00:20:19,265
como é mostrado no exemplo aqui, neste caso,

269
00:20:19,265 --> 00:20:26,160
o div para o qual você aplica ordem sm última será empurrado para

270
00:20:26,160 --> 00:20:29,390
o lado direito da tela e ordem

271
00:20:29,390 --> 00:20:33,125
sm primeiro div será empurrado para o lado esquerdo do tela.

272
00:20:33,125 --> 00:20:38,570
Então, aplicar essas classes de ordem permite que você reordene o conteúdo no script.

273
00:20:38,570 --> 00:20:45,000
Não só isso, a ordem sm também permite que você especifique a mesma ordem sm um para

274
00:20:45,000 --> 00:20:51,750
encomendar sm 12 para especificar a ordem em que o conteúdo precisa ser renderizado na tela.

275
00:20:51,750 --> 00:20:53,850
Portanto, usando um número maior,

276
00:20:53,850 --> 00:20:57,395
você pode deslocar o conteúdo para o lado direito da

277
00:20:57,395 --> 00:21:01,795
linha e um número menor mudará o conteúdo para o lado esquerdo da linha.

278
00:21:01,795 --> 00:21:05,785
Veremos um exemplo disso também no exercício.

279
00:21:05,785 --> 00:21:10,850
O suporte interessante misto que o Bootstrap Grid traz com o uso

280
00:21:10,850 --> 00:21:16,195
do layout Flexbox é o alinhamento vertical do conteúdo.

281
00:21:16,195 --> 00:21:19,530
As versões anteriores do Bootstrap,

282
00:21:19,530 --> 00:21:22,315
como o Bootstrap 3 e anteriores,

283
00:21:22,315 --> 00:21:27,915
não tinham a capacidade de fazer o alinhamento vertical do conteúdo.

284
00:21:27,915 --> 00:21:34,870
Com o uso do Flexbox para projetar o Bootstrap Grid no Bootstrap quatro,

285
00:21:34,870 --> 00:21:41,365
obtemos a flexibilidade que o CSS Flexbox traz em termos de alinhamento vertical.

286
00:21:41,365 --> 00:21:46,295
Então, se você quisesse que o conteúdo fosse centralizado verticalmente,

287
00:21:46,295 --> 00:21:48,370
então, para a linha,

288
00:21:48,370 --> 00:21:52,765
você aplicaria a classe chamada “align items center”.

289
00:21:52,765 --> 00:21:55,585
Então, neste caso, qualquer conteúdo é colocado para fora,

290
00:21:55,585 --> 00:22:00,750
será colocado verticalmente alinhado dentro dessa linha particular.

291
00:22:00,750 --> 00:22:03,560
Assim, o conteúdo que ocupa

292
00:22:03,560 --> 00:22:08,780
a maior altura será aquele para o qual os restantes serão

293
00:22:08,780 --> 00:22:16,905
alinhados quando for colocado para fora nessa linha ou se você pré-especificar a altura da linha,

294
00:22:16,905 --> 00:22:24,935
então todo o conteúdo será centrado verticalmente dentro dessa linha particular lá.

295
00:22:24,935 --> 00:22:30,795
Não só isso, o Bootstrap Grid também suporta o alinhamento horizontal do conteúdo.

296
00:22:30,795 --> 00:22:32,400
Vejamos um exemplo.

297
00:22:32,400 --> 00:22:35,060
Então, se você especificar o seu conteúdo assim.

298
00:22:35,060 --> 00:22:40,320
Digamos, você tem três colunas e a primeira que você especificar div classe coluna três,

299
00:22:40,320 --> 00:22:44,140
em seguida, a do meio você vai dizer div classe coluna auto.

300
00:22:44,140 --> 00:22:47,010
Eu vou voltar para aquela coluna auto em um curto espaço de tempo.

301
00:22:47,010 --> 00:22:50,045
E a direita diz classe div coluna 3.

302
00:22:50,045 --> 00:22:53,065
Então, neste caso, o que estamos especificando é que

303
00:22:53,065 --> 00:22:58,540
as partes de conteúdo à esquerda e à direita ocuparão três colunas cada.

304
00:22:58,540 --> 00:23:02,120
O do meio, quando eu digo, “coluna automática”,

305
00:23:02,120 --> 00:23:07,200
significa que o número de colunas que esta div em particular

306
00:23:07,200 --> 00:23:14,090
ocupa será automaticamente determinado pelo conteúdo que está fechado lá dentro.

307
00:23:14,090 --> 00:23:16,840
Assim, com base no conteúdo,

308
00:23:16,840 --> 00:23:21,710
o número de colunas ocupadas pela div se ajustará automaticamente.

309
00:23:21,710 --> 00:23:25,070
Neste caso particular, neste layout,

310
00:23:25,070 --> 00:23:31,040
esse conteúdo específico está sendo acomodado em quatro colunas.

311
00:23:31,040 --> 00:23:34,985
Então agora você tem quatro colunas sendo usadas pela div central,

312
00:23:34,985 --> 00:23:38,020
três colunas à esquerda e três colunas à direita.

313
00:23:38,020 --> 00:23:40,650
Então soma total, você tem 10 colunas.

314
00:23:40,650 --> 00:23:43,730
Então você tem duas colunas que são deixadas vazias.

315
00:23:43,730 --> 00:23:46,070
Agora, se você especificar para a linha,

316
00:23:46,070 --> 00:23:50,165
você especificar justify centro de conteúdo e,

317
00:23:50,165 --> 00:23:54,570
em seguida, todo o conteúdo nesta linha específica será centralizado em

318
00:23:54,570 --> 00:23:59,365
relação à linha horizontal.

319
00:23:59,365 --> 00:24:02,080
Você também pode ter o conteúdo justificado para a esquerda,

320
00:24:02,080 --> 00:24:05,584
justificado para a direita e algumas outras opções.

321
00:24:05,584 --> 00:24:09,260
Os detalhes estão na documentação de bootstraps.

322
00:24:09,260 --> 00:24:13,755
Bootstrap também permite que você faça deslocamentos de coluna.

323
00:24:13,755 --> 00:24:16,725
Como é que isto funciona? Vejamos um exemplo.

324
00:24:16,725 --> 00:24:18,710
Neste deslocamento coluna,

325
00:24:18,710 --> 00:24:21,320
podemos especificar um pedaço de conteúdo,

326
00:24:21,320 --> 00:24:27,750
adicionar a que se aplicarmos a classe como deslocamento hífen sm hífen um.

327
00:24:27,750 --> 00:24:33,585
O que estamos especificando é para telas pequenas a extra grandes,

328
00:24:33,585 --> 00:24:38,425
este pedaço de conteúdo deve ser deslocado para a direita por uma coluna.

329
00:24:38,425 --> 00:24:41,970
Então, quando esse conteúdo é colocado para fora, como você pode ver,

330
00:24:41,970 --> 00:24:49,560
a coluna mais à esquerda é deixada em branco e o conteúdo é deslocado para a direita por uma coluna.

331
00:24:49,560 --> 00:24:52,925
E você pode colocar o conteúdo restante no lado direito.

332
00:24:52,925 --> 00:24:55,860
Então soma total, você pode ver que as duas divs

333
00:24:55,860 --> 00:24:59,670
ocuparão 11 colunas, mas uma coluna deslocada para a direita.

334
00:24:59,670 --> 00:25:05,910
Então é assim que podemos controlar o layout do conteúdo usando um deslocamento de coluna.

335
00:25:05,910 --> 00:25:07,380
Então, como você pode ver,

336
00:25:07,380 --> 00:25:11,280
usando as especificações de tamanho da coluna,

337
00:25:11,280 --> 00:25:13,540
o alinhamento vertical e horizontal,

338
00:25:13,540 --> 00:25:15,975
o deslocamento, o empurrão e a tração,

339
00:25:15,975 --> 00:25:18,635
e flexionar primeiro e flex por último,

340
00:25:18,635 --> 00:25:23,925
somos capazes de obter muito controle sobre como colocamos

341
00:25:23,925 --> 00:25:29,825
conteúdo para diferentes larguras de tela e tamanhos de tela diferentes .

342
00:25:29,825 --> 00:25:36,800
Bootstrap vai ainda mais longe, permitindo que você aninhe conteúdo dentro de divs.

343
00:25:36,800 --> 00:25:39,585
Assim, por exemplo, se você especificar duas divs,

344
00:25:39,585 --> 00:25:43,130
como você vê com a coluna sm cinco e a coluna sm sete,

345
00:25:43,130 --> 00:25:45,725
os dois conteúdos serão dispostos como visto aqui.

346
00:25:45,725 --> 00:25:48,265
Agora, dentro da div direita,

347
00:25:48,265 --> 00:25:50,630
eu posso novamente entrar e dividir a

348
00:25:50,630 --> 00:25:58,080
largura do div em uma linha e, em seguida, essa linha vai me dar automaticamente

349
00:25:58,080 --> 00:26:04,960
mais 12 colunas para essa parte da tela e então eu posso então fazer o layout usando

350
00:26:04,960 --> 00:26:13,330
o aninhamento das divs e fazer o layout para diferentes partes dessa coluna .

351
00:26:13,330 --> 00:26:15,595
Então, aninhando assim,

352
00:26:15,595 --> 00:26:23,570
traz ainda mais flexibilidade na forma como você coloca o conteúdo em seu campo.

353
00:26:23,570 --> 00:26:27,910
Com toda a discussão sobre o Bootstrap Grid System e como

354
00:26:27,910 --> 00:26:34,280
o Bootstrap Grid suporta várias maneiras de colocar conteúdo,

355
00:26:34,280 --> 00:26:39,670
vamos agora, passar para o nosso próximo conjunto de exercícios.

356
00:26:39,670 --> 00:26:45,820
Vamos aplicar a grade Bootstrap à nossa página index.html

357
00:26:45,820 --> 00:26:52,770
para fazer o layout do conteúdo dentro ou página index.html.

358
00:26:52,770 --> 00:26:57,350
Nós também usaremos algumas classes CSS personalizadas.