O sistema de grade na estrutura de bootstrap divide o recipiente em 12 pedaços. Ao usá -lo, você pode recompilar o código -fonte menos/sass de acordo com a situação real para modificar o valor 12. Como o sistema de malha funciona na estrutura de bootstrap:
1. As linhas de dados (.rows) devem ser incluídas no recipiente para que possam dar alinhamento e preenchimento apropriados
<div> <div> </div> </div>
2. Você pode adicionar colunas (.Column) em linhas (.row), mas a soma das colunas não pode exceder o número total de colunas que são prejudicadas (como: 12)
<div> <div> <div> </div> <div> </div> </div>
3. O conteúdo específico deve ser colocado no contêiner da coluna (.Column) e apenas a coluna (.Column) pode ser usada como um elemento filho direto do contêiner da linha (.Row).
4. Crie o espaçamento entre as colunas definindo a distância interna (preenchimento) e depois compense a influência do preenchimento definindo valores negativos para a primeira coluna e a última pilha.
Há um efeito responsivo no sistema de grade de bootstrap, que possui quatro tipos de navegadores (tela ultra-pequena, tela pequena, tela média e tela grande), e seu ponto de interrupção é 768px, 992px, 1220px
O contêiner (.Container), para diferentes resoluções do navegador, possui diferentes larguras: automático, 760px, 970px, 1170px;
.Container {Right-Right: 15px; preenchimento-esquerda: 15px; Margem-direita: Auto; margem-esquerda: Auto; @media (min-lar: 768px) {.Container {width: 750px;}@mídia (ministro: 992px) { (Min-Width: 1200px) {.Container {Width: 1170px;}Recipiente de linha (.Row), divide as linhas do contêiner em 12 partes iguais, ou seja, colunas. Cada coluna possui preenchimento-esquerda: 15px e preenchimento-direito: 15px; Isso também faz com que o preenchimento-esquerda na primeira coluna e a direita na última coluna ocupe 30px da largura média.
COL-XS-1, .COL-MD-1, .COL-LG-1, .COL-XS-2, .COL-MD-2, .COL-MD-2, .COL-LG-2, .COL-XS-3, .COL-SM-3, .COL-MD-3, .COL-MD-3, .COL-SM-3, .COL-MD-3, .COL-MD-3, .COL-SM-3, .COL-MD-3, .COL-MD-3, .COL-SM-3, .COL-3 .col-md-4, .col-lg-4, .col-xs-5, .col-md-5, .col-md-5, .col-lg-5, .col-xs-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-6, .col-xs-7, .col-md-7, .col-lg-7, .col-xs-8, .col-md-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-md-9, .col-lg-9, .col-xs-10, .col-md-10, .col-md-10, .col-md-10, .col-lg-10, .COL-XS-11, .COL-MD-11, .COL-MD-11, .COL-MD-11, .COL-LG-11, .COL-XS-12, .COL-MD-12, .COL-MD-12, .COL-LG-12 {Position: Min-Hight: 1px; Padding-Right: 15px;O contêiner da linha (.Row) define valores de margem-esquerda e margem-direita de -15px, que são usados para compensar a distância interna esquerda da primeira coluna e a distância interna direita da última coluna, para que não haja espaçamento entre a primeira coluna e a última coluna e o contêiner (.
.row {margem -direita: -15px; margem -esquerda: -15px;}Uso básico
Como a estrutura de bootstrap usa diferentes estilos de grade para diferentes tamanhos de tela, vamos tomar a tela média (970px) como exemplo.
1. Combinação de colunas
A combinação de colunas é alterar o número para mesclar colunas (o número total de colunas não pode exceder 12), que é um pouco semelhante ao atributo colspan de uma tabela; O método de combinação de colunas envolve apenas duas características: flutuando em porcentagem de largura
<div> <div> <div> col-md-4 </div> <div> col-md-8 </div> </div> <div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </s> <di v> col-md-4 </div> </div> <div> <div> col-md-4 </div> </div> <div> <div> col-md-3 </div> <div> col-md-6 </div> <div> col-md-3 </div> </div>
Os efeitos são os seguintes:
Certifique -se de que todas as colunas flutuem
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-2 {.col-md-10,.Defina a largura de cada combinação de coluna
.col-md-12 {largura: 100%;}. col-md-11 {width: 91.66666667%;}. col-md-10 {width: 83.3333333333%;}. col-md-9 {width: 75%;}. 66.6666667%;}. Col-md-7 {Width: 58.333333333%;}. Col-md-6 {width: 50%;}. Col-md-5 {width: 41.66666667;}. {Width: 25%;}. Col-md-2 {Width: 16.666666667%;}. col-md-1 {largura: 8.33333333%;}Deslocamento da coluna
Às vezes, não queremos que duas colunas adjacentes estejam próximas, mas não queremos usar margem ou outros meios técnicos. Isso pode ser alcançado usando o deslocamento da coluna. Usando deslocamento da coluna, basta adicionar o nome da classe.col-md-offset-* no elemento da coluna (o asterisco representa o número de combinações de colunas a serem deslocadas). A coluna com este nome de classe será deslocada, como: Adicionar .col-md-offset-4 no elemento da coluna, indicando que a coluna está deslocada à direita por 4 colunas de largura.
<div> <div> <div> 1111 </div> <div> 1111 </div> <div> 333 </div> </div> <div> <div> deslocamento da coluna </div> <div> col-md-2 </div> <div> col-md-2 </div> </div> </div> </div>
Os efeitos são os seguintes:
Princípio de implementação:
Usando a margem de uma dobre, a esquerda, tantas margens para a esquerda quanto há compensações, você pode obter o máximo de margem à esquerda.
.col-md-offset-12 {margem-esquerda: 100%;}. col-md-offset-11 {margem-left: 91.6666667%;}. col-md-offset-10 {margin-left: 83.33333333%;}. {Margin-left: 66.66666667%;}. Col-md-offset-7 {margin-left: 58.33333333%;}. col-md-offset-6 {margin-left: 50%;}. {Margin-Left: 33.3333333333%;}. Col-md-offset-3 {margem-left: 25%;}. col-md-offset-2 {margin-left: 16.66666667%;}. 0;}Deve-se observar que, ao usar o colo-md-offset
Classificação da coluna
A classificação da coluna é alterar a direção da coluna e definir a distância flutuante. No sistema de grade de bootstrap, é adicionando nomes de classe. col-md-push-* e col-md-pull-*
<div> <div> <div> col-md-4 </div> <div> col-md-8 </div> </div> </div>
Os efeitos são os seguintes:
Col-MD-4 está à esquerda e Col-MD-8 está à direita. Se você deseja trocar as posições, precisará mover o Col-MD-4 para a direita por 8 colunas, ou seja, adicione o nome da classe.col-md-push-8; Ao mesmo tempo, você precisa mover o COL-MD-8 para a esquerda por 4 colunas, ou seja, adicione o nome da classe.col-md-pull-4.
O Bootstrap alcança efeitos de posicionamento apenas definindo a esquerda e a direita.
.col-md-PULL-12 {direita: 100%;}. col-md-pull-11 {direita: 91.66666667%;}. col-md-pull-10 {direita: 83.3333333333%;}. 66.66666667%;}. Col-md-Pull-7 {direita: 58.33333333%;}. Col-md-Pull-6 {direita: 50%;}. 33.333333333%;}. Col-MD-PULL-3 {DIREITA: 25%;}. COL-MD-PULL-2 {DIREITA: 16.66666667%;}. Col-md-Pull-1 {direita: 8.333333331;}. 100%;}. Col-md-push-11 {esquerda: 91.666666667%;}. Col-md-push-10 {esquerda: 83.3333333333%;}. 58.333333333%;}. Col-md-push-6 {esquerda: 50%;}. Col-md-push-5 {esquerda: 41.66666667%;}. 16.666666667%;}. Col-md-push-1 {esquerda: 8.3333333333%;}. Col-md-push-0 {esquerda: 0;}Nidificação
O ninho da coluna pode adicionar um ou fazer um contêiner de uma linha em uma coluna e, em seguida, inserir uma coluna neste contêiner de linha. Quando a largura do recipiente da linha (linha) no contêiner da coluna é 100%, é a largura da coluna externa atual.
<div> <div> <div>
Eu aninhei uma grade dentro
<div> <div> col-md-6 </div> <div> col-md-6 </div> </div> </div> <div> col-md-4 </div> </div> <div> <div> col-md-4 </div> </div> </div-md-4 </div> </div>
Eu aninhei uma grade dentro
<div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> </div> </div> </div> </div>
O conteúdo acima é o sistema de grade de bootstrap introduzido pelo editor. Espero que seja útil para todos!