Bootstrap 5 Sistema de grade | Explicado
Sistema de rede
O sistema de grade da Bootstrap divide a página em 12 colunas. Como no exemplo abaixo .A classe col é usada para fazer colunas e todo o sistema de grade depende disso .coll aula. Este sistema de grade é a melhor abordagem para empilhar o conteúdo horizontalmente e permitir que a utilização da página seja máxima.
Código
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
Para fazer layouts diferentes, usamos .linha e .col aula.
CLASSE COL SEM QUE TAMANHO
Se você não especificou o tamanho das colunas, .col Classe divide automaticamente a linha igualmente de acordo com o número de divs com .col Aulas nele.
Código
.col
.col
.col
Neste exemplo, eu só adiciono três divs com o .col classe sem especificar o número de colunas, mas o .col A classe fornece automaticamente a fusão de 4 colunas para cada div e abrange 12 colunas coletivamente.
CLASSE COM COM TAMANHO
Se os tamanhos das colunas forem especificados, então .CL Class divide a linha de acordo com o tamanho especificado de 0-12.
Código
.Col-4
.Col-6
.Col-2
Neste exemplo, eu adiciono três divs com .col classe e especifique o número de colunas como 4, 6 e 2. Agora essas três colunas ainda cobrem 12 colunas espaço, mas agora com tamanhos diferentes. Isso ajuda um usuário a gerenciar o conteúdo em uma página e utilizá -lo no máximo.
Exemplo 2
Este exemplo é para o problema em que o tamanho dos divs excede 12.
Código
.Col-4
.Col-6
.Col-5
Agora, neste exemplo, os 2 primeiros divs já cobrem 10 colunas seguidas, deixando o espaço para mais duas colunas, mas a terceira div vem com as colunas tamanho 5, o que resulta em mover a terceira div para a próxima linha para cobrir 5 colunas que sai 2 colunas espaço na primeira linha vazia. Portanto, para evitar esse tipo de problema, sempre divida as colunas de uma maneira que cobre 12 colunas coletivamente.
CLASSE COM com pontos de interrupção
.col A classe também é usada com diferentes pontos de interrupção para controlar a exibição de conteúdo em diferentes telas.
- .col-xxl
- .col-xl
- .COL-LG
- .col-md
- .COL-SM
Código
.col-md
.col-md
.col-md
No exemplo acima, três divs são criados usando .col-md A classe é agir como .col classe, mas a diferença entre simples .col classe e .col-md aula é essa .col Classe distribui colunas igualmente para cada div e depois age o mesmo em cada tamanho de tela, mas .col-md A classe também distribui colunas igualmente entre cada div, mas permanece o mesmo apenas em xxl, xl, lg e MD Tamanhos de tela, mas assim que fica abaixo do tamanho da tela média, todos os divs cobrem 12 colunas inteiras cada uma que resultam em fazer três linhas e empilhá -las verticalmente.
CLASSE COM com pontos de interrupção e tamanhos
.col A classe também é usada com diferentes pontos de interrupção para controlar a visão de conteúdo em telas diferentes, mas para ver essas classes em ação deve especificar seus tamanhos também.
- .col-*
- .col-xxl-*
- .col-xl-*
- .collg-*
- .col-md-*
- .COL-SM-*
Substitua * pelo número de 0-12.
Código
.COL-MD-4
.COL-MD-6
.COL-MD-2
No exemplo acima, eu me aplico .col-md-* Classe em três divs com o tamanho 4,6,2, pois mostrou que essa classe é aplicável na tela dupla extra grande (xxl), extra grande (xl), grande (LG) e média (MD) assim que o tamanho da tela Tela abaixo do meio (MD) Todas as divs redimensionam e cobrem 12 colunas cada uma que resultam em 3 linhas e cada linha é empilhada verticalmente. É assim que layouts dinâmicos e flexíveis são criados.
Conclusão
Para trabalhar em uma grade de bootstrap, use .linha classe e envolva -o .col classe se você deseja atribuir colunas iguais a cada div, mas se você deseja atribuir um número diferente de colunas a cada div, use .col- size (0-12) para divs como sua exigência. No entanto, se você deseja tornar o uso de layout mais flexível e dinâmico .col classe com pontos de interrupção (xxl/xl/lg/md/sm), além de especificar seus tamanhos (0-12) também .Col- BreakPoint-size.