Bootstrap - Sistema de grade

Neste capítulo, discutiremos o Sistema Bootstrap Grid.

O que é uma grade?

Conforme colocado pela wikepedia -

No design gráfico, uma grade é uma estrutura (geralmente bidimensional) composta por uma série de linhas retas que se cruzam (verticais, horizontais) usadas para estruturar o conteúdo. É amplamente utilizado para projetar layout e estrutura de conteúdo em design de impressão. Em web design, é um método muito eficaz para criar um layout consistente de forma rápida e eficaz usando HTML e CSS.

Para simplificar, as grades do web design organizam e estruturam o conteúdo, tornam os sites fáceis de serem digitalizados e reduzem a carga cognitiva dos usuários.

O que é o Bootstrap Grid System?

Conforme colocado pela documentação oficial do Bootstrap para sistema de grade -

O bootstrap inclui um primeiro sistema de grade de fluido móvel responsivo que dimensiona apropriadamente até 12 colunas conforme o tamanho do dispositivo ou janela de visualização aumenta. Inclui classes predefinidas para opções fáceis de layout, bem como mixins poderosos para gerar layouts mais semânticos.

Deixe-nos entender a afirmação acima. O Bootstrap 3 é móvel primeiro no sentido de que o código para Bootstrap agora começa com o objetivo de telas menores, como dispositivos móveis, tablets e, em seguida, “expande” componentes e grades para telas maiores, como laptops e desktops.

Estratégia Mobile First

  • Content

    • Determine o que é mais importante.

  • Layout

    • Projete primeiro para larguras menores.
    • Dispositivo móvel de endereço CSS básico primeiro; endereço de consultas de mídia para tablet, desktops.

  • Progressive Enhancement

    • Adicione elementos conforme o tamanho da tela aumenta.

Funcionamento do sistema Bootstrap Grid

Os sistemas de grade são usados ​​para criar layouts de página por meio de uma série de linhas e colunas que hospedam seu conteúdo. Veja como funciona o sistema de grade Bootstrap -

  • As linhas devem ser colocadas dentro de um .container classe para alinhamento e preenchimento adequados.

  • Use linhas para criar grupos horizontais de colunas.

  • O conteúdo deve ser colocado dentro das colunas e apenas as colunas podem ser filhos imediatos das linhas.

  • Classes de grade predefinidas como .row and .col-xs-4estão disponíveis para criar layouts de grade rapidamente. Mixins MENOS também podem ser usados ​​para layouts mais semânticos.

  • As colunas criam medianizes (lacunas entre o conteúdo da coluna) por meio de preenchimento. Esse preenchimento é deslocado nas linhas da primeira e da última coluna por meio da margem negativa em.rows.

  • As colunas da grade são criadas especificando-se o número de doze colunas disponíveis que você deseja expandir. Por exemplo, três colunas iguais usariam três.col-xs-4.

Consultas de mídia

A consulta de mídia é um termo muito sofisticado para "regra CSS condicional". Ele simplesmente aplica algum CSS, com base em certas condições estabelecidas. Se essas condições forem atendidas, o estilo será aplicado.

As consultas de mídia no Bootstrap permitem mover, mostrar e ocultar o conteúdo com base no tamanho da janela de visualização. As consultas de mídia a seguir são usadas em arquivos LESS para criar os principais pontos de interrupção no sistema de grade do Bootstrap.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Ocasionalmente, eles são expandidos para incluir um max-width para limitar o CSS a um conjunto mais restrito de dispositivos.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

As consultas de mídia têm duas partes, uma especificação de dispositivo e uma regra de tamanho. No caso acima, a seguinte regra é definida -

Vamos considerar esta linha -

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Para todos os dispositivos, não importa o tipo com min-width: @ screen-sm-min se a largura da tela ficar menor que @ screen-sm-max , faça algo .

Opções de grade

A tabela a seguir resume os aspectos de como o sistema de grade Bootstrap funciona em vários dispositivos -

Dispositivos extra pequenos telefones (<768px) Tablets para dispositivos pequenos (≥768 px) Dispositivos médios desktops (≥992 px) Dispositivos grandes desktops (≥1200px)
Comportamento de grade Sempre horizontal Recolhido para começar, horizontal acima dos pontos de interrupção 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 Nenhum (automático) 750px 970px 1170px
Prefixo de classe .col-xs- .col-sm- .col-md- .col-lg-
# de colunas 12 12 12 12
Largura máxima da coluna Auto 60px 78px 95px
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)

30px

(15px em cada lado de uma coluna)
Nestable sim sim sim sim
Offsets sim sim sim sim
Ordem de coluna sim sim sim sim

Estrutura de grade básica

A seguir está a estrutura básica da grade Bootstrap -

<div class = "container">

   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">...</div>
	
</div>

<div class = "container">
   ....
</div>

Vamos ver alguns exemplos simples de grade -

Redefinições de coluna responsiva

Com as quatro camadas de grades disponíveis, você provavelmente encontrará problemas em que, em certos pontos de interrupção, as colunas não ficam bem claras porque uma é mais alta que a outra. Para corrigir isso, use uma combinação de uma classe.clearfixe as classes de utilitário responsivas conforme mostrado no exemplo a seguir -

<div class = "container">
   <div class = "row" >
   
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>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 commodo consequat.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.</p>
      </div>

      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim</p>
      </div>
      
   </div>
</div>

Isso produzirá o seguinte resultado -

Redimensione sua janela de visualização ou verifique em seu telefone o resultado desejado deste exemplo.

Offset Columns

Os deslocamentos são um recurso útil para layouts mais especializados. Eles podem ser usados ​​para empurrar as colunas para mais espaçamento (por exemplo). o.col-xs = * as classes não oferecem suporte a deslocamentos, mas são facilmente replicados usando uma célula vazia.

Para usar deslocamentos em telas grandes, use o .col-md-offset-*Aulas. Essas classes aumentam a margem esquerda de uma coluna em* colunas onde * vai de 1 para 11.

No exemplo a seguir, temos <div class = "col-md-6"> .. </div>, vamos centralizar isso usando a classe .col-md-offset-3.

<div class = "container">

   <h1>Hello, world!</h1>

   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

   </div>
	
</div>

Isso produzirá o seguinte resultado -

Colunas de aninhamento

Para aninhar seu conteúdo com a grade padrão, adicione um novo .row e conjunto de .col-md-* colunas dentro de um existente .col-md-*coluna. As linhas aninhadas devem incluir um conjunto de colunas que somam 12.

No exemplo a seguir, o layout possui duas colunas, com a segunda sendo dividida em quatro caixas em duas linhas.

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">

      <div class = "col-md-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class = "col-md-9" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>Second Column- Split into 4 boxes</h4>
         <div class = "row">
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Consectetur art party Tonx culpa semiotics. 
                  Pinterest assumenda minim organic quis.</p>
            </div>
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>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 commodo consequat.</p>
            </div>
				
         </div>

         <div class = "row">
			
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>quis nostrud exercitation ullamco laboris nisi ut aliquip 
                  ex ea commodo consequat.</p>
            </div>   
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
				
         </div>

      </div>

   </div>
	
</div>

Isso produzirá o seguinte resultado -

Ordem de coluna

Outro recurso interessante do sistema de grade Bootstrap é que você pode facilmente escrever as colunas em uma ordem e mostrá-las em outra. Você pode facilmente alterar a ordem das colunas de grade integradas com.col-md-push-* e .col-md-pull-* classes modificadoras onde * vai de 1 para 11.

No exemplo a seguir, temos o layout de duas colunas com a coluna da esquerda sendo a mais estreita e atuando como uma barra lateral. Vamos trocar a ordem dessas colunas usando.col-md-push-* e .col-md-pull-* Aulas.

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
      <p>Before Ordering</p>
      
      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on left
      </div>
      
      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on right
      </div>
      
   </div>
	
   <br>
   
   <div class = "row">
      <p>After Ordering</p>
      
      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on left
      </div>
      
      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on right
      </div>
		
   </div>

</div>

Isso produzirá o seguinte resultado -