O Bootstrap, do Twitter, é a estrutura de front-end mais popular no momento. O Bootstrap é baseado em HTML, CSS e JavaScript. É simples e flexível, tornando o desenvolvimento da Web mais rápido.
Pontos -chave para o aprendizado:
1. Os dispositivos móveis são preferidos
2. Recipiente de layout
3. Sistema de grade
Nesta lição, aprenderemos principalmente sobre o sistema de grade da Bootstrap e forneceremos um sistema de grade de streaming responsivo e móvel.
um. Os dispositivos móveis são preferidos
No projeto HTML5, fizemos o projeto móvel. Ele possui uma meta muito importante para definir a tela e a largura do quadro de dispositivos e se deve executar o escalonamento do usuário e a escala.
// A largura da tela é consistente com o dispositivo, o escalável inicial, o máximo escalável e a proibição de escala do usuário.
dois. Contêiner de layout
O Bootstrap requer um contêiner .Container para conteúdo de página e sistema de raster. Devido a atributos como preenchimento, essas duas classes de contêiner não podem ser aninhadas entre si.
// largura fixa <div> ... </div> // 100% de largura <div> ... </div>
Em um sistema raster, o navegador alocará automaticamente até 12 colunas à medida que o tamanho da tela aumenta ou diminui. Crie um layout de página combinando uma série de linhas e colunas. O princípio de trabalho é o seguinte:
1. "Linha" deve ser incluído no .Container (largura fixa) ou .Container-Fluid (100% de largura) para fornecer um alinhamento e preenchimento adequados.
2. Crie um conjunto de "colunas" horizontalmente através de "linha".
3. Seu conteúdo deve ser colocado na "coluna" e apenas a "coluna" pode ser usada como um elemento filho direto da linha.
4. Classes predefinidas como .row e .col-xs-4 podem ser usadas para criar rapidamente layouts de raster.
O mixin definido no código -fonte do bootstrap também pode ser usado para criar layouts semânticos.
5. Crie uma calha entre as colunas, configurando a propriedade de preenchimento para "coluna". Definindo valores negativos para elementos.
Assim, a margem compensa o preenchimento para o elemento .Container, que compensa indiretamente o preenchimento da "coluna" contida em "Linha".
6. A margem negativa é a razão pela qual o exemplo a seguir destaca o exterior. O conteúdo da coluna raster está organizado em uma linha.
7. Uma coluna em um sistema raster representa o intervalo que abrange, especificando valores de 1 a 12. Por exemplo, três colunas de largura igual podem ser criadas usando três .col-xs-4.
8. Se a "coluna" contida em uma "linha" for maior que 12, os elementos em que a "coluna extra" estão localizados serão organizados em outra linha como um todo.
9. A classe Grid é adequada para dispositivos com largura da tela maior ou igual ao tamanho do ponto de divisão e cobre a classe Grid para dispositivos de tela pequena. Portanto, a aplicação de qualquer classe .col-md-* Raster no elemento é adequada para dispositivos com larguras de tela maiores ou iguais ao tamanho do ponto de divisão e substitui a classe raster para dispositivos de tela pequena. Portanto, a aplicação de qualquer .col-lg-* no elemento não existe, o que também afeta o dispositivo de tela grande.
// Crie uma linha responsiva <div> <div> ... </div> </div> // Crie uma linha responsiva com até 12 colunas <div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> <div> 8 <///> </> </DIVN </DIVN </DIV> </12 </s> </20> </Div> </Div 8/Div 8 </12 </12 </s> </20> </Div> </Div [Div> 8 </12 </s> </sist> Show </Div> </div> </Div 8. Css.a {altura: 100px; cor de fundo: #eee; borda: 1px sólido #ccc;} // o número total de colunas é 12 e cada coluna é atribuída várias colunas <div> <div> <div> 1-4 </div> <div> 5-8 </div> <div> 9-12 </div> </div> <div> <div> 1-8 </div> <div> 9-12 </div> </div> <//9-12 </div> </div>> </div> 9-1Tabela de parâmetros raster
Como mostrado na figura acima, a camada mais externa do sistema de grade distingue quatro larguras de navegadores: tela ultra-pequena (<768px), tela pequena (> = 768px), tela média (> = 992px) e tela grande (> = 1200x). As larguras adaptativas do contêiner interno .Container são: automático, 750px, 970px e 1170px. Automático significa que, se você estiver na tela do telefone celular, exibirá totalmente uma linha.
// Ative todas as quatro telas categorias <div> <div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </miv> <//Div /Às vezes podemos definir compensações de coluna para manter uma lacuna no meio <div> <div> <div> 8 </div> <div> 3 </div> </div> </div> // também pode ser aninhado e o DIVN incorporado também é 12. // Você pode trocar duas colunas, empurrar para a esquerda e puxar para a direita <div> <div> <div> 9 </div> <div> 3 </div> </div> </div>
O exposto acima estão as informações relacionadas ao sistema de grade de bootstrap, espero que seja útil para todos!