Bootstrap: torne seus sites responsivos

Bootstrap: torne seus 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.

Bootstrap

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.

Anterior 12 Metodos para prevenir-se de ataques DDOS
Próxima Segurança contra Hackers: TOP 5 estrategias

About author

Você pode gostar também

Desenvolvimento

Versionamento de Código utilizando Git/GitFlow/GitHub

Conhecendo o Git Git – é uma das, senão a mais utilizada ferramente de SCM (Source Control Management) presentes no mercado de TI e um ponto muito importante, é disponibilizado

Desenvolvimento

PHP, como aprender? Por onde começar?

No ano passado, em 2017, não foram poucas as vezes em que fui abordada por pessoas, em sua maioria mulheres, que me perguntaram: Como faço pra aprender PHP? Em início

Desenvolvimento

Darkmira Tour PHP 2019 – 4Linux presente em mais um evento de TI!

4Linux estará presente no Darkmira Tour 2019 com a palestra: MIGRATIONS PARA APLICAÇÕES PHP UTILIZANDO PHINX E aí, você conhece o Darkmira Tour PHP? Este é um evento imperdível, que