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

Instalação do Cuda 9 em distribuições Linux baseadas no Ubuntu

Se você deseja trabalhar com algoritmos de Machine Learning, provavelmente precisará usar processamento paralelo para acelerar os resultados dos seus algoritmos. Muitos frameworks como por exemplo, o TensorFlow, já possuem

Desenvolvimento

API RESTful com Laravel – Parte 2

Neste segundo post, iremos ver a nossa API Laravel funcional e mostrar na tela os nossos resultados. Iremos ver como o Laravel torna simples a criação de Rotas e Controller,

Desenvolvimento

API RESTful com Laravel

Nessa série de artigos veja como construir uma API RESTful para consulta de usuários em uma base de dados com ajuda do frawework Laravel. Mostrei como montar toda estrutura necessária,