Olá a todos, amigos! O Bootstrap 3 foi lançado em meados de 2013 e, ao longo dos anos, provou ser uma estrutura CSS conveniente e extensível para a criação rápida de layouts responsivos. Milhões de sites usam essa estrutura com sucesso e já estamos bastante acostumados com ela.
Legal
Gaguejar
No dia 18 de janeiro de 2018 aconteceu um acontecimento importante - o tão esperado Versão Bootstrap 4, com base no uso do modelo Caixa flexível para marcação, que atualmente já tem suporte para todos os navegadores modernos e é mais conveniente e flexível para os desenvolvedores do que o modelo de marcação clássico baseado em Float. Agora podemos dizer com total confiança que não é possível, mas DEVE ser digitado usando Flex!
Hoje vamos dar uma olhada mais de perto no trabalho com a grade do Bootstrap 4, comparando-a com a versão antiga ao longo do caminho. Esta lição será útil para você não apenas se você for um iniciante e estiver familiarizado com o Bootstrap, mas também se você for um desenvolvedor experiente e quiser aprender todas as regras e nuances de layout usando a grade Bootstrap 4 e as ferramentas Flexbox incluídas em isto.
A grade padrão no Bootstrap 4 é muito semelhante à 3ª versão, mas existem algumas diferenças importantes.
Na tabela de opções principais, podemos notar diferenças óbvias em relação à grade da terceira versão. O prefixo da classe “.col-xs-”, responsável pelas menores resoluções, foi removido e substituído por um prefixo simplificado “.col-”. Você pode pensar erroneamente que o prefixo “.col-” é responsável pelas resoluções mínimas dos dispositivos móveis, mas isso não é inteiramente verdade. Entre outras coisas, o prefixo “.col-” é uma das inovações mais importantes do Bootstrap 4. Esta é uma classe responsável por dispor automaticamente as colunas em qualquer resolução. Mas falaremos mais sobre isso mais tarde.
Para resoluções pequenas, o prefixo “.col-sm-” com media query de 576 pixels é o responsável. A largura do contêiner é 540 px. As resoluções médias começam em 768 pixels. Largura do contêiner - 720 px. Resoluções mais altas funcionam com resoluções de dispositivos de 992 pixels ou mais. Largura do contêiner - 960 px. E os maiores - de 1200 pixels. A largura do contêiner é fixada em 1140 px.
Observe que os valores máximos da media query possuem valores imprecisos com a parte fracionária "0,98" em pixels. Isso é perceptível ao escolher o método de layout Desktop First, onde a largura máxima da consulta de mídia é limitada. Por exemplo, ao compilar Sass “+media-breakpoint-down(lg)” obteremos “@media (largura máxima: 1199,98px)”. Aqui 0,02 pixels são liberados para iniciar a próxima consulta de mídia. Mantenha isso em mente. Nas próximas edições do "Jedi Layout 8" veremos este e muitos outros pontos desta lição usando um exemplo real.
Usando a nova classe genérica ".col", você pode especificar até 12 colunas em uma linha (pai de ".row"), cuja largura será calculada automaticamente dependendo do número de elementos e será igual.
Por exemplo:
Você também pode definir explicitamente a largura de uma coluna e deixar o restante automático.
EM neste exemplo o segundo elemento da terceira linha possui a classe ".col-6" e o segundo elemento da segunda linha possui a classe ".col-5", que ocupam o número correspondente de colunas em todas as resoluções de tela. A largura das colunas restantes é responsiva e calculada automaticamente, ocupando todo o espaço restante.
Você pode usar a classe "col-(breakpoint)-auto" para definir conteúdo com largura variável, dependendo do espaço ocupado pelo conteúdo da coluna. Onde breakpoint é o tamanho da tela (xl, lg, md ou sm).
Aqui vemos que as duas colunas centrais ocupam uma largura correspondente à largura do conteúdo, mas na primeira linha, graças à classe ".justify-content-sm-center" de ".row", toda a linha é centralizada e a largura total depende apenas da largura da coluna central, enquanto a segunda linha é esticada até a largura total disponível, mas a segunda coluna permanece fixa à largura do conteúdo.
Graças ao Bootstrap 4, você pode criar várias linhas (hífens) em uma linha. Isso pode ser implementado usando a classe “.w-100”, que é muito semelhante à tag “br” e essencialmente apenas agrupa as colunas em uma nova linha.
Observe que esta aulaé uma parte características adicionais Bootstrap 4, que são conectados ao projeto separadamente ao usar a versão Sass do projeto Bootstrap e estão localizados na pasta “scss/utilities”. Você também pode conectar outros plug-ins desta pasta ao seu projeto, conforme necessário.
Um recurso muito interessante do Bootstrap 4 é a capacidade de definir colunas universais que serão exibidas em todas as resoluções. Esta é a classe “.col” mencionada anteriormente. Além disso, você pode definir uma classe que indique o número específico de colunas que o conteúdo irá ocupar - são classes com o prefixo “.col-(número de colunas)”, por exemplo “.col-6” nos diz que o o conteúdo ocupará 6 colunas de 12. Nos casos em que não seja necessário especificar uma quantidade específica, você pode usar com segurança a classe universal “.col”.
Você pode usar o prefixo de classe ".col-sm-(número de colunas ocupadas)" para definir a grade base, exceto as menores resoluções. Em telas pequenas, as colunas dessa grade serão empilhadas umas sob as outras. Existem mais permissões - elas ocuparão tanto espaço quanto você definiu nas classes.
Aqui vemos a primeira linha em dispositivos com resolução superior a “sm”, ou seja, superior a 576 pixels. é dividido em 2 colunas - 8 e 4 de 12 de largura, respectivamente. A largura das colunas na segunda linha é calculada automaticamente, mas nas resoluções mais baixas essas colunas também se empilham umas sob as outras, graças à classe “.col-sm”.
Com Bootstrap você pode criar qualquer combinação de colunas ao criar uma grade. Para cada coluna, você pode definir qualquer comportamento em diferentes resoluções usando classes adaptativas. Aqui as diferenças da terceira versão estão apenas nos nomes das classes.
Bootstrap 4 é baseado em “flex” e nos dá todas as capacidades deste modelo, que estão disponíveis em classes simples e prontas. As possibilidades incluem alinhamento vertical e horizontal.
Além de controlar o alinhamento através do pai “.row”, você pode alinhar colunas dando-lhes as classes apropriadas:
Além disso, o Bootstrap 4 possui ferramentas para alinhamento horizontal de colunas usando o prefixo “.justify-content-” em “.row”.
Muitas vezes há situações em que é necessário remover margens entre colunas. Por exemplo, se você estiver criando uma galeria e os elementos precisarem ser colocados próximos uns dos outros, assim:
Para fazer isso, basta definir a classe adicional “.no-gutters” para o elemento “.row”.
Se uma linha (.row) for preenchida com um número total de colunas superior a 12, a próxima coluna será movida para uma nova linha.
Tudo aqui é igual à versão 3 do Bootstrap.
Você pode usar classes especiais com o prefixo ".order-" para definir a ordem dos elementos. Se você estiver familiarizado com o Flex-layout, essas regras serão familiares para você. Bootstrap 4 oferece a capacidade de definir a ordem dos elementos usando classes. Você pode definir o pedido diretamente (.order-1.order-md-2):
Ou você pode usar classes especiais que determinam a ordem do primeiro e do último elemento (.order-first, .order-last):
Por analogia com o Bootstrap 3, a versão 4 também tem a capacidade de deslocar colunas horizontalmente, mas isso é implementado de forma um pouco diferente e existem classes especiais para isso com o prefixo “.offset-”.
Você pode deslocar uma coluna para a direita usando as classes “.offset-md-*”, que aumentam o recuo à esquerda * pelo número de elementos. No exemplo abaixo, a classe ".offset-md-2" irá deslocar a coluna ".col-md-4" 2 colunas para a direita, o restante dos exemplos funcionam da mesma forma:
Você pode redefinir o deslocamento em todas as resoluções graças à classe “.offset-*-0”, onde * é sm, md, lg ou xl.
É bastante esperado que o Bootstrap 4 suporte aninhamento de elementos. Tudo funciona aqui da mesma forma que na terceira versão - para aninhar colunas dentro de outras, você precisa criar uma classe filha “.row” e aninhar colunas nela.
Vimos as principais características de trabalhar com a grade do Bootstrap 4. Se você quiser se familiarizar mais com todas as capacidades do framework, recomendo estudar a documentação no site oficial.
Na próxima lição, veremos como configurar a grade Bootstrap para seu projeto específico usando o exemplo do uso do modelo inicial OptimizedHTML 4. Ou seja, configurar, trabalhar com variáveis de recuos, pontos de interrupção, número de colunas e outras coisas.
O sistema de grade do Bootstrap permite até 12 colunas em toda a página.
Se não quiser usar todas as 12 colunas individualmente, você pode agrupá-las para criar colunas mais largas:
| intervalo 1 | intervalo 1 | intervalo 1 | intervalo 1 | intervalo 1 | intervalo 1 | intervalo 1 | intervalo 1 | intervalo 1 | intervalo 1 | intervalo 1 | intervalo 1 |
| intervalo 4 | intervalo 4 | intervalo 4 | |||||||||
| intervalo 4 | intervalo 8 | ||||||||||
| intervalo 6 | intervalo 6 | ||||||||||
| intervalo 12 | |||||||||||
O sistema de grade do Bootstrap é responsivo e as colunas serão reordenadas dependendo do tamanho da tela: em uma tela grande pode ficar melhor com o conteúdo organizado em três colunas, mas em uma tela pequena seria melhor se os elementos do conteúdo estivessem empilhados no topo dos outros.
Conselho: Lembre-se de que as colunas da grade devem somar até doze linhas. Além disso, as colunas serão empilhadas independentemente da janela de visualização.
O sistema Bootstrap Grid possui quatro classes:
As classes acima podem ser combinadas para criar layouts mais dinâmicos e flexíveis.
Conselho: Cada classe é ampliada, portanto, se você quiser definir a mesma largura para XS e SM, basta especificar XS.
Algumas regras de grade do sistema Bootstrap:
Abaixo está a estrutura básica da grade do Bootstrap:
Então, para criar um layout, você precisa criar um container (
A tabela a seguir fornece um resumo de como o sistema Grid do Bootstrap funciona em vários dispositivos.
| Muito pequeno <768px |
Pequeno >=768px |
Médio >=992px |
Grande >=1200 pixels |
|
|---|---|---|---|---|
| Prefixo de classe | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Adequado para | Telefones | Comprimidos | Laptops pequenos | Laptops e desktops |
| Comportamento da grade | Horizontal em todos os momentos | Recolhido para iniciar, horizontal acima dos pontos de interrupção | Recolhido para iniciar, horizontal acima dos pontos de interrupção | |
| Largura do contêiner | Nenhum (automático) | 750 px | 970px | 1170 px |
| # de colunas | 12 | 12 | 12 | 12 |
| Largura da coluna | Auto | ~62px | ~81px | ~97px |
| largura da calha | 30px (15px em cada lado de uma coluna) | 30px (15px em cada lado de uma coluna) | 30px (15px em cada lado de uma coluna) | |
| Nestable | Sim | Sim | Sim | Sim |
| Deslocamentos | Sim | Sim | Sim | Sim |
| Ordenação de colunas | Sim | Sim | Sim | Sim |
Os capítulos seguintes mostram exemplos de sistemas Grid para vários dispositivos.
O principal desenvolvimento de um site para um designer de layout começa com construção correta grades do site. Se você estiver usando o Bootstrap 3, entender a grade do framework é essencial. Nesta breve nota tentarei considerar as principais nuances ao usar grades do Bootstrap. O artigo fornece principalmente uma tradução da documentação do Bootstrap Grid, mas também contém algumas de minhas adições.
Bootstrap requer um elemento de empacotamento para envolver o conteúdo do site e se tornar o lar de nosso sistema de grade. Para o seu projeto, você pode usar uma das duas opções.
Use .container para um contêiner responsivo de largura fixa (largura máxima do bloco de 1170px).
Use .container-fluid para um contêiner com uma largura que abrange toda a janela de visualização.
Então, vamos direto ao ponto.
As grades são usadas para criar layouts de página, organizando linhas e colunas que contêm conteúdo.
Noções básicas da grade de bootstrap:
Para entender todos esses princípios ainda mais facilmente, dê uma olhada na imagem abaixo:
As seguintes consultas de mídia são usadas para a grade (do arquivo LESS):
/* Dispositivos muito pequenos (telefones, menos de 768px) */ /* Não há consultas de mídia, pois esses estilos são o padrão no Bootstrap */ /* Dispositivos pequenos (tablets, 768px e superiores) */ @media (min- width : @screen-sm-min) ( ... ) /* Dispositivos médios (monitores, 992px e superiores) */ @media (min-width: @screen-md-min) ( ... ) /* Dispositivos grandes (monitores grandes, 1200px e superiores) */ @media (min-width: @screen-lg-min) ( ... )
| Dispositivos muito pequenos Telefones (<768px) |
Dispositivos pequenos Comprimidos (>=768px) |
Dispositivos médios Mesa (>=992px) |
Dispositivos grandes Mesa (>=1200px) |
|
|---|---|---|---|---|
| Comportamento da malha | Horizontal o tempo todo | Inicialmente compactado, horizontal acima do ponto de interrupção (aparentemente isso significa que quando a largura do dispositivo é menor do que a fornecida pela classe - consulte consultas de mídia) | ||
| Largura do contêiner | Nenhum (automático) | 750 px | 970px | 1170 px |
| Prefixo de classe | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # colunas | 12 | |||
| Largura da coluna | Auto | ~62px | ~81px | ~97px |
| Largura da lacuna | 30px (15px em cada lado da coluna) | |||
| O anexo | Sim | |||
| Viés | Sim | |||
| Ordenação de colunas | Sim | |||
Usando a classe .col-md-*, você cria uma grade que começa a empilhar (forma uma pilha) em dispositivos móveis; enquanto em dispositivos médios as células estão localizadas horizontalmente. Organize as colunas da grade em qualquer .row .
empilhado na horizontal
Altere uma grade de largura fixa para uma grade com largura que caiba em toda a janela do navegador, substituindo .container por .container-fluid .
Não quer que seus alto-falantes dobrem em dispositivos móveis? Aplique classes para dispositivos pequenos e médios às colunas: .col-xs-* , .col-md-* . Veja o exemplo abaixo para uma melhor compreensão de como funcionam várias classes.
Exemplo no site oficial - grid-example-mixed
Com base no exemplo anterior, crie um layout ainda mais poderoso e dinâmico com a classe tablet.col-sm-*.
http://getbootstrap.com/css/#grid-example-mixed-complete
Exemplo no site oficial - grid-example-mixed-complete
Se houver mais de 12 colunas em uma linha, cada grupo de colunas adicionais, como uma unidade independente, passará para uma nova linha.
Exemplo no site oficial - grid-example-wrapping
Com uma grade de quatro colunas, você pode se deparar com um problema em que, para os pontos de interrupção correspondentes, suas colunas não estão alinhadas corretamente porque uma coluna é mais alta que a outra. Para corrigir isso, use uma combinação da classe .clearfix e nossas classes utilitárias responsivas.
Exemplo no site oficial - grid-responsive-resets
Além da limpeza de colunas em pontos de interrupção responsivos, pode ser necessário redefinir deslocamentos, push ou pull. Veja isso em ação no exemplo da grade.
Desloque as colunas para a direita usando a classe .col-md-offset-*. Essas classes aumentam a margem esquerda de uma coluna em * colunas. Por exemplo, .col-md-offset-4 compensará .col-md-4 em quatro colunas.
Exemplo no site oficial - compensação de grade
Para aninhar seu conteúdo em uma grade existente, adicione um novo .row e defina as colunas .col-md-* dentro das colunas .col-sm-* existentes.
Exemplo no site oficial - aninhamento de grade
A ordem das colunas da grade pode ser alterada usando as classes .col-md-push-* e .col-md-pull-*.
Exemplo no site oficial - ordenação de coluna de grade
Do autor: Eu saúdo você. Em artigos anteriores, analisamos a conexão da estrutura Bootstrap e as primeiras etapas para trabalhar com ela. Chegou a hora de abordar o tema mais importante. Ou seja, como funciona a grade no Bootstrap. Compreender esse problema simplificará muito o layout do seu site.
Qualquer estrutura CSS possui sua própria grade. Na prática, se considerarmos por que uma estrutura CSS é criada em geral, então, em muitos aspectos, ela é apenas para uma grade, o que permite criar modelos responsivos de maneira rápida e fácil. Você mesmo pode criar os componentes restantes, como botões, tabelas, formulários e outras coisas, e geralmente isso é exatamente o que é necessário.
Claro que é bom que o Bootstrap tenha todos os componentes e você possa usar tudo pronto, mas antes de tudo estamos interessados na grade. Então, vamos dar uma olhada mais de perto na grade de bootstrap.
Portanto, a grade padrão deste framework possui 12 colunas. Na verdade, ao personalizar o framework, você pode definir qualquer outro valor, mas quase sempre ficará satisfeito com 12 colunas. O número 12 é divisível por muitos outros números, por isso é muito conveniente operar com ele.
Se você já criou tabelas usando tags HTML, a comparação a seguir será útil para você. Afinal, a grade do framework pode ser comparada a uma tabela normal.
Toda a grade deve estar localizada em um contêiner comum. Este deve ser um bloco com classe container ou container-fluid. A diferença entre as classes é que a primeira tem dimensões máximas fixas, nomeadamente 1170 pixels. Ou seja, a largura do site não será maior que este valor.
O contêiner-fluido é um recipiente totalmente de borracha que sempre se estende até 100% da largura da janela; portanto, se você tiver um local totalmente de borracha, precisará exatamente desse recipiente. Se estamos falando de tabelas, então elas também têm seu próprio contêiner global – a tabela.
Dentro deste container deverá haver outro bloco com a classe row, ou seja, uma linha da grade. E novamente, se compararmos com tabelas, a tag tr é responsável por exibir uma linha da tabela. As linhas da grade e as linhas da tabela são muito semelhantes porque em ambos os casos elas simplesmente atuam como contêineres para o conteúdo principal - elas não contêm nenhum conteúdo e não aplicam estilos a elas.
Por exemplo, se estamos falando de um site simples, podemos dividi-lo em três linhas - o cabeçalho do site, um bloco para o conteúdo principal e uma coluna lateral e rodapé. Observe que colocamos o conteúdo e a barra lateral em uma linha, porque isso é verdade.
Na própria linha existem células ou colunas diretamente, como é comumente dito ao codificar no Bootstrap. A coluna possui uma classe col-x-x, onde o primeiro x é a designação do dispositivo e o segundo é o número de colunas de 1 a 12. Veremos agora como isso funciona. Se você conseguir entender isso, também entenderá rapidamente por que é tão fácil criar sites responsivos com Bootstrap.
Assim, ao criar a grade, os desenvolvedores do framework identificaram 4 tipos principais de dispositivos com base na largura da tela. Você pode encontrar uma boa tabela com uma lista de classes para a grade na documentação russa, localizada aqui - http://www.oneskyapp.com/ru/docs/bootstrap/css#grid.
Aqui está uma captura de tela desta tabela. Portanto, vemos que para os dispositivos menores, aqueles com largura de tela inferior a 768 pixels, o prefixo da classe é col-xs- ou, se descartarmos col, apenas xs. Em seguida vêm sm (dispositivos pequenos, largura de 768 a 991 pixels), md (dispositivos médios, largura de 992 a 1199 pixels) e dispositivos grandes, com largura superior a 1200 pixels.
Como tudo funciona? Análise com exemplos
Você pode não entender nada ainda, mas tudo bem. Agora sugiro que você pratique: abra um editor de código, um navegador e comece a escrever código. Naturalmente, antes de fazer isso, conecte o framework Bootstrap ao arquivo html; esse assunto foi discutido em detalhes em artigos anteriores.
Então, vamos dar uma olhada neste trecho de código:
< div class = "container" > < div class = "row" > < div class = "col-md-3 col-sm-6" >Primeiro< / div > < div class = "col-md-1 col-sm-6" >Primeiro< / div > < / div > < / div > |
Se você leu com atenção o texto anterior, já entendeu que agora estamos criando nossos primeiros blocos na grade. Colocamos 1 linha na classe contêiner e, por sua vez, 2 blocos.
Como funcionam aulas como col-x-x? É muito simples, basta abrir o navegador e ver o resultado. Aliás, o resultado não será visível, pois não estilizamos nossos blocos de forma alguma. Vamos consertar isso. Este código pode ser inserido em style.css, que você mesmo criará e conectará:
div( plano de fundo: #8CC7D9; borda: 1px sólido #6B6ACD; )
div[class^=col]( plano de fundo: #8CC7D9; borda: 1px sólido #6B6ACD; |
Ótimo, aqui está o que vemos no navegador:
Observe que estou visualizando o resultado no meu computador, que possui uma largura de tela superior a 1200 pixels, o que significa que o Bootstrap o classifica como um dispositivo grande.
Assim, o primeiro bloco ocupa 25% da largura do contêiner (se 12 colunas são consideradas 100% da largura, então 3, respectivamente, são 25%). Bem, o segundo é cerca de 8-8,5%, não precisamos de cálculos exatos. Os 66% restantes da largura do contêiner estarão vazios. Claro, você não vê isso na captura de tela, pois simplesmente não consigo encaixar uma captura de tela da tela inteira no artigo, pois é muito grande, por isso aconselhei você a repetir tudo depois de mim.
Agora vamos verificar como se comportam os blocos com largura inferior a 992 pixels. Comece a estreitar a janela. No Google Chrome, após pressionar F12 enquanto estreita, você verá no canto superior direito a largura exata da janela.
Bem, provavelmente usarei o navegador Internet Explorer. É assim que os blocos ficam com largura um pouco maior que 768 pixels, ou seja, em telas pequenas.
Como você pode ver, em vez de 25% e 8%, cada bloco agora ocupa exatamente 50% da largura da linha. E tudo graças a estas instruções:
col-md-3 col-sm-6 col-md-1 col-sm-6
coluna - md - 3 coluna - sm - 6 coluna - md - 1 coluna - sm - 6 |
Ou seja, com a ajuda dessas classes, parece que estamos dizendo ao bootstrap: em dispositivos médios e grandes, dê ao primeiro bloco uma largura de 3 colunas em 12, e o segundo - 1 em 12. Mas nos pequenos, por favor mostre ambos os blocos em 50% da largura da linha.
Mas o que acontecerá nas telas menores? Aqui estreitei completamente a janela, como se estivéssemos visualizando o site por um telefone:
Estrutura Bootstrap 4. Início rápido
Aprenda o básico do Bootstrap 4 em exemplo prático layout do blog do zero
Como você pode ver, as instruções válidas para dispositivos pequenos foram canceladas para os extrapequenos e cada bloco passou a ocupar 100% da largura da linha. Lembre-se que este é o comportamento padrão dos blocos ocuparem 100% da largura do seu contêiner.
De tudo isso decorrem várias conclusões, você pode relê-las várias vezes, porque entender essas coisas é extremamente importante:
Se definirmos, por exemplo, col-sm-6, então o bloco manterá essa largura tanto no md quanto no lg, se nada for especificado para esses dispositivos.
Vejamos o mesmo exemplo (col-sm-6). Mas no xs, ou seja, em dispositivos extrapequenos, a largura do bloco será de 100%, não de 50%. Ou seja, a herança da largura especificada ocorre apenas para dispositivos grandes, mas em nenhum caso para dispositivos menores. Por exemplo, se você escrever a seguinte classe: col-lg-6, então o bloco terá essa largura apenas em telas maiores que 1200 pixels. Em dispositivos md, sm, xs, haverá uma largura diferente.
Você pode especificar mais de uma classe para um bloco. Por exemplo, col-xs-6 col-md-4. Tente responder mentalmente qual será a largura do bloco em diferentes dispositivos? Não leia mais)
E a resposta é:
Nas telas xs será 50%, ou seja, metade da largura do container
No sm é a mesma coisa – 50%. Por que? Como falei acima, o valor é herdado para dispositivos com larguras maiores.
No md o bloco ocupará um terço da largura.
Nas telas maiores também existe um terceiro. Novamente, o valor é herdado de md.
Mas o Bootstrap não limita você de forma alguma e você pode até escrever assim:
< div class = "col-xs-10 col-sm-8 col-md-6 col-lg-4"> < / div > |
Ou seja, em geral, para cada tipo de dispositivo, defina seu próprio display. Aqui você já pode entender qual será a largura do bloco em diferentes larguras de tela.
ATENÇÃO! Nunca permita uma situação em que você tenha mais de 12 colunas em uma linha, caso contrário seu site poderá desmoronar.
Mas o poder da grade Bootstrap não é apenas que você pode definir os blocos para serem exibidos de maneira diferente em larguras diferentes. Outra coisa é que você pode colocar a grade em qualquer bloco que desejar. Vejamos este código de exemplo:
< div class = "container" > < div class = "row" > < div class = "col-sm-8 col-md-6" > < div class = "row" > < div class = "col-sm-4 col-md-3" > 1 < / div > < div class = "col-sm-4 col-md-3" > 2 < / div > Mas podemos imaginar com calma que esse bloco também é um container, por que não? Na verdade, é isso que acontece no desenvolvimento de um site. Existe um contêiner comum para todo o site, um contêiner para conteúdo, barra lateral, cabeçalho, etc. Você pode imaginar que este bloco é um container para o bloco principal com texto do site, no qual colocamos, por sua vez, uma linha (certifique-se de seguir a estrutura no código - container - linha - células). Nesta linha, como você pode ver, existem 3 blocos e para cada um é especificado o comportamento em diferentes dispositivos. Essencialmente, temos uma grelha dentro da grelha principal! E esta grade aninhada também terá 12 colunas. Vou te contar ainda mais. Pode haver um número ilimitado de grades aninhadas. Por exemplo, estes três blocos são três cartões de produtos numa loja online. A estrutura do cartão em si também pode ser bastante complexa. Quem sabe, talvez você também esteja usando uma grade aninhada. Assim, a estrutura Bootstrap simplesmente elimina quaisquer obstáculos no layout de páginas da web: você pode criar modelos padrão simples e páginas complexas com milhares de elementos. Afinal, a grade não é apenas um contêiner geral para o local; o sistema de grade pode ser usado mesmo na marcação de blocos muito pequenos. Utilitários adaptativosOutro recurso incrível da estrutura são os utilitários adaptativos. Vou explicar agora. Certamente você não planeja exibir 100% dos elementos do site em dispositivos móveis que são visíveis em desktops grandes - você simplesmente não terá onde colocar tudo isso. Muitas vezes, em dispositivos móveis, eles removem completamente a coluna lateral, minimizam o menu, excluem alguns itens grandes elementos decorativos etc. No Bootstrap, tudo isso é muito fácil de fazer usando classes chamadas utilitários responsivos. Você pode visualizá-los na documentação aqui: http://www.oneskyapp.com/ru/docs/bootstrap/css#responsive-utilities
Aqui está uma lista dessas classes. Para ocultar um elemento em dispositivo desejado, você só precisa usar uma das quatro classes: hidden-xs|sm|md|lg. Gostaria de observar que o elemento ficará oculto apenas na largura de tela especificada; em todos os outros ele permanecerá visível. Se você precisar tornar um elemento visível em apenas um dos quatro tipos de dispositivos, é mais conveniente usar as classes visível-xs|sm|md|lg-block|inline|inline-block. além da palavra-chave e tipo de dispositivo, você também precisa especificar exatamente como exibir o elemento: como bloco, linha ou linha de bloco. Exemplos: visível-xs-inline – o elemento ficará visível apenas nas telas menores e será exibido como uma linha; visível-lg-block – só será visível nas telas maiores e será baseado em blocos; Os utilitários adaptativos permitem que você transforme seu site da maneira que desejar em todos os tipos de dispositivos. Use-os conforme necessário em seu layout. Outras opções de grade e resumoAmigos, há muito mais que pode ser escrito sobre a grade de bootstrap, porque cobrimos apenas aproximadamente metade da teoria. Você pode encontrar outras classes e exemplos na documentação. Por que eu recomendo fortemente para você? Porque teoria é teoria. Você pode ler este artigo junto com a documentação pelo menos 10 vezes, mas se não colocar todos os exemplos em prática, será praticamente inútil. Amamos a prática e acreditamos que ela é a chave para o sucesso. Mesmo que você não entenda algo da teoria, mais tarde, durante o layout de um layout real, você verá com seus próprios olhos como a grade funciona, e nenhum de vocês irá derrubar esse entendimento. Além disso, o curso não explica simplesmente a teoria e cria um layout simples. Nosso objetivo é nos tornarmos desenvolvedores profissionais, e para isso precisamos criar layouts de maior nível de complexidade, que é o que faremos na segunda parte do curso, criando uma loja online e landing page. Em geral, se você deseja dominar o Bootstrap em nível profissional ou não, depende de você. Meu objetivo era explicar o básico de como funciona uma grade no Bootstrap. Espero ter conseguido e que você leia esta publicação com benefícios. Em um futuro próximo, esperamos que você se junte ao círculo de desenvolvedores web profissionais que usam o Bootstrap para criar layouts de qualquer nível de complexidade!
Estrutura Bootstrap 4. Início rápido Aprenda o básico do Bootstrap 4 com um exemplo prático de criação de um blog do zero |
Neste artigo conheceremos as classes do framework Bootstrap 3, projetadas para criar um “esqueleto” (layout) adaptativo de um site.
A grade Bootstrap consiste em elementos de “construção”. Os principais são embalagem de recipientes, linhas , blocos adaptativos E classes utilitárias responsivas.
Essencialmente, uma grade é apenas uma lista de classes predefinidas com as quais você pode definir o comportamento necessário para blocos (elementos HTML) e usá-los para construir um layout de site adaptável específico.
Embrulhar recipiente- este é o elemento da grade de “construção” a partir do qual se inicia a criação do layout de toda a página ou parte dela (por exemplo, cabeçalho, menu principal, área principal, rodapé) dependendo da estratégia de desenvolvimento.
O contêiner no Bootstrap pode ser adaptativo-fixo ou borracha adaptativa.
Primeiro ( contêiner fixo adaptativo) é caracterizado pelo fato de ter uma largura constante dentro de um determinado intervalo de larguras de janela de visualização.
A tabela a seguir mostra a largura de um contêiner responsivo fixo para uma determinada largura da janela de visualização do navegador:
| Largura da janela de visualização | Largura do contêiner |
|---|---|
| <768px | A largura do contêiner é igual à largura da janela de visualização |
| >= 768px e<992px | 750 px |
| >= 992px e<1200px | 970px |
| <=1200px | 1170 px |
Além de definir a largura, o contêiner Bootstrap fixo responsivo também se centraliza horizontalmente em relação às bordas da página. Isso é feito usando as propriedades CSS margin-left:auto e margin-right:auto . Um contêiner responsivo fixo também define preenchimento esquerdo e direito de 15px (usando as propriedades CSS padding-left:15px e padding-right:15px) para o conteúdo colocado nele.
Um recipiente de borracha adaptativo difere de um fixo adaptativo porque ocupa toda a largura(100%) janela do navegador. Além disso, assim como um contêiner fixo adaptável, ele define um preenchimento esquerdo e direito de 15px para o conteúdo colocado nele.
Ao desenvolver o layout de um site, eles geralmente não usam aninhando um contêiner de wrapper Bootstrap dentro de outro.
Portanto, o primeiro elemento de “construção” da grade Bootstrap é o contêiner wrapper. Ele determina a largura do layout em diferentes viewports e também o centraliza (apenas contêiner responsivo fixo) em relação às bordas esquerda e direita da guia do navegador ou da área do cliente da janela.
O próximo elemento de construção é uma linha (uma div com uma classe de linha). Uma linha é um bloco especial usado apenas para envolver outros elementos de construção (blocos adaptativos). Seu principal objetivo é neutralizar o preenchimento positivo (15px à esquerda e à direita) de um contêiner wrapper ou bloco responsivo.
Um exemplo de formação de recuos internos:
Contêiner (+15px) -> linha (-15px) -> coluna (+15px) -> contêiner de conteúdo (+15px) -> linha (-15px) -> coluna (+15px) -> linha (-15px) -> col (+15px) -> content *col é um bloco responsivo
O exemplo mostra que não importa em qual bloco responsivo o conteúdo esteja, ele sempre terá a margem correta (ou seja, 15px à esquerda e à direita).
O próximo elemento de “construção” da grade Bootstrap é um bloco responsivo (div com classe col-?-?).
Blocos adaptativos são elementos de grade do Bootstrap que possuem uma ou mais classes col-?-? definidas para eles. . Esses blocos são os principais tijolos de “construção”; eles formam a estrutura necessária.
A largura do bloco adaptativo é definida em conexão com o tipo de dispositivo. Isso significa que o bloco responsivo pode ter larguras diferentes em dispositivos diferentes. É por isso que esse bloco é denominado adaptativo.
Como você define a largura de um bloco adaptativo? Definir a largura que um bloco responsivo deve ter em um dispositivo específico é definido por padrão como um número de 1 a 12 (o número de colunas Bootstrap). Este número é indicado em vez do segundo caractere? na classe col-?-? .
Este número (por padrão de 1 a 12) determina qual porcentagem da largura do elemento pai deve ter um bloco adaptativo.
Por exemplo, o número 1 - define a largura do bloco adaptativo igual a 8,3% (1/12) da largura do bloco pai. O número 12 é uma largura igual a 100% (12/12) da largura do bloco pai.
Além de especificar a largura do bloco adaptativo Você também deve especificar o tipo de dispositivo(em vez de 1 pergunta). A classe do dispositivo determinará em qual janela de visualização essa largura terá efeito. Bootstrap 3 possui 4 classes principais. Estes são xs (largura da janela de visualização >0), sm (largura da janela de visualização >= 768px), md (largura da janela de visualização >= 992px) e lg (largura da janela de visualização do navegador >=1200px).
Por exemplo, um bloco adaptativo com classe col-xs-12 col-sm-6 col-md-4 col-lg-3 terá uma largura de 100% (12/12) no dispositivo xs e 50% (6 /12) no dispositivo sm., no md - 33,3% (4/12), no lg - 25% (3/12).
Além disso, você deve prestar atenção ao fato de que os blocos adaptativos não limitam seu alcance. Aqueles. Se você especificou xs no atributo de classe de um bloco adaptativo, mas não especificou sm, então seu efeito se estenderá ao escopo deste intervalo.
Por exemplo, um bloco adaptativo com classe col-xs-6 col-lg-3 terá uma largura de 50% (6/12) em dispositivos xs, sm e md e 25% (3/12) em dispositivos lg.
Um bloco adaptativo, assim como um contêiner, define margens esquerda e direita positivas de 15px para o conteúdo que será colocado nele.
Em um layout adequado baseado em grade do Bootstrap, um bloco responsivo deve sempre ter uma linha como pai.
Por exemplo, vamos dividir o bloco em 3 colunas iguais, que serão exibidas verticalmente em xs e horizontalmente em sm e acima:
Por exemplo, vamos calcular a largura do conteúdo disponível para o primeiro e segundo blocos:
| Pontos de verificação | Largura disponível 1 bloco | Largura disponível 2 blocos |
|---|---|---|
| 320 px - 749,98 px | de 290px (320px - preenchimento (30px)) a 719,98px (749,98px - preenchimento (30px)) | |
| 750 px - 969,98 px | 720px (750px - preenchimento (30px)) | |
| 970 px - 1169,98 px | 616,7px (970px*8/12 - preenchimento (30px)) | 293,3px (70px*4/12 - preenchimento (30px)) |
| 1170px e mais | 750px (1170px*8/12 - preenchimento (30px)) | 360px (1170px*4/12 - preenchimento (30px)) |
Os blocos adaptativos estão localizados no elemento pai, um após o outro, em linhas. Blocos adaptativos com um número total de colunas não superior a 12 (por padrão) são colocados em uma linha. Aqueles. blocos que não cabem na primeira linha são colocados na próxima linha, etc.
Como os blocos adaptativos são organizados? 
No Bootstrap 3, os blocos responsivos são flutuados (float:left). Isso precisa ser levado em consideração ao criar o layout da sua página web.
Antes de um bloco que deve começar em uma nova linha, você deve colocar um elemento div vazio com a classe clearfix. Ele também precisa ser ocultado para dispositivos nos quais esta ação não precisa ser executada. O bloco é ocultado usando as classes correspondentes fornecidas abaixo.
Os blocos flutuantes também possuem um recurso. Por exemplo, se no exemplo acima a altura de 1 bloco for maior que 2 blocos. Então o 3º bloco não ficará localizado na nova linha, mas “grudará” no lado direito do 1º bloco.
Para evitar isso, você precisa adicionar um bloco com a classe clearfix e torná-lo visível para os dispositivos necessários (por exemplo, em md e lg):
O princípio básico da criação de um layout é aninhar alguns blocos adaptativos dentro de outros. Além disso, sua largura é sempre um parâmetro relativo, definido como uma porcentagem (pelo número de colunas) da largura do bloco pai. Aqueles. em qualquer nível de aninhamento, por exemplo, a largura de um bloco adaptativo de 6 colunas é sempre 50% (6/12*100%) da largura do elemento pai.
Por exemplo, vamos dividir um determinado bloco (o principal) em 4 blocos (2 na primeira linha e 2 na segunda). Para simplificar, criaremos um layout não responsivo:
Vamos criar um layout de 3 blocos (3 x 2):
É fácil perceber que a marcação do bloco adaptativo aninhado é realizada da mesma forma que o bloco principal. Isso significa que não importa o nível de aninhamento de um bloco, seu layout é criado de acordo com as mesmas regras.
Bootstrap possui classes responsivas (col-?-offset-?) com as quais você pode mover um bloco um certo número de colunas para a direita. Primeiro? deve ser substituído pelo tipo de dispositivo (xs, sm, md ou lg). Segundo? pelo número de colunas.
Por exemplo, vamos definir o bloco em dispositivos md para ter 8 colunas de largura e posicioná-lo no centro da linha (ou seja, movê-lo 2 colunas para a direita):
Além de ferramentas para deslocamento adaptativo de blocos, o Bootstrap 3 também possui classes especiais com as quais você pode alterar a ordem dos elementos dentro de uma linha.
Bootstrap 3 contém classes adaptativas (utilitárias) que permitem controlar a visibilidade dos elementos dependendo do tipo de dispositivo.
Além de especificar o dispositivo (xs, sm, md, lg) no qual o bloco ficará visível, você também deve especificar como ele deverá ser exibido neste dispositivo. As opções possíveis são inline , block e inline-block .
| Aula | Descrição |
|---|---|
| visível-xs-? | Torna o elemento visível apenas em dispositivos com tela muito pequena xs (largura da janela de visualização<768px). На других устройствах эти элементы не отображаются. |
| visível-sm-? | Torna o elemento visível apenas em dispositivos com tela sm (largura da janela de visualização >=768px e<992px). На других устройствах эти элементы не отображаются. |
| visível-md-? | Torna o elemento visível apenas em dispositivos com tela md (largura da janela de visualização >=992px e<1200px). На других устройствах эти элементы не отображаются. |
| visível-lg-? | Torna o elemento visível apenas em dispositivos com tela LG (largura da janela de visualização >=1200px). Esses itens não são exibidos em outros dispositivos. |
Em vez de um sinal? você deve especificar block , inline ou inline-block . Aqueles. especifique como este elemento deve ser exibido.
Por exemplo, adicionar a classe visível-md-block a um elemento significará que ele só será exibido em dispositivos que possuem uma janela de visualização md (largura da janela de visualização >=992px e<1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;).
Nota: Essas classes também podem ser usadas juntas para tornar os elementos visíveis em vários dispositivos. Por exemplo, se você aplicar as classes visível-xs-inline e visível-md-inline a um elemento, isso o tornará visível em dispositivos de tela pequena e média. Este elemento será exibido como inline (CSS: display:inline;).
Além dessas, o Bootstrap 3 também possui classes com efeito contrário. Eles podem ser usados para ocultar elementos em determinados dispositivos.
Essas classes também podem ser usadas juntas para tornar um elemento invisível em vários dispositivos.
Por exemplo, um elemento com as classes hidden-xs e hidden-sm não será visível em 2 dispositivos (xs e sm) ao mesmo tempo.
Além das classes responsivas acima, o framework Bootstrap 3 também contém aquelas que permitem controlar a visibilidade dos elementos quando impressos.
| Aula | Descrição |
|---|---|
| bloco de impressão visível | Um elemento com a classe especificada não será exibido na página. Quando impresso, este elemento ficará visível e terá a propriedade display CSS definida como block . |
| impressão visível em linha | Um elemento com a classe especificada não será exibido na página. Quando impresso, este elemento ficará visível e terá a propriedade display CSS definida como inline . |
| bloco visível-print-inline | Um elemento com a classe especificada não será exibido na página. Quando impresso, este elemento ficará visível e terá a propriedade de exibição CSS definida como inline-block . |
| impressão oculta | Um elemento com a classe especificada não será exibido quando impresso. Este elemento ficará visível na página (no navegador). |
Nesta seção do artigo, veremos o processo de criação de um layout responsivo para um bloco usando a grade do Bootstrap 3.
O layout consiste em três blocos. Esses blocos devem estar localizados nos dispositivos conforme mostrado na imagem.
O design de um layout geralmente começa com dispositivos minúsculos (xs). Neste dispositivo, os blocos possuem a mesma largura, igual a 12 colunas Bootstrap.
No sm os blocos são organizados da seguinte forma:
No md, os blocos 1 e 2 estão localizados na primeira linha e o bloco 3 está na 2ª linha. 1 bloco tem largura igual a 8 colunas Bootstrap (col-md-8), 2 blocos - 4 colunas (col-md-4).
O bloco 3 deve estar sempre localizado na linha 2. Para garantir isso, um bloco vazio adicional com classe clearfix deve ser colocado antes deste bloco. Este bloco não permitirá que o bloco 3 flua em torno dos blocos anteriores. Além disso, você deve ter em mente que um bloco com a classe clearfix deve ser exibido apenas em md , pois Esta ação não é necessária em outros dispositivos.
No LG, os blocos adaptativos são dispostos horizontalmente e juntos ocupam toda a largura. 1 bloco tem largura igual à metade da largura do elemento pai (col-lg-6), 2 bloco - um quarto da largura (col-lg-3) e 3 bloco - também deve ocupar um quarto da largura do elemento pai (col-lg-3) .
Tópicos mais interessantes.
