17. Utilizando grids e containers no Bootstrap

Página 63

O Bootstrap é uma das ferramentas mais populares quando se trata de desenvolvimento web front-end. Ele é conhecido por sua facilidade de uso e eficiência na criação de sites responsivos. Uma das características mais notáveis do Bootstrap é o uso de grids e containers. Neste capítulo, vamos mergulhar na utilização de grids e containers no Bootstrap.

Entendendo o Container

Os containers no Bootstrap são elementos fundamentais para a criação de layouts responsivos. Eles são os blocos de construção básicos de qualquer página web Bootstrap. Um container é simplesmente uma div com a classe .container ou .container-fluid. A diferença entre os dois é que .container tem uma largura máxima fixa em pixels em diferentes tamanhos de tela, enquanto .container-fluid se expande para preencher a largura da tela.

<div class="container">
  <!-- Conteúdo -->
</div>

<div class="container-fluid">
  <!-- Conteúdo -->
</div>

Compreendendo o Grid

Bootstrap utiliza um sistema de grid para criar layouts. O grid é dividido em 12 colunas, permitindo que você crie layouts complexos e responsivos com facilidade. As classes de grid são aplicadas a divs para controlar o layout da página. As classes variam de .col- (para dispositivos extra pequenos, como telefones) até .col-xl- (para dispositivos extra grandes, como TVs de grande escala).

<div class="row">
  <div class="col-">
    <!-- Conteúdo -->
  </div>
  <div class="col-">
    <!-- Conteúdo -->
  </div>
</div>

Utilizando Grids e Containers Juntos

Para criar um layout responsivo no Bootstrap, você geralmente começa com um container. Dentro desse container, você cria uma 'row', que é uma linha horizontal que contém colunas. Dentas das rows, você coloca suas colunas, que são onde seu conteúdo realmente vai. A soma total das colunas em uma row deve ser igual a 12.

<div class="container">
  <div class="row">
    <div class="col-6">
      <!-- Conteúdo -->
    </div>
    <div class="col-6">
      <!-- Conteúdo -->
    </div>
  </div>
</div>

Neste exemplo, temos duas colunas cada uma ocupando metade da largura da tela (6/12) em todos os tamanhos de tela. Você pode ajustar o número após 'col-' para controlar a largura da coluna em diferentes tamanhos de tela.

Conclusão

Os grids e containers do Bootstrap são ferramentas poderosas que permitem criar layouts complexos e responsivos com facilidade. Eles são a base de qualquer página web Bootstrap e são essenciais para entender se você quiser se tornar um desenvolvedor front-end eficaz. Com a prática, você será capaz de criar layouts de página inteira com facilidade, usando apenas grids e containers.

Espero que este capítulo tenha lhe dado uma compreensão clara de como usar grids e containers no Bootstrap. No próximo capítulo, vamos explorar mais alguns componentes do Bootstrap e como eles podem ser usados para melhorar ainda mais seus sites.

Next page of the Free Ebook:

6418. Componentes do Bootstrap: botões, formulários, carrossel