Guia Fundamental: Como Utilizar o Bootstrap para Sites Responsivos

O Bootstrap é um framework front-end utilizado para criar sites responsivos. Neste pequeno artigo ofereço um guia fundamental sobre este recurso para ajudá-lo deixar seus sites compatíveis com qualquer dimensão de tela.

O Bootstrap é composto por CSS e JS, no entanto, a maioria de suas funcionalidades podem ser utilizados sem o arquivo JS. Dependendo do site que esta sendo desenvolvido temos que carregar apenas um arquivo e além disso, podemos encontrar o Bootstrap em diversas hospedagens online.

Com a hospedagem online, uma vez que o seu usuário tenha entrado em outro site que já utilizou o Bootstrap por essa hospedagem, quando ele entrar no seu site, o arquivo já estara em cache e não precisa ser carregado novamente.

Uma das principais diferenças que o Bootstrap trouxe foi a criação de um sistema de grid muito interessante. O grid do Bootstrap é dividido em doze colunas e é utilizado deste modo: .col-(prefixo)-(tamanho).

Os prefixos existentes são: “xs” para telas abaixo de 768px, “sm” para telas de 768px até 992px, “md” para telas de 992px até 1200px e “lg” para telas acima de 1200px.

O tamanho vai de 1 até 12, deste modo podemos somar o tamanho das colunas até 12, caso seja maior, a próxima coluna inicia uma outra linha.

Deste modo podemos controlar nosso site dependendo de onde o site estiver sendo executado, celulares, tablets ou desktops.

Exemplo:

<div class="container">
	<div class="row">
		<div class="col-xs-12 col-md-4 col-lg-6">Coluna 1</div>
		<div class="col-xs-12 col-md-4 col-lg-6">Coluna 2</div>
		<div class="col-xs-12 col-md-4 col-lg-6">Coluna 3</div>
		<div class="col-xs-12 col-md-4 col-lg-6">Coluna 4</div>
	</div>
</div>

Em telas maiores que 1200px, uma linha sera dividida em duas colunas, em telas maiores que 992px até 1200px, sera dividido em três e para telas menores que 768px cada coluna sera um linha.(http://jsfiddle.net/teof0c0h/)

Para que o Bootstrap não fique igual em todos os sites, eles desenvolveram uma página de customização onde é possível customizar praticamente tudo. É possível escolher quais componentes quer, plugins adicionais que utilizam o jQuery, fontes, ícones, alterar as cores padrões e muitos outros. Isto pode ser realizado neste link: https://getbootstrap.com/docs/3.3/customize/ .

Customização

No entanto, dependendo do design do seu site, algumas customizações adicionais podem ser necessárias para deixar o site igual ao que foi elaborado por um designer, para resolver todos estas customizações adicionais nada melhor do que trabalhar em equipe com o designer.

Exemplo de um tema criado com Bootstrap

Comece explicando o que é o Bootstrap e o porque utilizá-lo, altere a customização junto com designer e depois peça um lista de customizações adicionais que o site não tem, deste modo é possível diminuir ou eliminar o atrito entre estas duas áreas que devem sempre trabalhar junto.

Para finalizar, você pode olhar o site da W3Techs que executa diversos estudos de tecnologias web, e ver que o Bootstrap já é utilizado em 15% dos sites e atualmente aparece em crescimento.

*A versão aqui exemplificada é a versão 3.3, existe também a versão 4.0 que atualmente esta em beta e deve ser lançada em breve.