Entendendo as Grids do Bootstrap

A meta principal de todos os desenvolvedores é o desenvolvimento mais rápido. Nos últimos anos foram lançadas dezenas de frameworks que visam facilitar a montagem do esqueleto da aplicação.

Infelizmente, esses frameworks se tornam obsoletos em pouco tempo. Devido a rápida evolução dos recursos em HTML, fica difícil escolher um framework que solucione 100% dos seus problemas e ainda permaneça no mercado por muito tempo. As vezes uma determinada framework pode até permanecer no mercado, porém ela muda de versão constantemente, de certa forma isso é bom, o problema é que na maioria das vezes essas mudanças são tão significativas que acaba não compensando você atualizar a versão do framework que você está utilizando em seu projeto.

Mesmo assim, é altamente recomendado você utilizar um framework no seu projeto, porque dificilmente você conseguirá montar sozinho uma estrutura de códigos HTML, CSS e JavaScript tão eficiente e organizado quanto ao de um framework, isso sem contar a diversidade de componentes e recursos que um framework oferece.

Atualmente, existem vários framework HTML, CSS e JavaScript, e o mais famoso atualmente é o Bootstrap. Neste post vamos falar um pouco sobre ele.

OS GRIDS

Os grids é um dos aspectos mais importantes de qualquer framework HTML, CSS e JavaScript, especialmente quando ele proporciona uma flexibilidade maior na hora de apresentar seu site para o usuário.

Com os grids do bootstrap, você pode criar páginas com visuais adaptáveis ao dispositivo que está sendo utilizado para visualizar a página, sites com esse recurso, são conhecidos como sites responsive. Esses sites são capazes adaptar-se a Desktops, Tablets e Celulares sem precisar criar diversas versões deste mesmo site.

Para você entender melhor, veja abaixo como funciona o sistema de grid:

1. As linhas devem ser colocadas dentro de um .container (largura fixa) ou .container-fluid (largura total) para o alinhamento correto.
2. Use linhas para criar grupos horizontais de colunas.
3. O conteúdo deve ser colocado dentro de colunas, e somente as colunas podem ser filhas imediatas de linhas.
4. As classes pré-definidas como .row e .col-xs-4 estão disponíveis para você poder criar rapidamente layouts de grade.
5. Os padding estão definidos com valores negativos para descontar as margens das colunas.
6. As linhas são compostas por até doze colunas. Por exemplo, uma linha com três colunas iguais usaria três divs com a classe .col-xs-4.
7. Se houver mais de 12 colunas na mesma linha, as 12 primeiras colunas ficarão na primeira linha, as 12 segundas colunas na segunda linha e assim por diante.
8. Para tratar o comportamento das grids em cada dispositivo (Desktop, Tablet e Celular), você deverá utilizar as seguintes classes: .col-lg-* para dispositivos grandes, .col-md-* para dispositivos médios, .col-sm-* para dispositivos pequenos.

Veja como funciona o sistema de grid do bootstrap:

<div class="container">
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

O código acima faz a página se tornar adaptável a dispositivos médios (tablet). Para adicionar compatibilidade com dispositivos pequenos e grandes neste mesmo código, você deverá utilizar as classes .col-sm-* e col-lg-*.

Exemplo: Celulares, Tablets e Desktops

Veja abaixo um exemplo mais diversificado de como seria configurar diversas formas de apresentação para um mesmo elemento.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  </div>
</div>

Você poderá aprender mais através do link oficial do Bootstrap: http://getbootstrap.com/css/

Como você pode ver, o Bootstrap é muito complexo, portanto criamos uma ferramenta de construtor de site que aplica todos esses conceitos de forma otimizada, se você precisa criar site de forma comercial, você poderá se tornar um parceiro nosso e utilizar nossa ferramenta gratuitamente, e para seus clientes, só ficará o encargo da mensalidade.