Um dos grandes diferenciais de quem começa no mercado de desenvolvimento front-end é saber escolher as ferramentas certas para agilizar seu trabalho. A manipulação de HTML, CSS e JavaScript pode se tornar uma tarefa repetitiva algumas vezes, e contar com uma “ajudinha” nessas horas não é uma má ideia. Observando essa situação é que foi desenvolvido o Bootstrap, um framework que vem ganhando cada vez mais força entre os desenvolvedores front-end ao longo dos anos. Com uma documentação sólida e bem explicada, esse framework é a ferramenta certa para quem deseja um guia de estilo completo na hora de elaborar um bom layout.

Um pouco da história

Em meados de 2010, o Twitter estava com muitos problemas relacionados a inconsistências de desenvolvimento dentro do seu grupo de engenheiros de software. A falta de padronização do seu código fonte era evidente, e trazia consigo diversos problemas pela plataforma de desenvolvimento não ser uniforme. O tempo de duração das manutenções no sistema eram enormes, e o medo generalizado na hora de implementar novas funcionalidades fizeram com que alguma medida tivesse que ser tomada o mais rápido possível.

Foi então que Mark Otto e Jacob Thorton, ambos engenheiros do Twitter, tiveram a ideia incentivar o uso de uma única estrutura de código entre os desenvolvedores, reduzindo os problemas de inconsistência e aumentado a agilidade no desenvolvimento. Rapidamente a solução interna da empresa ganhou popularidade, e em agosto de 2011 a estrutura Bootstrap se tornou um projeto de software livre no Github. A partir daí o framework ganhou fama pelo seu potencial em proporcionar a suas aplicações um design responsivo em diversas plataformas na web.

O Bootstrap

O framework Bootstrap nada mais é do que um conjunto de classes e funções manipuláveis que não conflitam entre si. Todos esses elementos são personalizáveis para projetos web, além de serem previamente empacotados em uma única ferramenta. Essa ferramenta geralmente é composta por um arquivo .JS e um .CSS, cuja a importação deve ser realizada dentro da página HTML do seu projeto. Além disso, podemos considerar as classes CSS como principal alicerce para o funcionamento do Bootstrap. O framework possui toda sua arquitetura baseada na organização e relacionamento entre essas classes, ou seja, se você conhece as classes CSS vai conseguir trabalhar com o Bootstrap.
Além da grande quantidade de classes e funções JavaScript, devemos destacar o excelente sistema de grid do Bootstrap. Esse sistema foi desenvolvido com o objetivo de facilitar e padronizar a criação de layouts, dividindo a tela em que será apresentado seu projeto em uma série de linhas e colunas que vão abrigar o conteúdo. Essa divisão, por sua vez, consegue estabelecer um dinamismo entre conteúdo e tela, fazendo com que o Bootstrap se torne responsivo para diversos dispositivos.\r\nEntre os diversos elementos que compõe o framework, os mais comuns são: container, row e column. Esses três elementos pertecem ao grupo das classes de grid, e são utilizados na estruturação básica de qualquer layout Bootstrap. A classe container desempenha a função de agrupar row (linha) e column (coluna), a fim de não haja conflito entre elas.

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<meta name="viewport" content="initial-scale=1, maximum-scale=1">
			<title>Exemplo de Utilização do Bootstrap</title>
			<!-- Importação via CDN da versão minificada do arquivo bootstrap.min.css -->
			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
			<!-- Importação via CDN da versão minificada do arquivo bootstrap.min.js -->
			<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		</head>
			<body>
				<div class="container">
				    <div class="row">
						<div class="col-md-12">
						<h1 class="text-center">Título Centralizado com Bootstrap</h1>
						<!-- Classe text-center deixa o texto alinhado -->
						<img src="sua-imagem" class="center-block img-responsive"> 
						<!-- Classes center-block e img-responsive centralizam e deixam a imagem responsiva -->
						</div>
					</div>
				</div>
			</body>
	</html>

No exemplo acima é possível observar como devemos respeitar a ordem de utilização das classes do Bootstrap: container > row > column. Outro ponto importante, é o de aproveitarmos corretamente o uso das variações da classe column, que são: xs (celulares), sm (tablets), md (desktops), e lg (desktops). Cada tipo de column se adapta corretamente ao dispositivo, sem que seja necessário qualquer incrementação de código.

Bootstrap para todos

Conhecendo um pouco sobre um dos frameworks mais utilizados da atualidade, podemos perceber diversos benefícios relacionados sua utilização em um projeto front-end, como agilidade, reaproveitamento e manipulação de código. Sendo necessário apenas conhecimentos básicos em HTML, CSS e JavaScript, o Bootstrap pode ser uma boa opção para quem está iniciando no mundo do desenvolvimento web, além de fornecer uma documentação livre e completa no seu site oficial: http://getbootstrap.com.