Bem-vindo novamente nesta lição, continuaremos trabalhando com a grade bootstrap, em particular, há duas características
principais que eu quero destacar.
O primeiro é que eu quero abordar os quatro tamanhos diferentes que eu mencionei brevemente.
Trabalhamos com a coluna Elgie não falou sobre o que isso significa e existem três outros tamanhos
com os quais isso funcionará.
Eles também querem mostrar-lhe como podemos aninhar redes dentro de outras redes para dividir ainda mais essas
12 unidades em pedaços menores.
começar por voltar ao navegador e dar uma olhada no demo que construímos na última lição.
Mas comece por falar sobre os quatro tamanhos que vou
Então, temos duas linhas, uma que tem 12 colunas, uma que tem três em frente e observa o que acontece quando
eu redimensiono a escala das coisas da janela muito bem e, em seguida, atingimos um ponto de interrupção aqui
onde tudo muda em cada coluna.
Agora, ocupa um total de 12 unidades que atravessam e eles se acumulam um do outro e, enquanto eles continuam redimensionando,
você não notará nenhuma alteração realmente.
Todos eles continuam a ocupar 12 unidades e se empilham um no outro.
Mas, na verdade, existem quatro tamanhos diferentes que podemos especificar para que possamos ter quatro layouts diferentes.
Agora, este é um layout móvel que é um acesso extra pequeno.
Então, ficamos muito pequenos, o que é como uma disposição de tablet e, em seguida, um meio que está certo aqui.
Isso seria em um laptop ou em uma janela menor do navegador e, em seguida, em grande, que temos aqui.
Portanto, não parece que há muita diferença, exceto aqui mesmo, quando vamos entre ser
muito grande.
Mas existem quatro tamanhos e podemos especificar proporções e proporções para cada um desses tamanhos.
Então, no bootstrap docas sob as opções de grade aqui sistema de grade, você pode ver que há uma tabela
e nos mostra os quatro tamanhos diferentes.
Portanto, há dispositivos extra pequenos, como telefones do que pequenos dispositivos, que são dispositivos de mídia de mesa com dispositivos
grandes ou desktops maiores com mais de doze centenas de pixels de largura e cada um deles tem um
prefixo que podemos usar para que o acesso à coluna seja realmente pequeno.
S. M. é um pequeno M. D. é médio e a LG é grande, o que foi o que usamos.
Então, digamos que eu quero que meu layout permaneça o mesmo no ponto de interrupção grande.
E então, quando mudamos para o meio aqui, quero essas 12 colunas que cada uma ocupe uma única unidade.
Quero que cada um ocupe duas unidades em vez disso.
Então vamos acabar com seis cruzando.
E, em seguida, outros 6 abaixo.
Então, vamos nos concentrar nisso e simplificar as coisas.
Realmente vou me livrar da nossa segunda fila por enquanto.
Então, tudo o que temos é aqui mesmo.
Então, quando atingimos esse ponto de interrupção médio, não quero que isso aconteça.
Em vez disso, quero seis colunas para fazer isso.
Acabei de adicionar uma outra classe.
Então eu vou fazer isso com cada um e isso será meio da coluna.
Então, quando esta grade é configurada de tamanho médio, queremos que cada uma ocupe duas unidades e economizaremos.
Agora vamos e atualizemos.
Faça o tamanho completo.
Nada muda porque estamos no tamanho grande.
Mas agora, quando mudo para o meio aqui.
Note que cada um deles ocupa duas unidades agora e nós conseguimos seis.
E se eu continuar diminuindo, então atingimos o pequeno ponto de interrupção e é aí que ele alterna onde cada coluna
passa todo o caminho através de 12 unidades cheias e elas se empilham uma sobre a outra.
Então vamos voltar e ler vamos voltar ao nosso sublime e revivir nossa velha grade.
Então, vamos nos livrar disso, porque não é tão comum que realmente tenha 12
componentes diferentes.
Normalmente você está trabalhando com três ou quatro vezes seis, mas 12 colunas individuais são bastante raras.
Então, voltemos a este e o que faremos é tentar recriar esse grid para fora do horário da
turnê de Olafur Arnold aqui.
Então, começa em quatro.
Então, diminuímos.
Há um ponto de interrupção médio e ainda estamos às quatro e depois chegamos ao ponto de interrupção e
vamos para dois.
E, em seguida, o celular x ou pequeno é um.
Então, é isso que tentaremos e recriar, não o conteúdo, apenas a estrutura.
Então vamos voltar aqui.
E queremos começar com quatro em frente.
O que significa que cada um ocupa três unidades e então podemos mudar o texto aqui.
E digamos ou namore.
Então, se estivéssemos frescos, devemos ter quatro colunas em frente às quais fazemos exatamente o
que isso começa com quatro.
E a única diferença é realmente o conteúdo real.
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
de um pouco H. R. Parece e ainda obteremos o mesmo espaçamento.
Tudo bem.
Então, o próximo ponto de interrupção é quando chegamos ao meio.
Fica às quatro.
Então, o que você pode pensar que precisamos fazer é especificar o ponto de quebra média, então, quando
atingiremos isso, eles deveriam seguir cada três unidades.
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
meio e ficam em três unidades e depois nos dirigimos e agora são 12
unidades novamente.
E o que queremos para seguir isso é que, quando atingimos o tamanho pequeno, agora cada um leva seis
unidades para que possamos entrar aqui e adicionar isso na coluna pequena 6.
Portanto, o tamanho grande de cada um deles leva 25 por cento três unidades de 12 no tamanho médio.
Mesma coisa.
Eles ocupam 25% e, em seguida, no tamanho pequeno que é para comprimidos, cada um deles leva 50%.
Então, vamos atualizar cada um demorando três minutos e depois três unidades, então atingimos pequenas.
E agora cada um deles ocupa seis unidades e, em seguida, tivemos um pouco extra.
Então eles automaticamente ocupam as 12 unidades completas, o que queremos.
Você pode ver quando atingimos pequenas, queremos que elas ocupem uma unidade.
Tudo bem.
Então, temos isso, há uma pequena mudança que podemos fazer se voltarmos a sublimar.
Você verá que estamos especificando essas três unidades duas vezes para o grande e médio.
Podemos realmente livrar-se da coluna três grandes e apenas colocar o meio lá e o bootstrap saberá isso porque estamos configurando o
meio para ser três e não estamos explicitamente configurando o grande, ele apenas tomará o
que definimos para o meio e aplicaremos é grande.
Então, funciona da mesma maneira.
Nada mudou.
Eu já atualizei aparência idêntica, nosso ponto de interrupção médio ainda está lá e nossos pequenos trabalhos.
Portanto, não precisamos especificar isso duas vezes.
Então, deixe-me vir N. Z. Nós nos livramos disso e isso funciona exatamente da mesma maneira.
E na verdade, se dar uma olhada, vamos ao site.
Aposto que se inspecionarmos cada um desses, você verá lá, vamos.
Coluna pequena de seis colunas, média três.
Exatamente o que tivemos agora que cobrimos esses quatro tamanhos diferentes.
Espero que você possa ver o quão versátil e útil o sistema de grade pode ser.
Vamos voltar.
E agora abordarei as redes de nidificação.
Suponhamos que em vez desta primeira coluna, eu quero separá-la pela metade e ter algo no lado
esquerdo daquela e algo do lado direito.
Eu realmente posso ir e adicionar em outra fila dentro de lá.
Então a classe é igual à linha.
E, em seguida, dentro dessa linha, posso adicionar uma div com classe igual à coluna
e tudo muito grande para agora coluna de seis grandes e outra uma coluna grande 6 e vou escrever alguns textos aqui a
meio caminho e outra metade.
Vamos mudar para a primeira metade e a outra metade e vamos economizar e vamos dar-lhes um clássico rosa.
Então, o que fizemos agora é que teremos três cruzando ainda ou quatro em frente.
Um dois três quatro e no primeiro dividimos em mais 12 unidades, adicionando outra linha e estamos usando
os seis primeiros para dizer algo e estamos usando o segundo seis para dizer
algo mais, salve ou atualize .
Lá você vai e torna-se ainda mais óbvio.
Deixe-me dar-lhes outra classe.
Vamos chamá-lo de laranja.
Ainda não existe.
E definiu isso, parece laranja e terá laranja de fundo e nós adicionaremos para um pixel de vermelho
sólido e então, de fato, damos OK.
Refresque que você pode ver agora, ainda temos essas quatro coisas em curso.
Cada um ocupa três unidades, mas dividimos a primeira em seis unidades e seis unidades ao adicionar essa
linha e você deve adicionar a linha.
Você não pode simplesmente começar a fazer isso onde você tem uma coluna em vez de uma coluna.
Deve haver uma linha.
E vamos fazer mais um.
Vamos colocar este último aqui mesmo em seis pequenas peças dentro.
Então, precisamos adicionar uma linha dentro dessa classe div é igual à linha em vez de lá.
Precisamos de outra div e teremos seis dessas, onde temos uma coluna grande, duas cada uma ocupando duas
das 12 unidades.
E nós queremos seis e então vamos em cada um e vamos adicionar nessa classe de laranja apenas para
que possamos vê-los.
ESTÁ BEM.
Então, temos quatro grandes colunas em frente ao primeiro que dividimos pela metade.
O último que dividimos em seis peças e você realmente não pode ver nada, então não colocamos nenhum texto lá.
Então vamos fazer isso.
Ou, em vez disso, é realmente apenas dar um com ou uma altura para a classe laranja.
Vamos fazê-los cada 50 pixels.
E se eu atualizar, veja que agora tudo o que tem laranja que a laranja da classe leva 50 pixels
de altura.
Então, temos nossas duas colunas uniformemente divididas e, em seguida, nossas seis colunas uniformemente divididas dentro dessas
quatro colunas de nível superior uniformemente divididas.
Então, essas são todas as peças importantes do sistema de grade.
Em poucas palavras, temos 12 unidades em cada linha.
Você os separa como quiser.
Existem quatro tamanhos de tamanho médio pequeno e extra pequeno e você pode reatribuir essas 12 unidades em qualquer um desses quatro
pontos de quebra desses quatro tamanhos diferentes.
E é assim que você termina com esses layouts agradáveis ​​e geralmente o padrão que você
vê é aquele em sites móveis.
dos sites terá seu conteúdo apenas apanhado um do outro, como se houvesse aqui se eu encolher isso.
Então, no tamanho extra pequeno, a maioria
Este é o layout comum no celular, onde você não possui vários itens na mesma linha.
ESTÁ BEM.
Voltemos ao sublime.
Certifique-se de ter falado sobre os três principais objetivos.
Então, falamos sobre o propósito que o ponto do sistema de grade nos ajuda a resolver as coisas.
É incrivel.
Compreenda os quatro tamanhos diferentes.
Essas são pequenas e pequenas grades pequenas e pequenas, pequenas e pequenas.
E é isso que estamos fazendo aqui onde adicionamos uma linha em vez de uma coluna e então
podemos preencher essa linha com outras sub colunas no próximo vídeo.
Vamos construir uma grade de imagem simples usando o sistema de grade