Aprendi Bootstrap há alguns dias e resolvi o sistema de grade. Se houver algum erro, sinta -se à vontade para corrigi -los.
Resumo: O sistema de grade desenvolveu páginas da Web responsivas para terminais PC, PAD e móvel, e existem diferentes soluções baseadas em diferentes resoluções de tela.
(0,1, o tamanho do dispositivo de tela é superior a 1200px Selecione Col-LG
(0,2. O tamanho do dispositivo de tela está entre 970px e 1200px selecione col-md
(0,3. O tamanho do dispositivo de tela está entre 768px e 970px selecione col-sm
(0,4. O tamanho do dispositivo de tela é menor que 768px selecione col-xs
1. O sistema de grade divide a página em 12 colunas (até 12 colunas), como segue :
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width de dispositivo, escala inicial = 1, maxinum-scale, user-scalable = note"> <title> Raster </scale Sistema <//Raster </1, sistema de title> <blitel> <bitlelable "= não-scalable"> href = "biblioteca/bootstrap.min.css"> <yoy> .a {altura: 50px; borda: 1px vermelho sólido; Antecedentes: rosa; } </style></head><body> <div> <div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>3</div> <div>9</div> </div> </div> </div> </div> </div> <script src = "biblioteca/jq.js"> </script> <script src = "biblioteca/bootstrap.min.js"> </script> </body> </html>(2.1, col-md-1 é uma coluna, com um total de 12 colunas cobertas com uma "linha horizontal". O número que segue após o MD é o número de colunas atribuídas (collg, col-sm, col-xs é o mesmo)
3. Sob dispositivos com diferentes resoluções de tela, a página apresentada é a "página de barras de formato raster" correspondente, realizando assim um layout responsivo, como segue :
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width de dispositivo, escala inicial = 1, maxinum-scale, user-scalable = note"> <title> Raster </scale Sistema <//Raster </1, sistema de title> <blitel> <bitlelable "= não-scalable"> href = "biblioteca/bootstrap.min.css"> <yoy> .a {altura: 50px; borda: 1px vermelho sólido; Antecedentes: rosa; } </style></head><body> <div> <div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> </div> </div> </div> <script src = "Library/jq.js"> src = "biblioteca/bootstrap.min.js"> </sCript> </body> </html>(3.1. O código acima mostra que, quando o tamanho do dispositivo de tela é superior a 1200px, uma linha horizontal possui quatro colunas, uma coluna grande possui três colunas pequenas e a coluna pequena possui um total de 12 colunas.
(3.2, indicando que quando o tamanho do dispositivo de tela está entre 970px e 1200px (você pode primeiro olhar para o navegador que encolheu esse estágio), existem três colunas em uma linha horizontal e quatro colunas em uma coluna grande, com um total de 12 colunas.
(3.2, indicando que quando o tamanho do dispositivo de tela está entre 768px e 970px (você pode primeiro olhar para o navegador que encolheu esse estágio), existem duas colunas grandes em uma linha horizontal e seis pequenas colunas em uma coluna grande, com um total de 12 colunas.
(3.2, indicando que quando o tamanho do dispositivo de tela é inferior a 768px (você pode primeiro olhar para o navegador que encolheu esse estágio), há uma grande coluna em uma linha horizontal e uma coluna grande possui doze pequenas colunas, com um total de 12 colunas.
4. Offset da coluna, nidificação e posições de troca no sistema raster
(4.1, deslocamento da coluna
<div> <div> 8 </div> <div> 3 </div> <!-Compensações de colunas uma a uma à direita-> </div>
(4.2, ninho
<div> <!-Nesting-> <div style = "preenchimento: 0;"> <div> </div> <div> </div> <div> </div> </div> <div> 3 </div> </div>
(4.3, posição de troca
<div> <!-Swap Position-> <div> 9 </div> <!-empurre, mova para a direita-> <div> 3 </div> <!-puxe, mova para a esquerda-> </div>
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
Este artigo usa os casos mais simples para analisar os principais pontos de layout envolvidos no caso, na esperança de ser útil para o aprendizado de todos.