Voltaremos nesta lição e demonstraremos o sistema de grade de inicialização e o sistema de grade provavelmente é o
primeiro motivo pelo qual as pessoas usam bootstrap as horas da soga das formas.
Os botões são boas mudanças estilísticas que podemos fazer com o bootstrap, mas o sistema de grade do
bootstrap atuará como o esqueleto de toda a nossa aplicação.
É uma maneira muito fácil para nós adicionar estrutura e estabelecer a nossa aplicação.
Então, deixe-me mostrar alguns exemplos do que você pode fazer com o sistema de grade.
Eu tenho alguns sites abertos do Bootstrap ex-beau, o primeiro aqui é uma página do produto para um jarro de
água e deslize para baixo.
Observe o layout aqui.
Nós temos três itens lado a lado e, em seguida, notamos que eles mudam de tamanho, pois eles reduzem a escala e, quando eu atinge o
tamanho do tablet, eles se empilham um sobre o outro.
Então, esse é o sistema de grade de bootstrap no trabalho, como está aqui mesmo, onde temos outro efeito semelhante.
Escalam e depois empilham no tamanho do tablet e do celular.
Aqui está outro exemplo.
Este é o músico islandês e Olafur Arnolds e este é deslocar para baixo neste site.
grade aqui, que você pode ver um layout similar, mas não é só isso, isso também é construído com um sistema de grade.
Nós temos algum conteúdo que é construído com o sistema de
Aqui, este conteúdo.
Estas datas da turnê aqui.
Basicamente, usando o sistema de grade, podemos dizer que queremos que algum conteúdo ocupe 100% da tela, então
também podemos usá-lo para dizer que queremos que cada um deles ocupe 25% da largura da
tela até atingir O lado móvel ou o tamanho da tabuleta para cada exame leva 50 de vez em quando quando atingimos
o celular, cada um leva 100 por cento.
A mesma coisa é feita aqui.
Ele nos permite dividir isso com a tela em pedaços e escolher quantas peças queremos.
Cada um de nossos próprios elementos para aproveitar e aqui está o último que já vimos.
É chamado de Tim Tim criativo Deslize para baixo aqui conteúdo similar.
Aqui está o sistema de grade e aqui também.
Então tudo isso é feito com o sistema de grade.
Tudo isso é muito importante, muito emocionante.
Isso nos ajuda a colocar as coisas tão facilmente em comparação com o que teríamos que fazer sem bootstrap.
Então, estaremos usando sistema de grade de bootstraps e praticamente todas as aplicações que fazemos usando o bootstrap.
E deixe-me mostrar-lhe um deles.
Esta é a nossa aplicação de acampamento e observe que temos uma grade de campgrounds para todo.
E como eu redimensionar o aviso de tela que eles escala e depois vamos para dois em frente e depois para o Mobile.
Nós vamos para um lado e é um layout móvel muito agradável e fácil de usar.
Então, esse é apenas um lugar onde usaremos um sistema de grade.
Agora vamos começar escrevendo algum código usando o sistema de grade, então, cheia tela essa janela e
volte para obter o ponto de partida bootstrapped na guia Avaliada.
Você pode clicar no sistema da grade.
Há um pouco para o sistema de grade, mas vou começar apenas apontando um
único número aqui 12.
Isso é realmente importante para o funcionamento do sistema de grade.
Assim, cada recipiente e bootstrap podem ser divididos em 12 colunas diferentes e, em seguida, usando o
sistema de grade, podemos escolher quantas dessas 12 unidades cada elemento deve assumir.
Então, neste caso, parece que eles têm algo ocupando cerca de 10 em 12 unidades.
E, em seguida, por aqui, duas em 12 unidades ou podem ser nove e 3, mas eles têm alguma
razão onde eles têm mais daqueles 12 no lado esquerdo e, em seguida, uma pequena fração dos 12 no lado direito.
Então, se voltarmos para acampar, este é o nosso recipiente aqui.
E cada uma destas em cada 12 unidades cada uma ocupa três unidades.
Então, acabamos com quatro colunas iguais e depois diminuímos aqui.
Agora, cada um ocupa seis unidades de 12.
Então, novamente esse número 12 é muito importante.
Agora vamos na direita.
Nossa primeira grade.
feita por arquivos, está vazio, exceto para o bootstraps do arquivo SS e, para começar, precisamos definir um contêiner.
Então, eu tenho uma grade
Sempre que usamos uma grade de Boucek, ela precisa estar dentro de um recipiente.
Então a classe é igual ao recipiente.
E a primeira coisa que precisamos fazer é encontrar outra div com classe igual à linha em vez de cada linha.
Temos 12 unidades para escolher.
Então, o que vamos começar por fazer é apenas fazer uma divisão de 50 50, teremos 1 div que ocupa
6 de 12 e, em seguida, outra div que ocupa 6 de 12.
Então vamos fazer isso agora.
Vamos adicionar uma div e então também adicionarei minha segunda divisão e agora são apenas dois dispositivos vazios.
Você não vai trabalhar.
Mas o que vou fazer é adicionar uma aula ao primeiro e isso parecerá uma coluna um pouco estranha, uma grande
seis e nós faremos o mesmo aqui.
A classe é igual a uma coluna de seis grandes.
Então, adicionaremos algum conteúdo aqui.
Eles vão apenas dizer seis grandes colunas.
Mesma coisa aqui.
E enquanto faço isso, vamos economizar e na verdade não veremos muito, não vemos a própria grade.
Então, para tornar isso mais claro, eu vou definir uma classe aqui em vez de uma tag de estilo.
O que eu vou fazer é definir uma classe.
Eu apenas chamarei de rosa e aplicarei essa classe em duas divs para que possamos vê-las.
Então, agora, eles são apenas brancos.
Sem fronteira.
Apenas um pouco de texto.
Mas se nós adicionarmos isso em.
Tão rosa.
E então queremos que o fundo seja cor-de-rosa e nós faremos uma beira roxa com um pixel sólido e
depois aplicaremos a classe rosa a estas duas divs.
Cada um ocupa seis unidades.
Agora vamos voltar e atualizar.
Aqui vamos nós.
Você pode ver que temos dois divs que ocupam exatamente metade do recipiente.
O recipiente começa aqui e aqui.
E dividimos em dois.
Então agora podemos voltar e brincar um pouco mais e vamos tentar adicionar uma terceira coluna.
E desta vez fará a coluna do meio oito unidades e depois a esquerda e a direita serão duas.
Então acabe e eu vou mudar esses números aqui.
Aqui vamos nós.
Terminaremos com uma boa coluna centralizada no meio e depois duas colunas menores à esquerda e a direita que
poderíamos usar para uma barra lateral ou algo assim.
Então, esse é um conceito muito básico subjacente a todo o sistema de grade do bootstrap.
Temos 12 unidades em todo o recipiente em que estamos trabalhando e podemos designar essas
12 unidades da forma que quisermos.
Então, poderíamos fazer 12 colunas individuais cada uma de uma coluna grande e poderíamos fazer
isso 12 vezes assim.
Certifique-se de não perder a contagem.
Aqui vamos nós.
E então vamos nos livrar desses dois por agora.
E se eu estivesse fresco, você verá em uma linha, temos 12 colunas de tamanho uniforme.
Cada um ocupa uma unidade e, em seguida, eu também vou mostrar que podemos adicionar outras linhas.
Então, vamos fazer isso agora, a classe div é igual à linha e simplesmente vai abaixo da primeira linha que temos.
Então, dentro deste, vamos fazer div.
A classe é igual à coluna Dasch grande e vamos fazer quatro.
Então, vamos dividi-lo em três unidades de tamanho uniforme.
Então, a coluna para ela é assim.
E vamos dar uma olhada agora e você pode ver que não aplicamos a classe rosa, mas temos três colunas
de tamanho uniforme que caem abaixo das 12 colunas de tamanho uniforme criadas.
Então, podemos adicionar a classe rosa apenas para facilitar a visualização do que está acontecendo.
E nós vamos lá.
Então, este é apenas um exemplo simples.
Você realmente não teria essas caixas rosa provavelmente em nosso site.
Mas, como você pode ver aqui, temos uma grade onde temos linhas e cada linha tem quatro colunas em cruzamento.
Cada um tem três unidades de largura ou aqui neste site criativo da Tim.
Temos três colunas em cada uma das quatro unidades de largura.
Mesma coisa aqui.
Três colunas estão por aqui.
Temos quatro colunas.
Cada um tem três unidades de largura.
Então, esse é o muito básico da grade no próximo vídeo.
Falaremos sobre como tornar a grade reativa e ter layouts diferentes em diferentes tamanhos.
Neste momento, estamos trabalhando com uma coluna grande.
tamanhos e veremos aqueles no próximo vídeo e também veremos como podemos escrever grades aninhadas
onde podemos adicionar outra linha dentro de qualquer uma dessas colunas e dividir isso em mais 12 peças.
Eu expliquei com um grande meio e há outros três