✅ Aprendendo a usar o Bootstrap Grid

Índice

Coluna a
Coluna B
Coluna C
Coluna a
Coluna B
Coluna C

Bootstrap gerencia uma estrutura baseada em grade ou também conhecida como Rede, que nada mais é do que um layout na tela que nos ajuda a organizar nossos elementos, é como se dividíssemos a tela em linhas e colunas e a tratássemos como uma grande mesa.
Este tipo de manipulação leva-nos a pensar em designs de uma forma "única" e no momento em que temos um pouco mais de experiência no uso Bootstrap Vamos começar a ver tudo desta forma e assim ganharemos consistência e agilidade na nossa forma de trabalhar.
A primeira coisa a saber é que este design do Rede nos permite trabalhar de forma que possamos implementar visualizações móveis nativamente, isso é claro, a partir da versão 3 do Bootstrap, graças ao fato de que esta versão foi construída com o design móvel em mente.
Nas versões anteriores do framework, as classes tinham que ser especificadas diretamente para que nosso design tivesse a capacidade de se ajustar às resoluções dos dispositivos móveis, agora as diferentes classes do Rede eles fazem isso automaticamente.
Para tirar proveito desse recurso, devemos pensar do pequeno ao grande, ou seja, as classes que aplicamos devem ser sempre pensadas como as menores e então serão dimensionadas para outras resoluções, ou seja, se definirmos um classe sm (pequeno ou pequeno), automaticamente Bootstrap assume que esta é a expressão mínima e que pode então ser escalada para md (mediana) ou para lg (grande).
Antes de passar para exemplos mais práticos, devemos entender quais são as classes que podemos usar nas colunas de um Rede E também temos de saber para que caso cada um se aplica, desta forma quando desenhamos o nosso site podemos levar em consideração o menor dispositivo que queremos alcançar.
Com esta abordagem, podemos construir sites Compatível com dispositivos móveis, a importância que estão se tornando hoje para os buscadores e seus resultados, ajudando-nos assim além de fazermos bons sites a ganhar alguns pontos em nossa reputação SEO, com o mesmo trabalho, é claro.
Telas do telefoneÉ o menor dispositivo que, em teoria, pode navegar em nosso design, embora as resoluções dos telefones tenham sido gradualmente convertidas para Full HD, isso geralmente é para a extremidade mais alta, enquanto a faixa média e a faixa baixa que em teoria é a maioria mantém resoluções muito mais baixas. A aula de Rede que se aplica a esse caso é: col-xs- e se aplica a soluções menores que largura 768 pixels.
Telas de tabletEles são em tese o segundo menor aparelho, graças à sua maior proporção de tamanho o tablet oferece uma superfície de navegação maior, então podemos usar um pouco mais de conteúdo do que com uma tela de telefone, além de que geralmente a navegação em tablets é feita horizontalmente. A classe que se aplica a este dispositivo é col-sm- e se aplica a resoluções com larguras maiores que 768 pixels e abaixo 992 pixels.
Equipamento de tela pequenaGeralmente são aqueles pertencentes às gamas baixas de desktops e laptops, podem ser equipamentos com telas menores que 15 polegadas, ou que tenham mais de 10 anos de vida, são também os laptops que se destinam a estudantes e ao setor com baixa poder de compra, este é o setor majoritário. A classe que se aplica a este caso é col-md- e as resoluções de limite para a largura são maiores que 992 pixels e menos que 1200 pixels.
Equipamento de tela grandeAqui podemos classificar os equipamentos mais modernos, e também as telas de mais de 15 polegadas, nesta categoria estão entrando os novos equipamentos como ultra-portáteis, resolução 4K, ou QHD também onde vemos superfícies maiores que 1080p. Ao descartar as larguras que lidaremos aqui, são maiores que 1200 pixels, enquanto a próxima versão do Bootstrap provavelmente.
Já que conhecemos a teoria por trás do sistema Rede do Bootstrap, É bom começar a fazer sua aplicação prática, mas antes de ver o código devemos entender mais alguns conceitos, devemos sempre por convenção e melhores práticas usar um elemento com a classe recipiente, pois isso criará o contêiner conforme seu nome o indica para manter nossas diferentes colunas. O outro conceito que devemos saber é que sempre haverá 12 colunas, então as diferentes combinações que fazemos devem levar esse número em consideração.
No exemplo a seguir, vamos criar um código para um layout de 3 colunas grandes, vamos usar a classe col-md- e como queremos 3 colunas iguais ao dividir 12 por 3, obtemos o número 4, portanto, esse será o tamanho de cada uma de nossas colunas resultantes.
Vamos examinar o código sem mais delongas:

Bootstrap Grid

Exemplo de como usar colunas no bootstrap

Coluna a

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilita meu in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

Coluna B

Coluna C

A estrutura é muito simples, criamos um div com a classe recipiente, e dentro de um div com a classe fileira finalmente, dentro do último, criamos 3 divs com a classe col-md-4 Esta é a classe para telas pequenas para computadores não portáteis, e vemos como cunhamos o número 4, que indica que cada div deles é equivalente a 4 colunas do Rede. Vamos ver como fica quando executamos em nosso navegador:

PROLONGAR

Se notarmos, então temos 3 grandes colunas, mas o que acontece quando reduzimos o tamanho para uma resolução inferior ao mínimo da classe aplicada, já que as colunas vão simplesmente ser empilhadas uma em cima da outra como vemos em a seguinte imagem:

PROLONGAR

Embora isso não seja uma coisa ruim, às vezes não é o comportamento que queremos que nosso design tenha, para isso podemos incluir os comportamentos diretamente com as classes para as diferentes resoluções, vamos ver no código a seguir como alteramos as classes do colunas diferentes para obter um resultado diferente:

Bootstrap Grid

Exemplo de como usar colunas no bootstrap

Coluna a

Coluna B

Coluna C

Agora, se notarmos em nosso código que tudo permanece o mesmo, exceto para nossas classes, onde para as colunas A e B adicionamos a classe col-sm-6 e para a coluna C a classe col-sm-12, isso significa que quando a resolução for reduzida, as classes sm governarão, como podemos ver na imagem a seguir:

PROLONGAR

Vemos que no mesmo tamanho do primeiro exemplo, em vez de serem empilhadas, as colunas A e B ficam na mesma região, e a coluna C assume uma única linha para si mesma. Aqui vemos a grande utilidade de Rede especialmente com designs focados em serem responsivos e móveis.
Com isso terminamos este tutorial, onde aprendemos como o sistema de Rede do BootstrapClaro que isso é apenas a ponta do iceberg, há muito mais conteúdo que podemos explorar em outros tutoriais, mas com esse conhecimento básico podemos começar a ver como encaixar nossos designs de uma forma mais lógica e com menos esforço graças a o quadro.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo