Neste artigo, discutiremos o sistema Bootstrap Grid.
No design gráfico, uma grade Bootstrap é uma estrutura (geralmente bidimensional) composta por uma série de linhas retas (verticais, horizontais) que se cruzam, usadas para estruturar o conteúdo. É amplamente utilizado para design de layout e estrutura de conteúdo em design de impressão. Em web design, isso é muito método eficaz crie de forma rápida e eficiente um layout consistente usando HTML e CSS.
Simplificando, as grades no web design organizam e estruturam o conteúdo, tornam os sites mais fáceis de rastrear e reduzem a carga cognitiva dos usuários.
Conforme declarado pela documentação oficial do Bootstrap para o sistema de grade -
O Bootstrap inclui um primeiro sistema de fluido móvel flexível que é dimensionado de acordo com até 12 colunas à medida que o tamanho do dispositivo ou da janela de visualização aumenta. Inclui classes predefinidas para opções simples layout, bem como mixins poderosos para criar layouts mais semânticos.
Vamos explicar o que foi dito acima. Bootstrap 3 é móvel primeiro no sentido de que o código para Bootstrap agora começa visando telas menores como celulares, tablets e depois "estende" componentes e grades para telas maiores como laptops, desktops.
Os sistemas da Web são usados para criar layouts de página em uma série de linhas e colunas que hospedam seu conteúdo. Aqui está como a grade do Bootstrap funciona -
Uma consulta de mídia é um termo muito sofisticado para uma "regra CSS condicional". Apenas aplica algum CSS com base em certas condições. Se essas condições forem atendidas, o estilo será aplicado.
As consultas de mídia no Bootstrap permitem que você mova, mostre e oculte o conteúdo com base no tamanho da tela. As consultas de mídia a seguir são usadas em arquivos LESS para criar pontos de interrupção importantes na grade do Bootstrap.
/* Dispositivos extra pequenos (telefones, menos de 768px) */ /* Nenhuma consulta de mídia, pois este é o padrão no Bootstrap */ /* Dispositivos pequenos (tablets, 768px e superior) */ @media (min-width: @screen -sm-min) ( ... ) /* Dispositivos médios (desktops, 992px e superiores) */ @media (largura mínima: @screen-md-min) ( ... ) /* Dispositivos grandes (desktops grandes, 1200px e superior) */ @media (min-width: @screen-lg-min) ( ... )
Às vezes, eles se expandem para uma largura máxima para limitar o CSS a um conjunto mais restrito de dispositivos.
@media (max-width: @screen-xs-max) ( ... ) @media (min-width: @screen-sm-min) e (max-width: @screen-sm-max) ( ... ) @media (min-width: @screen-md-min) e (max-width: @screen-md-max) ( ... ) @media (min-width: @screen-lg-min) ( .. .)
As solicitações de mídia têm duas partes: a especificação do dispositivo e a regra de tamanho. No caso acima, a seguinte regra é definida:
Considere esta linha -
@media (largura mínima: @screen-sm-min) e (largura máxima: @screen-sm-max) ( ... )
Para todos os dispositivos, independentemente do tipo com largura mínima: @screen-sm-min , se a largura da tela for menor que @screen-sm-max , faça algo.
A tabela a seguir resume os aspectos de como o sistema de grade do Bootstrap funciona em vários dispositivos −
| Pequenos dispositivos de emergência Telefones (menos de 768px) | Dispositivos pequenos Tablets (maior ou igual a 768px) | Dispositivos médios Desktops (maior ou igual a 992px) | Grandes dispositivos Desktops (maior ou igual a 1200px) | |
|---|---|---|---|---|
| Comportamento da malha | Horizontalmente em todos os momentos | Recolhido para começar, horizontal acima dos pontos de interrupção | Recolhido para começar, horizontal acima dos pontos de interrupção | |
| Largura máxima do contêiner | Não (automático) | 750 px | 970 px | 1170px |
| prefixo de classe | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Numero de colunas | 12 | 12 | 12 | 12 |
| Largura máxima da coluna | Auto | 60px | 78px | 95px |
| largura da calha | 30px (15px de cada lado da coluna) | 30px (15px de cada lado da coluna) | 30px (15px de cada lado da coluna) | |
| investido | Sim | Sim | Sim | Sim |
| Compensações | Sim | Sim | Sim | Sim |
| Coluna de pedido | Sim | Sim | Sim | Sim |
A seguir está a estrutura básica da grade Bootstrap -
Considere alguns exemplos de grade simples -
Com quatro níveis de grades disponíveis, você deve se deparar com problemas em que, em certos pontos de interrupção, as colunas não são totalmente claras, pois uma é mais alta que as outras. Para corrigir isso, use uma combinação da classe .clearfix e das classes de utilitário de resposta, conforme mostrado no exemplo a seguir -
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
Redimensione a viewport ou teste-a em um telefone para obter o resultado desejado neste exemplo.
Deslocamentos são um recurso útil para layouts mais especializados. Eles podem ser usados para arrastar colunas para uma distância maior (por exemplo). As classes .col-xs-* não suportam deslocamentos, mas são fáceis de replicar usando uma célula vazia.
Para usar deslocamentos em telas grandes, use as classes .col-md-offset-*. Essas classes aumentam a margem esquerda de uma coluna em * colunas, onde * varia de 1 a 11 .
No exemplo a seguir, temos div class = "col-md-6" . Centralizamos isso usando a classe .col-md-offset-3.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Isso produzirá o seguinte resultado -
Para aninhar o conteúdo na grade padrão, adicione uma nova .row e um conjunto de colunas .col-md-* dentro de uma coluna .col-md-* existente. As linhas aninhadas devem conter um conjunto de colunas que somam 12.
No exemplo a seguir, o layout tem duas colunas e a segunda é dividida em quatro retângulos em duas linhas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Festa de arte Consectetur Tonx culpa semiótica. Pinterest assume minim quis orgânico.
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comodo consequat.
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Isso produzirá o seguinte resultado -
Outro recurso interessante do sistema de grade do Bootstrap é que você pode facilmente escrever colunas em uma ordem e mostrá-las em outra. Você pode reordenar facilmente as colunas internas da grade com as classes .col-md-push-* e .col-md-pull-*, onde * varia de 1 a 11 .
No exemplo a seguir, temos dois layouts de coluna, sendo a coluna da esquerda a mais estreita e atuando como uma barra lateral. Reordenaremos essas colunas usando as classes .col-md-push-* e .col-md-pull-*.
Antes de fazer o pedido
Após o pedido
Isso produzirá o seguinte resultado -
O sistema de grade do Twitter Bootstrap 3 é uma maneira rápida e fácil de criar o layout do seu site.
Grids Bootstrap são usados no desenvolvimento de layouts de páginas da web e para criar layouts de blocos nos quais é necessário fornecer localização correta elementos. O design de uma grade começa com um contêiner que possui uma largura fixa ou flutuante.
Recipiente de largura fixa (
Contêiner de largura flutuante (
O próximo passo é colocar as linhas (divs com a classe .row) dentro do container. Largura da linha (
Dentro da linha são colocados blocos com a classe col-*-* , dentro dos quais o conteúdo ou outras linhas são colocadas. A largura dos blocos com a classe col-*-* é definida de forma relativa, especificando o número de colunas Bootstrap. Como uma linha no Bootstrap tem 12 colunas por padrão, a largura mínima de um bloco col-*-* é uma coluna Bootstrap e a largura máxima de um bloco col-*-* é 12 colunas Bootstrap.
Por exemplo, se quisermos criar 3 blocos com a mesma largura em uma linha, precisamos definir a largura desses blocos para 4 colunas Bootstrap (
Por exemplo: Você pode calcular a largura do bloco em pixels da seguinte forma:
[Largura do bloco] = [Largura da coluna Bootstrap]*[Número de colunas em que o bloco consiste],
onde: [largura da coluna Bootstrap] = [largura da linha (linha)] / 12.
[Largura da coluna Bootstrap] = 970 / 12 = 81px.
[largura do bloco] = 81 * 4 = 324px.
Para criar layouts de páginas da web para vários dispositivos (smartphones, tablets, laptops e computadores pessoais), você precisa usar as classes de grade do Twitter Bootstrap 3 predefinidas.
Por exemplo, você pode usar a classe .col-xs-* para criar uma grade para dispositivos de tela pequena, como smartphones. Exatamente a mesma classe. col-sm-* - para dispositivos de tela pequena, como tablets, classe .col-md-* - para dispositivos com tamanhos de tela médios, como computadores pessoais e laptops, bem como classe .col-lg-* - para dispositivos de tela grande .
A tabela a seguir resume algumas características principais novo sistema Bootstrap 3 grades.
| Recursos do sistema de grade Bootstrap 3 | Largura de tela pequena smartphones (<768px) |
Largura da tela pequena comprimidos (≥768px e<992) |
Largura média da tela laptops (≥992px e<1200px) |
Largura da tela grande Computadores (≥1200 px) |
|---|---|---|---|---|
| Largura do contêiner fixo disposição (.recipiente) |
750 px | 970 px | 1170px | |
| Largura do contêiner de layout fluido (.container-fluid) | Igual à largura da janela do cliente do navegador | |||
| prefixo de classe | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Largura máxima da coluna Bootstrap para um contêiner de largura fixa (.container) | ~62px (750px / 12) | ~81px (970px / 12) | ~97px (1170px / 12) | |
| Largura máxima da coluna Bootstrap para contêiner flutuante (.container-fluid) | A largura da área de trabalho da janela do navegador / 12 | |||
| Preenchimento para blocos de conteúdo que consistem em colunas Bootstrap | 15px do lado esquerdo e direito do bloco | |||
Observação:
Se você aplicar a classe .col-sm-* a um bloco, isso afetará não apenas a marcação para dispositivos de tela pequena (tablets), mas também dispositivos de tela média e grande se você não especificar as classes .col-md- * e .col-lg-* . Da mesma forma, a classe .col-md-* afetará a marcação não apenas para dispositivos de tela média, mas também para dispositivos de tela grande se a classe .col-lg-* não for especificada.
Com o novo sistema de grade do Twitter Bootstrap 3, você pode controlar facilmente a exibição do layout do seu site em diferentes dispositivos com diferentes larguras de tela.
Como exemplo, considere o processo de desenvolvimento de um layout de site, composto por 3 blocos para todos os dispositivos. O layout desenvolvido em diferentes dispositivos (smartphones, tablets, laptops, computadores pessoais) terá uma aparência diferente. Por exemplo, em smartphones, esses blocos são dispostos verticalmente, enquanto em uma tela grande de um computador pessoal, eles são colocados horizontalmente. Ou seja, nosso layout mudará automaticamente quando os limites de largura da janela do navegador forem atingidos.
O layout do site para um dispositivo com tela grande (largura >=1200px) consiste em três blocos dispostos horizontalmente, que ocupam toda a largura do contêiner. A primeira caixa tem metade da largura do contêiner (col-lg-6), a segunda caixa tem um quarto da largura do contêiner (col-lg-3) e a terceira caixa tem um quarto da largura do recipiente (col-lg-3).
Layout do site para dispositivo de tela média (largura >=992px e<1200) состоит из трёх блоков, два из которых расположены в одной строке и один в другой. Первый блок имеет ширину равную 8 колонкам Bootstrap (col-md-8), второй блок занимает оставшуюся ширину, т.е. 12 - 8 = 4 колонки (col-md-4). Так как третий блок должен располагаться с новой строки, то необходимо перед ним поместить дополнительный пустой блок с классом.clearfix , который не будет обтекать предыдущие блоки. Также необходимо иметь в виду, что это надо сделать только для экранов со средней шириной. Для этого необходимо к пустому блоку дополнительно добавить класс.visible-md-block . Ширина 3 блока равна ширине контейнера (col-md-12).
Configure o layout para outros dispositivos da mesma maneira. Layout do site para um dispositivo de tela pequena (largura >=768px e<992px) состоит из 3 блоков, первый блок занимает всю ширину контейнера, остальные 2 блока расположены под ним и занимают каждый ширину, равную 6 колонкам Bootstrap.
<div class="container"> <div classe="linha"> <div class="col-lg-6 col-md-8" estilo= "altura:300px; fundo:verde;"> Bloco 1div > <div class="col-lg-3 col-md-4" estilo= "altura:100px; fundo:laranja;"> Bloco #2div > <div class ="clearfix visible-md-block" >Layout do site para um dispositivo com uma tela pequena (largura<768px) состоит из 3 блоков, которые расположены вертикально и занимают всю ширину контейнера.
<div class="container"> <div classe="linha"> <classe div = "col-lg-6 col-md-8 col-sm-12 col-xs-12" estilo= "altura:300px; fundo:verde;">Nota: Para dispositivos com largura de tela muito pequena (<768px) блоки по умолчанию всегда занимают всю ширину рабочей области экрана (col-xs-12) и располагаются один под другим как в нашем примере. Настраивать макет для таких устройств имеет смысл, если макет отличается от вышесказанного.
<div class="container"> <div classe="linha"> <div class="col-lg-6 col-md-8 col-sm-12" estilo= "altura:300px; fundo:verde;"> Bloco 1O Twitter Bootstrap 3 contém classes de utilitários responsivos que permitem habilitar a exibição de elementos apenas em determinados dispositivos cujos tamanhos de tela estão dentro do intervalo apropriado.
O Twitter Bootstrap 3.2 adicionou suporte para a propriedade CSS display na classe .visible. Um novo recurso permite definir a visibilidade de elementos como inline , block e inline-block em diferentes telas. Por exemplo, a classe .visible-md-block permite a visibilidade de um elemento se for um elemento de bloco e a largura atual da área do cliente da janela do navegador corresponder ao intervalo md (largura >=992px e<1200px).
| Descrição | |
|---|---|
| .visible-xs-* | Torna o elemento visível apenas em dispositivos de tela muito pequena com largura de tela inferior a 768px. Em outros dispositivos, esses elementos não são visíveis. |
| .visible-sm-* | Torna o elemento visível apenas em dispositivos com largura de tela maior ou igual a 768px (ou seja, ≥768px) e menor que 992px. Em outros dispositivos, esses elementos não são visíveis. |
| .visible-md-* | Torna o elemento visível apenas em dispositivos com largura de tela maior ou igual a 992px (ou seja, ≥992px) e menor que 1200px. Em outros dispositivos, esses elementos não são visíveis. |
| .visible-lg-* | Torna o elemento visível apenas em dispositivos com largura de tela maior ou igual a 1200px (ou seja, ≥1200px). Em outros dispositivos, esses elementos não são visíveis. |
Observação: você também pode compartilhar essas classes para tornar os elementos visíveis em vários dispositivos. Por exemplo, você pode aplicar as classes .visible-xs-* e .visible-md-* a qualquer bloco para torná-lo visível em dispositivos de tela muito pequenos e médios.
Da mesma forma, você pode usar as classes de utilitários abaixo para ocultar a exibição de elementos em determinados dispositivos.
Dica: Você também pode compartilhar essas classes para que os blocos não fiquem visíveis em vários dispositivos. Por exemplo, você pode aplicar as classes .hidden-xs e .hidden-md a um bloco em uma página da Web para tornar o bloco invisível em dispositivos de tela muito pequenos a médios.
<p class="visible-xs-block"> Este parágrafo só será visível em smartphones.p > <p class="visible-sm-block" > Este parágrafo só será visível em tablets.p > <p class="visible-md-block"> Este parágrafo só será visível em dispositivos com tela de tamanho médio.p > <p class="visible-lg-block"> Este parágrafo ficará visível apenas em dispositivos de tela grande.p >Semelhante às classes responsivas regulares do Twitter Bootstrap 3, as seguintes classes de utilitários podem ser usadas para mostrar ou ocultar blocos específicos ao imprimir páginas da web.
O que você aprenderá nesta lição? Neste tutorial, você será capaz de criar seu primeiro site wireframe (template) usando a grade Bootstrap.
A grade do Bootstrap consiste em caixas de som e linhas. Para facilitar a compreensão da criação da grade, dividiremos condicionalmente o trabalho em duas etapas.
Etapa 1 - criação de linhas.
A criação de uma grade deve começar com a criação de linhas. Para criar uma linha, você precisa escrever uma tag div com a classe "row" . "linha" do inglês. significa cadeia. Pode haver um número ilimitado de linhas, mas ao criar cada nova linha, a tag div deve ser atribuída à classe “row” .
Estágio 2 - trabalhe com colunas.
A grade Bootstrap consiste em 12 colunas, todas as colunas têm a mesma largura.
As colunas podem ser mescladas em várias partes e colocadas na posição desejada.
Para mesclar (combinar) colunas, você precisa especificar a classe “col-md- * » , onde * é um número correspondente ao número de colunas que conectamos.
Importante! Ao conectar colunas, seu número total deve ser sempre igual a 12.
1ª linha: todas as 12 colunas que compõem a grade;
2ª linha: digamos que queremos uma coluna com duas colunas padrão de largura. Mesclamos duas colunas, mas o número total de colunas ainda é 12.
7ª linha: neste caso, precisávamos dividir a grade em três colunas iguais, para isso mesclamos 4 colunas três vezes, o que dá 12 no total.
Portanto, não importa como você divide as colunas, a soma total das colunas adicionadas deve ser 12.
E agora vou traduzir o layout da grade do Bootstrap em código:
Se você ainda não entendeu nada, tentarei explicar desta maneira.
Você precisa de um site de 2 colunas. Barra do site à esquerda, conteúdo à direita.
Você já sabe que a grade no Bootstrap é composta por 12 colunas.
Estamos tentando mesclar 4 colunas em uma.
1coluna + 1coluna + 1coluna + 1coluna = 4colunas
Portanto, para a barra do site, a classe "col-md-" ficará assim: "col-md-4".
12 (colunas) - 4 (colunas que fundimos) = 8 (colunas restantes).
Portanto, para o conteúdo, a classe "col-md-" ficaria assim: "col-md-8"
Isto é o que parece código comum:
O Bootstrap tem a capacidade de escrever diferentes estilos CSS ou dividir células de maneira diferente para grupos de dispositivos.
Por exemplo, quero que o cabeçalho do meu site em monitores grandes seja dividido em uma célula, mas para telefones, decidi criar duas células e aplicar um estilo CSS diferente a elas. Tem a ideia?
Veja para quais classes você pode usar vários grupos dispositivos e quais recursos cada classe possui.
Tabela de layout de bootstrap para diferentes grupos de dispositivos
| Dispositivo muito pequeno Telefones (<768px) |
Dispositivos pequenos Comprimidos (≥768px) |
Dispositivos médios Área de trabalho (≥992px) |
Dispositivos grandes Área de trabalho (≥1200px) |
|
| Largura do contêiner | Não (automático) | 750 px | 970 px | 1170px |
| Classe de prefixo | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| caixas de som | 12 | |||
| Largura da coluna | Auto | 60px | 78px | 95px |
Vamos ver como isso ficará no código:
Eventualmente:
- para dispositivos grandes (≥1200px), haverá duas linhas de largura total na tela (aplica-se a classe "col-lg-12"):
Com dispositivos médios (≥992px), haverá duas colunas na tela (classe "col-md-8" e classe "col-md-4" se aplicam):
Em dispositivos pequenos (≥768px), haverá duas colunas na tela com a mesma largura (aplica-se a classe "col-sm-6"):
Para dispositivos muito pequenos<768px) будут на экране две колонки на всю ширину (действует класс «col-xs-12» ):
Acho que você acertou aqui!
Vamos para a prática.
Digamos que eu tenha este esboço do site:
Para criar esse layout, você só precisa usar o conhecimento da lição de hoje. Foi assim que resolvi este problema:
Você pode ver o resultado. Se desejar, você pode alterar o tamanho da tela ou abrir a página de resultados via grupos diferentes dispositivos.
Olá, queridos leitores do blog. Na primeira parte do artigo sobre conhecemos os recursos dessa estrutura, aprendemos o que é design responsivo e por que é tão importante em nossa era de crescimento desenfreado da popularidade de vários dispositivos móveis. Lá também consideramos em detalhes os problemas de conectar o Bootstrap a uma página Html (conectando arquivos de estilo, scripts e a biblioteca jQuery).
O artigo de hoje é sobre o sistema de grade usado no Bootstrap 3. Você aprenderá quais tamanhos de grade podem ser usados, como eles se comportarão em dispositivos com tamanhos de tela diferentes e como criar você mesmo linhas e células com base em uma ou mais grades. Tudo isso será explicado com exemplos, que, espero, melhorem a percepção.
Bootstrap 3 vem com sistema de grade de doze colunas, que é projetado principalmente para dispositivos móveis. Aqueles. ele é projetado com um olho em primeiro lugar em telas pequenas, em segundo lugar - em telas largas. NO nova versão Esta estrutura tem quatro tamanhos de grade. Todas essas informações podem ser estudadas em detalhes no site oficial GetBootstrap.com acessando a guia "CSS" no menu superior e selecionando o item "Sistema de grade" à direita.
Lá você obterá uma explicação completa de como o sistema funciona, consultas de mídia relacionadas e assim por diante. Essa série de elementos Html (por exemplo, anúncios de artigos sobre pagina inicial) que você deseja posicionar na grade, você precisará cercá-lo com um contêiner (por exemplo, colocá-lo em tags Div) e escrever uma classe .row para ele (neste caso, a tag de abertura será semelhante a
Bem, você pode distribuir os elementos dentro da linha em um ou vários tipos de grades de uma só vez, definindo o atributo class com um valor, por exemplo, .col-xs-number (neste caso, apenas uma grade extra pequena é usada ).
Por exemplo, se você deseja obter três colunas de tamanho igual como resultado, precisa dividir 12 (a dimensão da grade no Bootstrap 3) por 3 (o número necessário de colunas). Isso significa que para cada elemento Html dentro da linha (novamente, podem ser contêineres Div), você precisará registrar as mesmas classes -
Um pouco mais abaixo na área "Opções de grade" você encontrará uma explicação do mencionado acima quatro tamanhos de malha bootstrap moderno.
As últimas três grades serão horizontais apenas se o tamanho da tela for maior que o ponto em que ocorre o colapso. Por exemplo, para uma grade grande em telas menores que 1200 pixels, ela deixará de ser horizontal e passará a ser vertical. Na página do site oficial GetBootstrap.com, que estamos analisando no momento, há exemplos e explicações sobre isso. No entanto, na minha opinião, tudo é um tanto confuso e complicado.
vou tentar explicar tudo isso exemplo finalizado. Você só precisa copiar o arquivo setka.html(para fazer isso, selecione o item "Salvar por link como ..." no menu de contexto). Se você abrir este arquivo diretamente no navegador (clicando no link fornecido com o botão esquerdo do mouse), nada funcionará, porque o framework Bootstrap não se conectará.
Coloque o arquivo setka.html baixado na pasta Bootstrap sobre a qual falamos em . Ele deve estar no mesmo nível do arquivo index.html que criamos anteriormente.
Agora abra este arquivo setka.html em qualquer navegador de sua escolha e experimente o tamanho da janela do seu navegador para ver o Bootstrap 3 em ação e entender como o sistema de grade funciona. Quais? Vou explicar agora.
A resolução da tela do meu monitor é de 1280 pixels de largura, o que é mais do que o ponto de interrupção de 1200 pixels definido para a grade grande. O que vemos como resultado? Algo como esta imagem:
Aqui estão cinco exemplos de layout de site construídos em tipos diferentes grades:
Assim podemos ver e comparar como esses grids do arsenal do Bootstrap 3 funcionam juntos e como funcionam separadamente (ao usar apenas um tipo). Porque Como meu navegador foi expandido para tela cheia (com mais de 1200 pixels de largura) quando fiz a captura de tela anterior, esses cinco exemplos de layout de site são todos expandidos horizontalmente (as colunas estão localizadas uma ao lado da outra na largura da tela).
Agora vamos diminuir um pouco o tamanho da janela do navegador para que possamos ver o colapso.
O texto acima da linha superior e os prefixos de classe em suas células foram alterados (para isso foram usadas classes de visibilidade, das quais falaremos mais adiante). A grade do meio agora é usada e ainda é exibida horizontalmente. Ao mesmo tempo, a linha inferior (que ilustra o uso de apenas malha grossa) dobrado verticalmente, ou seja blocos vizinhos agora são exibidos não um ao lado do outro em largura, mas um abaixo do outro (em altura).
Acontece que uma grade grande na ausência de qualquer Influência externa se comporta dessa maneira - empilha verticalmente em todos os dispositivos cujo tamanho de tela é inferior a 1200 pixels de largura. Neste caso, todas as outras utilizadas no exemplo da grade são exibidas horizontalmente. A primeira linha usa uma combinação de grades, então agora é controlada pelo sistema de grade do meio ( sistema grande não tem mais efeito).
Vamos reduzir o tamanho da janela do navegador mais uma vez em largura para que fique. Haverá outro acidente:
Agora (com base no tamanho da tela) estamos trabalhando com uma pequena grade. Consequentemente, não apenas a grade grande, mas também a grade média também se desenvolveu verticalmente. Bem, na primeira linha, onde uma combinação de grades é usada, tudo agora é controlado pelo sistema de grade pequena do Bootstrap. Ao mesmo tempo, no arquivo setka.html, a distribuição das colunas nesta primeira linha também muda, o que não é necessário, mas é bem possível fazer isso para atender a algumas de suas necessidades em termos de layout (além disso , por “um ou dois”, sem problema algum ).
Continuamos a reduzir a largura da janela do navegador para valores. Outro acidente acontece:
Como resultado, não apenas as grades grandes e médias correm verticalmente pela página, mas a pequena também se juntou a elas. o único uma grade muito pequena permaneceu horizontal, que permanece assim (como acabamos de ver) em todas as circunstâncias. Mesmo que você restrinja a página a uma largura ultrapequena, a grade ultrapequena não se transformará em uma grade vertical (mesmo quando o conteúdo não couber nas células).
Este exemplo (arquivo setka.html) é feito exatamente. Sobre como tudo está organizado lá, falaremos em detalhes mais tarde. Mas, por enquanto, quero chamar sua atenção apenas para algumas das nuances que você pode observar no código-fonte do arquivo setka.html.
Estilos para o design visual dos layouts (recuos, cores da grade, etc.) são adicionados na parte superior com a ajuda, que não carregam uma carga semântica especial. Se você rolar o código-fonte para baixo, notará este bloco:
Existem quatro contêineres para os quais classes diferentes são atribuídas (leia sobre). Eles permitem que você exiba conteúdo específico com base em consultas de mídia correspondentes a diferentes tamanhos de grade. Como funciona? Todos os quatro títulos são carregados no navegador (se você observar o código-fonte), mas apenas um título é exibido, dependendo da resolução atual da tela ou do tamanho da janela do navegador.
isto grade mestra, onde todos os quatro sistemas de grade são combinados (você pode ver isso pelos atributos de célula como class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , que lista os prefixos de classe de todos os quatro grades). A própria linha, conforme mencionado acima, é definida colocando todos os seus elementos constituintes em um contêiner com class="row" (em nosso exemplo, um contêiner baseado em div).
Observe que nossa grade mestre consiste em três células (colunas) e se você somar todos os números que são atribuídos a cada uma das colunas, por exemplo, para os prefixos de grade ultrapequenos do Bootstrap (col-xs), você obterá um total de 12. Então o mesmo será verdadeiro para os números após os prefixos de todos os outros sistemas. É compreensível, porque esta estrutura, conforme mencionado acima, possui uma estrutura de 12 colunas, ou seja, horizontalmente, todo o espaço disponível para o layout é dividido em doze colunas de largura igual(não visíveis no site - são como células em cadernos escolares).
Bem, com a ajuda de números após os prefixos de classe, basta definir as proporções para cada uma das células (colunas reais) do seu layout. Aqueles. proporções podem ser, por exemplo:
Geralmente, um, dois, três ou todos os quatro sistemas de grade podem ser usados em um layout (linha). Tudo depende das suas preferências de design e do que você está tentando obter da sua página da Web (como ela deve ser em diferentes tamanhos de tela). O site oficial dá um exemplo:
Vamos agora, para melhor compreensão, criar uma página Html que seja um pouco reminiscente de página da web real(com um cabeçalho, conteúdo de texto e imagem e um rodapé) e coloque-o usando o sistema de grade Bootstrap 3.
Mais precisamente, eu mesmo criarei o espaço em branco e apenas sugerirei, por analogia com o exemplo anterior, baixar o arquivo website.html(para isso, selecione o item "Salvar como ..." no menu de contexto), para que posteriormente você possa adicionar as classes de bootstrap necessárias a este "peixe" juntas. Ele também precisará ser colocado na pasta Bootstrap no mesmo nível do arquivo index.html que criamos no primeiro artigo (e do arquivo setka.html com o qual trabalhamos logo acima).
Se você observar o código-fonte do arquivo sait.html, verá que o Bootstrap e o jquery já estão incluídos nele e o conteúdo foi adicionado para simular aparência página web média. Sim, você também precisará de uma pasta com as imagens utilizadas nesta página. Você pode baixá-lo aqui - img.zip. Simplesmente descompacte o arquivo e coloque a pasta img (certifique-se de que contém arquivos de imagem e não outra pasta img) dentro da pasta Bootstrap, no mesmo nível do arquivo sait.html. A estrutura ficará assim:
Agora, (da pasta Bootstrap) no navegador, você verá a página da web que usei como exemplo. É impressionante que todos os blocos da página estejam localizados um abaixo do outro, o que interfere muito na correta percepção visual das informações. Seria lógico colocá-los em colunas e para que, quando o tamanho da tela diminuir, o “design responda” a isso, alterando o número de colunas para facilitar a visualização em dispositivos com larguras diferentes da área visível.
No código Html fonte do arquivo sait.html, utilizei para mostrar os limites das linhas (linhas) que pretendo, para o qual iremos customizar a exibição das colunas utilizando algum tipo de sistema de grade Bootstrap. Existem apenas quatro linhas (elas são numeradas na captura de tela acima) - um cabeçalho (um cabeçalho com o nome e o logotipo do site), um título e uma descrição da página, uma parte do conteúdo (o conteúdo principal consiste em anúncios de quatro artigos) e um rodapé.
Agora precisamos adicionar a marcação Bootstrap ao arquivo sait.html, que. Para criar linhas, como você se lembra, basta colocar todo o seu conteúdo em um contêiner (na maioria das vezes são tags Div, embora possa haver outras) e escrever uma classe nele classe="linha". Para a primeira linha, ficará assim:
O mesmo deve ser feito para todas as outras linhas (linhas) - coloque a tag de abertura
Agora vamos vamos formar células naquelas linhas (linhas) onde faz sentido fazê-lo. Seria bastante lógico colocar os anúncios de artigos (da terceira linha) em quatro colunas e, quando a largura da tela diminuir, deixar essas quatro colunas serem convertidas em duas. Como fazer isso? Vamos ver.
Portanto, no Bootstrap 3 existe uma grade de 12 colunas, sobre a qual falamos acima. Como decidimos fazer quatro colunas com anúncios, seria lógico torná-las iguais em largura, o que significa que cada uma das colunas terá três células (células) de largura de nosso sistema de grade invisível (independentemente de qual grade escolhermos - ultra -pequeno, pequeno, médio ou grande).
Qual rede escolher para trabalhar? Vamos pegar a média para começar, como um compromisso. Nesse caso, você precisará adicionar a classe “col-md-3” aos contêineres de todas as quatro células -
Depois de salvar as alterações feitas, você verá que nossa página da web já adquiriu uma aparência muito mais utilizável:
É verdade que quando a janela do navegador é reduzida a uma largura de um ponto de interrupção menor (no caso da grade média que usamos, será de 992 pixels), todos os anúncios serão alinhados novamente em uma coluna, o que não é bom, porque a usabilidade neste caso diminui (uma resolução de quase 1000 pixels permite organizar informações com mais densidade). Para remediar esta situação, você pode adicione outra malha do arsenal do Bootstrap para as mesmas caixas de anúncio. Como fazer isso? Vamos ver.
Vamos usar os prefixos "col-xs-6" para o nome da classe em cada célula com o anúncio (o resultado será uma classe composta class="col-md-3 col-sm-6"). Ficará assim (usando uma célula como exemplo):
Texto de anúncio.
Como você pode ver, aqui violamos a regra anunciada recentemente de que os números após os prefixos de uma grade em todas as células devem somar 12. Temos 24 (quatro vezes seis). Mas fizemos isso de propósito para alcançar o resultado desejado - em vez de quatro, obtemos duas colunas ao passar o ponto de interrupção para o sistema de grade Bootstrap médio (são 992 pixels). Aqueles. as células estarão localizadas em duas linhas, duas em cada:
Porque Se escolhermos um sistema de grade ultrapequeno, com uma diminuição adicional na largura da janela do navegador, o arranjo vertical dos blocos com anúncios um sob o outro (colocação em uma coluna) não ocorrerá, porque esse sistema sempre permanece horizontal.
Se você deseja que quatro colunas se transformem em duas colunas quando a largura da tela diminuir e, em seguida, em uma coluna, use um pequeno sistema de grade em vez de "col-xs-6" usando "col-sm-6":
Então, quando a largura da janela do navegador for reduzida para menos de 768 pixels, você verá um recado, no qual duas colunas com anúncios são convertidas em uma. Basta experimentar e sentir a diferença.
Vamos experimentar e tentar novamente, nas quais existem essencialmente duas células potenciais - o nome do site com uma descrição e também um logotipo. Na verdade, vamos posicioná-los. Vamos usar uma grade maior desta vez com "col-lg-6" para obter duas colunas iguais.
Tudo sobre a criação de sites, blogs, fóruns, lojas online, sua promoção nos mecanismos de busca e como ganhar dinheiro no site
É verdade que, ao usar uma grade grande, o scraping ocorre em resoluções de tela bastante grandes (janelas do navegador, no nosso caso, porque simulamos dispositivos com diferentes larguras de tela). Depois disso, as células são dobradas verticalmente. Para evitar isso, nós vamos adicionar mais um grade de inicialização 3 para a primeira linha. Acho que um pequeno sistema de grade (prefixo de classe col-sm) servirá. Então o código ficará mais ou menos assim:
Tudo sobre a criação de sites, blogs, fóruns, lojas online, sua promoção nos mecanismos de busca e como ganhar dinheiro no site
No entanto, não fiz células com o nome do site e o logotipo iguais para a grade pequena, porque o logotipo é essencialmente mais estreito (no sentido, estreito) do nome com a descrição. Com uma largura de tela menor, não seria lógico alocar células iguais para elas. É por isso que fiz a primeira coluna com o nome e a descrição do site quando o sistema Bootstrap small grid é ativado com o dobro do tamanho da coluna do logotipo.
Como resultado, quando a janela do navegador for reduzida, essas células convergirão até o momento da quebra para o pequeno sistema de grade Bootstrap, que ocorre com uma largura inferior a 768 pixels, e então ambas as células ficarão localizadas uma sob a outra.
Você deve ter notado que o texto na página trava na borda esquerda da tela, o que causa . Você pode adicionar para corrigir essa situação na tag do corpo, o que permitirá. E tudo pode ser resolvido meios padrão Inicialização 3.
Para fazer isso, você precisará agrupar todo o conteúdo da página da Web (tudo o que está incluído nas tags Body) em um contêiner Div com a classe de mesmo nome - Você também pode ver que as imagens de visualização se sobrepõem conforme a largura da tela diminui. O fato é que eles ainda estão “não responsivos”, mas faremos isso nos próximos artigos desta seção. E também continuaremos a analisar o trabalho com o sistema de grade Bootstrap 3, aprender a projetar botões, tabelas, formulários Html, criar menus suspensos, navegação e muito mais. Portanto, não troque e fique atento às novas publicações. Continua >>> (Pode subscrever a newsletter para não a perder) E aqui está a continuação: (mas você ainda se inscreve - haverá muito mais coisas interessantes e úteis).
. Aqueles. coloque esta tag imediatamente após a tag Body de abertura e feche-a antes de chamar os scripts que estão localizados imediatamente antes da tag Body de fechamento. Depois disso, o texto não ficará mais encostado na janela do navegador.
