1
00:00:00,390 --> 00:00:05,640
Bem-vindo novamente nesta lição, continuaremos trabalhando com a grade bootstrap, em particular, há duas características

2
00:00:05,640 --> 00:00:07,550
principais que eu quero destacar.

3
00:00:07,590 --> 00:00:12,070
O primeiro é que eu quero abordar os quatro tamanhos diferentes que eu mencionei brevemente.

4
00:00:12,150 --> 00:00:16,950
Trabalhamos com a coluna Elgie não falou sobre o que isso significa e existem três outros tamanhos

5
00:00:16,950 --> 00:00:18,530
com os quais isso funcionará.

6
00:00:18,600 --> 00:00:24,270
Eles também querem mostrar-lhe como podemos aninhar redes dentro de outras redes para dividir ainda mais essas

7
00:00:24,270 --> 00:00:25,820
12 unidades em pedaços menores.

8
00:00:26,250 --> 00:00:31,200
começar por voltar ao navegador e dar uma olhada no demo que construímos na última lição.

9
00:00:31,200 --> 00:00:34,100
Mas comece por falar sobre os quatro tamanhos que vou

10
00:00:34,290 --> 00:00:41,700
Então, temos duas linhas, uma que tem 12 colunas, uma que tem três em frente e observa o que acontece quando

11
00:00:41,700 --> 00:00:48,660
eu redimensiono a escala das coisas da janela muito bem e, em seguida, atingimos um ponto de interrupção aqui

12
00:00:48,660 --> 00:00:50,810
onde tudo muda em cada coluna.

13
00:00:50,850 --> 00:00:57,420
Agora, ocupa um total de 12 unidades que atravessam e eles se acumulam um do outro e, enquanto eles continuam redimensionando,

14
00:00:57,420 --> 00:00:59,400
você não notará nenhuma alteração realmente.

15
00:00:59,460 --> 00:01:03,140
Todos eles continuam a ocupar 12 unidades e se empilham um no outro.

16
00:01:03,330 --> 00:01:08,620
Mas, na verdade, existem quatro tamanhos diferentes que podemos especificar para que possamos ter quatro layouts diferentes.

17
00:01:09,030 --> 00:01:13,850
Agora, este é um layout móvel que é um acesso extra pequeno.

18
00:01:14,040 --> 00:01:20,730
Então, ficamos muito pequenos, o que é como uma disposição de tablet e, em seguida, um meio que está certo aqui.

19
00:01:20,730 --> 00:01:26,590
Isso seria em um laptop ou em uma janela menor do navegador e, em seguida, em grande, que temos aqui.

20
00:01:26,940 --> 00:01:31,340
Portanto, não parece que há muita diferença, exceto aqui mesmo, quando vamos entre ser

21
00:01:31,350 --> 00:01:31,870
muito grande.

22
00:01:31,980 --> 00:01:38,330
Mas existem quatro tamanhos e podemos especificar proporções e proporções para cada um desses tamanhos.

23
00:01:38,460 --> 00:01:44,850
Então, no bootstrap docas sob as opções de grade aqui sistema de grade, você pode ver que há uma tabela

24
00:01:44,850 --> 00:01:46,900
e nos mostra os quatro tamanhos diferentes.

25
00:01:47,130 --> 00:01:53,220
Portanto, há dispositivos extra pequenos, como telefones do que pequenos dispositivos, que são dispositivos de mídia de mesa com dispositivos

26
00:01:53,400 --> 00:01:59,190
grandes ou desktops maiores com mais de doze centenas de pixels de largura e cada um deles tem um

27
00:01:59,190 --> 00:02:02,940
prefixo que podemos usar para que o acesso à coluna seja realmente pequeno.

28
00:02:03,000 --> 00:02:08,630
S. M. é um pequeno M. D. é médio e a LG é grande, o que foi o que usamos.

29
00:02:09,030 --> 00:02:14,170
Então, digamos que eu quero que meu layout permaneça o mesmo no ponto de interrupção grande.

30
00:02:14,340 --> 00:02:22,020
E então, quando mudamos para o meio aqui, quero essas 12 colunas que cada uma ocupe uma única unidade.

31
00:02:22,800 --> 00:02:25,320
Quero que cada um ocupe duas unidades em vez disso.

32
00:02:25,320 --> 00:02:27,670
Então vamos acabar com seis cruzando.

33
00:02:27,690 --> 00:02:29,510
E, em seguida, outros 6 abaixo.

34
00:02:29,820 --> 00:02:32,880
Então, vamos nos concentrar nisso e simplificar as coisas.

35
00:02:33,100 --> 00:02:36,360
Realmente vou me livrar da nossa segunda fila por enquanto.

36
00:02:36,600 --> 00:02:39,170
Então, tudo o que temos é aqui mesmo.

37
00:02:39,210 --> 00:02:43,730
Então, quando atingimos esse ponto de interrupção médio, não quero que isso aconteça.

38
00:02:43,740 --> 00:02:48,510
Em vez disso, quero seis colunas para fazer isso.

39
00:02:48,510 --> 00:02:50,740
Acabei de adicionar uma outra classe.

40
00:02:50,940 --> 00:02:58,120
Então eu vou fazer isso com cada um e isso será meio da coluna.

41
00:02:58,200 --> 00:03:05,600
Então, quando esta grade é configurada de tamanho médio, queremos que cada uma ocupe duas unidades e economizaremos.

42
00:03:05,640 --> 00:03:07,200
Agora vamos e atualizemos.

43
00:03:07,380 --> 00:03:09,120
Faça o tamanho completo.

44
00:03:09,120 --> 00:03:12,380
Nada muda porque estamos no tamanho grande.

45
00:03:12,570 --> 00:03:16,190
Mas agora, quando mudo para o meio aqui.

46
00:03:16,200 --> 00:03:21,380
Note que cada um deles ocupa duas unidades agora e nós conseguimos seis.

47
00:03:21,630 --> 00:03:28,230
E se eu continuar diminuindo, então atingimos o pequeno ponto de interrupção e é aí que ele alterna onde cada coluna

48
00:03:28,230 --> 00:03:33,480
passa todo o caminho através de 12 unidades cheias e elas se empilham uma sobre a outra.

49
00:03:33,900 --> 00:03:41,040
Então vamos voltar e ler vamos voltar ao nosso sublime e revivir nossa velha grade.

50
00:03:41,130 --> 00:03:46,410
Então, vamos nos livrar disso, porque não é tão comum que realmente tenha 12

51
00:03:46,410 --> 00:03:47,160
componentes diferentes.

52
00:03:47,160 --> 00:03:53,300
Normalmente você está trabalhando com três ou quatro vezes seis, mas 12 colunas individuais são bastante raras.

53
00:03:53,400 --> 00:03:59,550
Então, voltemos a este e o que faremos é tentar recriar esse grid para fora do horário da

54
00:03:59,550 --> 00:04:01,250
turnê de Olafur Arnold aqui.

55
00:04:01,590 --> 00:04:04,200
Então, começa em quatro.

56
00:04:04,200 --> 00:04:05,400
Então, diminuímos.

57
00:04:05,550 --> 00:04:12,060
Há um ponto de interrupção médio e ainda estamos às quatro e depois chegamos ao ponto de interrupção e

58
00:04:12,060 --> 00:04:13,100
vamos para dois.

59
00:04:13,140 --> 00:04:15,580
E, em seguida, o celular x ou pequeno é um.

60
00:04:15,990 --> 00:04:20,530
Então, é isso que tentaremos e recriar, não o conteúdo, apenas a estrutura.

61
00:04:20,790 --> 00:04:22,080
Então vamos voltar aqui.

62
00:04:22,650 --> 00:04:25,740
E queremos começar com quatro em frente.

63
00:04:25,740 --> 00:04:31,860
O que significa que cada um ocupa três unidades e então podemos mudar o texto aqui.

64
00:04:31,860 --> 00:04:35,510
E digamos ou namore.

65
00:04:35,610 --> 00:04:43,470
Então, se estivéssemos frescos, devemos ter quatro colunas em frente às quais fazemos exatamente o

66
00:04:43,470 --> 00:04:46,320
que isso começa com quatro.

67
00:04:46,320 --> 00:04:48,720
E a única diferença é realmente o conteúdo real.

68
00:04:48,720 --> 00:04:55,650
Então, em vez de cada coluna, simplesmente adicionaríamos um H um parágrafo um botão e qualquer outro conteúdo que precisássemos

69
00:04:55,650 --> 00:05:00,190
de um pouco H. R. Parece e ainda obteremos o mesmo espaçamento.

70
00:05:00,600 --> 00:05:01,200
Tudo bem.

71
00:05:01,200 --> 00:05:03,790
Então, o próximo ponto de interrupção é quando chegamos ao meio.

72
00:05:03,960 --> 00:05:05,840
Fica às quatro.

73
00:05:06,300 --> 00:05:12,570
Então, o que você pode pensar que precisamos fazer é especificar o ponto de quebra média, então, quando

74
00:05:12,570 --> 00:05:15,440
atingiremos isso, eles deveriam seguir cada três unidades.

75
00:05:15,600 --> 00:05:26,810
Podemos voltar a sublimar e adicioná-lo e, novamente, chamá-los de média três e salvar e cada um deles começa em três unidades, atingimos o

76
00:05:26,840 --> 00:05:33,300
meio e ficam em três unidades e depois nos dirigimos e agora são 12

77
00:05:33,290 --> 00:05:34,190
unidades novamente.

78
00:05:34,310 --> 00:05:42,610
E o que queremos para seguir isso é que, quando atingimos o tamanho pequeno, agora cada um leva seis

79
00:05:43,400 --> 00:05:49,140
unidades para que possamos entrar aqui e adicionar isso na coluna pequena 6.

80
00:05:49,400 --> 00:05:57,070
Portanto, o tamanho grande de cada um deles leva 25 por cento três unidades de 12 no tamanho médio.

81
00:05:57,120 --> 00:05:57,920
Mesma coisa.

82
00:05:58,010 --> 00:06:04,730
Eles ocupam 25% e, em seguida, no tamanho pequeno que é para comprimidos, cada um deles leva 50%.

83
00:06:05,480 --> 00:06:12,980
Então, vamos atualizar cada um demorando três minutos e depois três unidades, então atingimos pequenas.

84
00:06:13,040 --> 00:06:17,880
E agora cada um deles ocupa seis unidades e, em seguida, tivemos um pouco extra.

85
00:06:17,940 --> 00:06:21,620
Então eles automaticamente ocupam as 12 unidades completas, o que queremos.

86
00:06:21,810 --> 00:06:27,350
Você pode ver quando atingimos pequenas, queremos que elas ocupem uma unidade.

87
00:06:27,380 --> 00:06:28,010
Tudo bem.

88
00:06:28,010 --> 00:06:33,240
Então, temos isso, há uma pequena mudança que podemos fazer se voltarmos a sublimar.

89
00:06:33,770 --> 00:06:39,560
Você verá que estamos especificando essas três unidades duas vezes para o grande e médio.

90
00:06:39,560 --> 00:06:46,700
Podemos realmente livrar-se da coluna três grandes e apenas colocar o meio lá e o bootstrap saberá isso porque estamos configurando o

91
00:06:46,740 --> 00:06:51,650
meio para ser três e não estamos explicitamente configurando o grande, ele apenas tomará o

92
00:06:51,650 --> 00:06:54,320
que definimos para o meio e aplicaremos é grande.

93
00:06:54,440 --> 00:06:55,880
Então, funciona da mesma maneira.

94
00:06:55,880 --> 00:06:56,650
Nada mudou.

95
00:06:56,660 --> 00:07:02,420
Eu já atualizei aparência idêntica, nosso ponto de interrupção médio ainda está lá e nossos pequenos trabalhos.

96
00:07:02,420 --> 00:07:04,800
Portanto, não precisamos especificar isso duas vezes.

97
00:07:05,300 --> 00:07:10,460
Então, deixe-me vir N. Z. Nós nos livramos disso e isso funciona exatamente da mesma maneira.

98
00:07:10,520 --> 00:07:14,990
E na verdade, se dar uma olhada, vamos ao site.

99
00:07:15,000 --> 00:07:19,770
Aposto que se inspecionarmos cada um desses, você verá lá, vamos.

100
00:07:19,780 --> 00:07:22,590
Coluna pequena de seis colunas, média três.

101
00:07:22,790 --> 00:07:26,990
Exatamente o que tivemos agora que cobrimos esses quatro tamanhos diferentes.

102
00:07:27,070 --> 00:07:30,710
Espero que você possa ver o quão versátil e útil o sistema de grade pode ser.

103
00:07:30,750 --> 00:07:31,520
Vamos voltar.

104
00:07:31,740 --> 00:07:33,960
E agora abordarei as redes de nidificação.

105
00:07:34,310 --> 00:07:40,130
Suponhamos que em vez desta primeira coluna, eu quero separá-la pela metade e ter algo no lado

106
00:07:40,130 --> 00:07:42,710
esquerdo daquela e algo do lado direito.

107
00:07:42,800 --> 00:07:47,340
Eu realmente posso ir e adicionar em outra fila dentro de lá.

108
00:07:47,370 --> 00:07:49,230
Então a classe é igual à linha.

109
00:07:49,740 --> 00:07:56,300
E, em seguida, dentro dessa linha, posso adicionar uma div com classe igual à coluna

110
00:07:56,300 --> 00:08:06,620
e tudo muito grande para agora coluna de seis grandes e outra uma coluna grande 6 e vou escrever alguns textos aqui a

111
00:08:06,710 --> 00:08:09,100
meio caminho e outra metade.

112
00:08:09,360 --> 00:08:18,170
Vamos mudar para a primeira metade e a outra metade e vamos economizar e vamos dar-lhes um clássico rosa.

113
00:08:18,200 --> 00:08:24,000
Então, o que fizemos agora é que teremos três cruzando ainda ou quatro em frente.

114
00:08:24,000 --> 00:08:30,290
Um dois três quatro e no primeiro dividimos em mais 12 unidades, adicionando outra linha e estamos usando

115
00:08:30,290 --> 00:08:35,420
os seis primeiros para dizer algo e estamos usando o segundo seis para dizer

116
00:08:36,330 --> 00:08:38,530
algo mais, salve ou atualize .

117
00:08:38,960 --> 00:08:41,770
Lá você vai e torna-se ainda mais óbvio.

118
00:08:41,780 --> 00:08:43,280
Deixe-me dar-lhes outra classe.

119
00:08:43,400 --> 00:08:45,170
Vamos chamá-lo de laranja.

120
00:08:45,370 --> 00:08:46,940
Ainda não existe.

121
00:08:46,940 --> 00:09:00,030
E definiu isso, parece laranja e terá laranja de fundo e nós adicionaremos para um pixel de vermelho

122
00:09:00,140 --> 00:09:04,870
sólido e então, de fato, damos OK.

123
00:09:05,540 --> 00:09:10,530
Refresque que você pode ver agora, ainda temos essas quatro coisas em curso.

124
00:09:10,520 --> 00:09:16,880
Cada um ocupa três unidades, mas dividimos a primeira em seis unidades e seis unidades ao adicionar essa

125
00:09:16,880 --> 00:09:19,160
linha e você deve adicionar a linha.

126
00:09:19,160 --> 00:09:22,520
Você não pode simplesmente começar a fazer isso onde você tem uma coluna em vez de uma coluna.

127
00:09:22,520 --> 00:09:23,980
Deve haver uma linha.

128
00:09:24,260 --> 00:09:25,520
E vamos fazer mais um.

129
00:09:25,910 --> 00:09:31,090
Vamos colocar este último aqui mesmo em seis pequenas peças dentro.

130
00:09:31,500 --> 00:09:39,770
Então, precisamos adicionar uma linha dentro dessa classe div é igual à linha em vez de lá.

131
00:09:39,770 --> 00:09:48,770
Precisamos de outra div e teremos seis dessas, onde temos uma coluna grande, duas cada uma ocupando duas

132
00:09:48,770 --> 00:09:50,310
das 12 unidades.

133
00:09:50,310 --> 00:09:58,070
E nós queremos seis e então vamos em cada um e vamos adicionar nessa classe de laranja apenas para

134
00:09:58,080 --> 00:09:59,370
que possamos vê-los.

135
00:10:00,440 --> 00:10:01,150
ESTÁ BEM.

136
00:10:01,640 --> 00:10:06,540
Então, temos quatro grandes colunas em frente ao primeiro que dividimos pela metade.

137
00:10:06,650 --> 00:10:12,410
O último que dividimos em seis peças e você realmente não pode ver nada, então não colocamos nenhum texto lá.

138
00:10:12,920 --> 00:10:14,200
Então vamos fazer isso.

139
00:10:14,270 --> 00:10:20,100
Ou, em vez disso, é realmente apenas dar um com ou uma altura para a classe laranja.

140
00:10:20,100 --> 00:10:22,950
Vamos fazê-los cada 50 pixels.

141
00:10:22,940 --> 00:10:29,330
E se eu atualizar, veja que agora tudo o que tem laranja que a laranja da classe leva 50 pixels

142
00:10:29,340 --> 00:10:29,960
de altura.

143
00:10:30,260 --> 00:10:37,640
Então, temos nossas duas colunas uniformemente divididas e, em seguida, nossas seis colunas uniformemente divididas dentro dessas

144
00:10:37,730 --> 00:10:40,880
quatro colunas de nível superior uniformemente divididas.

145
00:10:40,880 --> 00:10:43,700
Então, essas são todas as peças importantes do sistema de grade.

146
00:10:43,860 --> 00:10:46,420
Em poucas palavras, temos 12 unidades em cada linha.

147
00:10:46,560 --> 00:10:48,300
Você os separa como quiser.

148
00:10:48,360 --> 00:10:56,360
Existem quatro tamanhos de tamanho médio pequeno e extra pequeno e você pode reatribuir essas 12 unidades em qualquer um desses quatro

149
00:10:56,370 --> 00:10:58,900
pontos de quebra desses quatro tamanhos diferentes.

150
00:10:59,000 --> 00:11:03,050
E é assim que você termina com esses layouts agradáveis ​​e geralmente o padrão que você

151
00:11:03,410 --> 00:11:04,870
vê é aquele em sites móveis.

152
00:11:04,880 --> 00:11:10,700
dos sites terá seu conteúdo apenas apanhado um do outro, como se houvesse aqui se eu encolher isso.

153
00:11:10,700 --> 00:11:12,830
Então, no tamanho extra pequeno, a maioria

154
00:11:12,840 --> 00:11:18,180
Este é o layout comum no celular, onde você não possui vários itens na mesma linha.

155
00:11:19,080 --> 00:11:19,540
ESTÁ BEM.

156
00:11:19,700 --> 00:11:20,990
Voltemos ao sublime.

157
00:11:21,090 --> 00:11:23,290
Certifique-se de ter falado sobre os três principais objetivos.

158
00:11:23,610 --> 00:11:28,160
Então, falamos sobre o propósito que o ponto do sistema de grade nos ajuda a resolver as coisas.

159
00:11:28,160 --> 00:11:29,270
É incrivel.

160
00:11:29,660 --> 00:11:31,690
Compreenda os quatro tamanhos diferentes.

161
00:11:31,700 --> 00:11:36,740
Essas são pequenas e pequenas grades pequenas e pequenas, pequenas e pequenas.

162
00:11:37,040 --> 00:11:42,450
E é isso que estamos fazendo aqui onde adicionamos uma linha em vez de uma coluna e então

163
00:11:42,600 --> 00:11:45,790
podemos preencher essa linha com outras sub colunas no próximo vídeo.

164
00:11:45,840 --> 00:11:48,650
Vamos construir uma grade de imagem simples usando o sistema de grade