Bootstrap e Foundation são duas das minhas estruturas favoritas de front-end, especialmente em protótipos para sites de desenvolvimento rápido. Todos eles fornecem componentes prontos para uso, acelerando meu fluxo de trabalho. Exceto por algumas pequenas diferenças, a maioria de suas características básicas me parece ser semelhante.
Neste artigo, apresentarei a construção básica de suas grades. Primeiro, mostrarei como eles são construídos, descrevem seus principais componentes e como eles mostram diferenças no tamanho de telas diferentes. Vou ajudá-lo a adicionar conhecimento por meio de uma prática de exemplo da vida real.
Vamos começar juntos!
Comparação 1: Comparação de consultas de mídia
Antes de analisar as estruturas varridas do bootstrap e da fundação, vamos dar uma olhada nos pontos de interrupção que eles fornecem para o layout da resposta. É isso que cada quadro fornece para definir o número de rasters disponíveis.
O Bootstrap especifica 4 pontos de interrupção de consulta de mídia baseados em PX. Exibido da seguinte forma:
A fundação contém 5 consultas de mídia baseadas em EM. Eles são mostrados na tabela a seguir:
Para lhe dar uma maneira de entender como as consultas da mídia funcionam, sugiro que você confira a demonstração do Bootstrap e as demos da fundação relacionadas. Mas se você ainda estiver confuso, a próxima parte explicará tudo.
Nota: a malha da fundação e as telas super grandes são desativadas por padrão. Se você deseja usá-los, deve "cancelar" e definir os valores das duas variáveis $ incluem classes de grade-grade-html-html e $ incluir-xl-html-block-grid-classes para true. Você pode encontrar essas variáveis na seção _settings.scss.
Comparação 2: estrutura da grade
O Bootstrap e a Foundation fornecem uma primeira grade em movimento de 12 colunas, composta por linhas e colunas. As colunas são aninhadas em linhas. A soma das colunas em cada linha é de 12 colunas. As linhas também podem ser aninhadas em colunas.
Essas duas estruturas contêm muitas classes predefinidas que você pode usar para definir o tamanho de uma coluna. Como mencionado acima, o Bootstrap contém 4 pontos de interrupção da consulta de mídia e a fundação contém 5. Para cada grade, eles têm prefixos de classe diferentes que podem ser usados para definir o tamanho da coluna (consulte as duas tabelas acima).
As linhas de grade de bootstrap também requerem elementos encapsulados. Isso deve ter uma classe de contêiner ou fluido de contêineres. A classe de contêiner em um elemento tem um valor fixo e seu valor depende da janela (consulte a primeira tabela acima), enquanto a classe fluida de contêiner em um elemento se estende a toda a largura da janela do navegador.
Comparação 3: coluna! = 12?
É possível que o número de colunas em um sistema de grade não seja igual a 12. Nesse caso, o bootstrap flutua a última coluna à esquerda e a fundação o flutuará para a direita. Se você deseja substituir o comportamento padrão da fundação, adicione a classe .nd na última coluna.
Comparação 4: classe funcional
Ambas as estruturas fornecem classes adicionais que permitem definir sua malha com muita flexibilidade.
As aulas visíveis permitem que você opte por mostrar ou ocultar conteúdo nas telas de um tamanho específico. A classe Offset permite centralizar colunas incompletas ou ajustar o espaçamento entre elas. Obviamente, existem outras classes que podem especificar a ordem das colunas de acordo com diferentes dispositivos.
Comparação cinco: blocos de grade
Além da grade padrão, a fundação suporta outro recurso raster, a saber, blocos de grade. Ele permite criar colunas do mesmo tamanho com a menor marca. Para usá -lo, defina a linha como o elemento UL e as colunas na linha como o elemento Li. Em seguida, especifique o tamanho da coluna aplicando a classe relevante ao elemento UL (consulte a segunda tabela acima para obter detalhes).
Neste momento, você pode se perguntar: qual é a diferença entre uma grade comum e um bloco de grade? Vamos dar uma breve olhada nas duas diferenças entre eles:
Ao contrário da grade padrão, (bloqueios de grade) cada linha possui uma largura máxima aplicada, para que toda a janela do navegador seja sempre coberta.
Os blocos de malha só podem ser usados em projetos de tamanho igual.
Usando a grade
Agora que temos um bom entendimento das grades dessas duas estruturas, vamos ver como podemos usá -las para criar uma página de bootstrap e a página de fundação correspondente.
A captura de tela a seguir mostra o primeiro layout que vamos construir:
Começando com o bootstrap, definimos um elemento com a classe de contêiner. Conforme discutido anteriormente, esta classe definirá uma largura fixa para esse elemento de acordo com o tamanho da tela (consulte a tabela no bootstrap para obter detalhes). Em seguida, adicionamos um elemento com a linha de classe.
Agora estamos prontos para configurar nossas colunas. Para telas grandes, queremos 4 colunas do mesmo tamanho. Então, definimos 4 elementos div, cada um com a classe col-lg-3. No entanto, para dispositivos pequenos e médios, preferimos ter duas colunas em cada linha. Por esse motivo, usamos a classe Col-SM-6. Finalmente, para a tela ultra-pequena, queremos que as colunas sejam empilhadas. Esse é o comportamento padrão de mover a primeira estrutura; portanto, não há necessidade de definir a classe COL-XS-12.
Seu HTML se parece com o seguinte:
<div> <div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> </!
Vamos continuar olhando para a fundação.
A malha da fundação é muito semelhante à malha da bootstrap, mas é um pouco mais simples. Primeiro, temos que definir um elemento com a classe de linha, que conterá nossas colunas. Esta classe define a largura máxima do elemento a 62.5Rem (1000px). Em seguida, adicionamos a coluna. Para conseguir isso, especificamos que cada elemento div possui uma classe de coluna ou colunas e, em seguida, usamos a classe raster correspondente (consulte a tabela na fundação acima para obter detalhes) para definir sua largura. Da mesma forma, para dispositivos pequenos, não precisamos definir a classe 12.
Este é o HTML baseado no Raster Foundation :
<div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <//
Nesse momento, acho que você começou a se familiarizar com o sistema de grade dessas duas estruturas. Mas talvez outro exemplo possa ajudá -lo a entender mais claramente.
No próximo exemplo, vamos construir rodapé. O diagrama a seguir mostra o estilo que queremos:
Aqui, escolheremos um layout diferente para comparar com o exemplo anterior. Para telas com uma tela média e acima (ou telas com uma tela pequena e acima na grade de bootstrap), queremos exibir três colunas. No entanto, notamos que há uma linha aninhada na última coluna. Isso consiste em duas colunas. Definiremos sua largura para metade da largura da linha em todos os dispositivos. Finalmente, ajustamos a visibilidade das imagens que aparecem nas linhas aninhadas.
Aqui está o código no bootstrap:
<div> <div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <div> <a href = "#"> <p> Vamos conhecer e discussões </p> <i> </i> </a> </div <! </div> <!-.col-sm-4-> </div> <!-.row-> </div> <!-.Container->
Aqui está o código da fundação:
<div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <ul> <li> <a href = "#"> <p> Vamos conhecer e discussões </p> <i> </i> </a> </li> <li> <!-Conteúdo- .row ->
Nota: Se você deseja substituir blocos de malha, podemos usar a malha padrão da Foundation para criar linhas aninhadas.
para concluir
Se você quiser mais informações sobre o sistema de grade de bootstrap, pode conferir este artigo: "O bootstrap deve aprender todos os dias (layout)"
Finalmente, neste artigo, apresento a estrutura de malha de bootstrap e fundação. Então vimos em um projeto real como usar suas grades. Como você pode ver, todas as grades são semelhantes e podem ser definidas ainda mais.
Espero que gostem deste artigo. Talvez você possa aplicar o que aprendeu ao seu projeto. Para mais conteúdo de bootstrap, siga: "Tutorial de aprendizado de Bootstrap", obrigado por ler.
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.