Bootstrap

bootstrap-apresentacao1. O que é?

Em 2011, o Bootstrap foi criado como uma solução interna para resolver inconsistências de desenvolvimento dentro da equipe de engenharia do Twitter. Basicamente, não havia uma definição de estrutura de código na forma escolhida pelos engenheiros do Twitter para desenvolver a plataforma.

O Bootstrap foi uma ferramenta desenvolvida originalmente por Mark Otto e Jacob Thorton, então engenheiros do Twitter, como uma tentativa de incentivar o uso de uma única estrutura pela equipe de engenharia do Twitter, reduzindo essas inconsistências. A iniciativa do Bootstrap certamente foi bem-sucedida no Twitter, permitindo que toda a equipe trabalhasse com maior rapidez e eficiência e menos inconsistências.

2. Utilidade:

O Bootstrap é um framework que facilita a vida dos desenvolvedores web a criar sites com tecnologia mobile (responsivo) sem ter que digitar uma linha de CSS para desenvolver. Não é a toa que o termo “Bootstrap” em inglês significa “inicialização”, algo que possui um ponto de partida.

Se pensarmos que, quando começamos um novo projeto, nós precisaremos criar vários estilos para formatar títulos, definir tamanhos e proporções ou mesmo organizar a disposição da página, podemos usar o Bootstrap pode otimizar nosso trabalho com suas estruturas pré-definidas. Você pode escolher, dentre os estilos e componentes oferecidos, aquilo que você precisa.

Inclusive neste sentido, ao invés de criarmos toda esta formatação inicial por conta própria, podemos simplesmente usar os recursos disponíveis, personaliza-los segundo a nossa necessidade e partimos para a construção das páginas.

Vantagens do Bootstrap:

  • Compatibilidade: quantas vezes você precisou ficar testando como o seu site se comporta em vários navegadores? Com o Bootstrap esta é uma preocupação a menos (desde que você use o framework da maneira correta, é claro), já que ele funciona em todos os principais navegadores atuais;
  • Documentação: ela é detalhada e fácil de se entender, apresentando explicações e exemplos;
  • Responsivo: atualmente sabemos que muitas pessoas acessam os sites através de celulares e tablets, portanto eles precisam ser responsivos. Nativamente os estilos do Bootstrap se ajustam a dispositivos menores, além de oferecer ao desenvolvedor muitas possibilidades para adaptações do site para telas menores;
  • Grátis: você pode baixar e utilizar o Bootstrap sem pagar nada por isso;
  • Fácil de usar: seus padrões de desenvolvimento são simples e documentados, em pouco tempo qualquer pessoa que nunca tenha tido contato com o framework já consegue utilizá-lo;
  • Popular: em conta das suas vantagens e recursos, é um dos frameworks mais utilizados no mundo, por isso muitos exemplos, apostilas e artigos sobre o assunto estão disponíveis para consulta

Desvantagens do Bootstrap:

  • Seu código terá de seguir os “padrões de desenvolvimento Bootstrap”;
  • Tema padrão e comum do Bootstrap (caso não faça ajustes visuais, seu projeto se parecerá com outros que também utilizam o Bootstrap).

3. Como funciona

bootstrap-estrutura

A estrutura é simples e seu pacote contém três tipos diferentes de arquivos (CSS, JavaScrpipt e Fonts), que vêm devidamente organizados em suas pastas.


Inclusão do estilo do Bootstrap:

<link href=“css/bootstrap.min.css” rel=“stylesheet”>


Inclusão do framework jQuery (necessário se você usar os componentes do Bootstrap):

<! jQuery (necessary for Bootstraps JavaScript plugins) >

Inclusão de JavaScript do jQuery, necessário para uso dos componentes do Bootstrap (o item anterior é um arquivo que serve como base para os componentes, o item a seguir contém a codificação em si para os componentes):

<! Include all compiled plugins (below), or include individual files as needed >
src=“js/bootstrap.min.js”>

Montar um layout é simples e rápido utilizando sua documentação. Como toda a estrutura do CSS já vem definida, basta procurar o componente necessário e adicionar seu código. Em poucos minutos seu layout toma forma e está pronto para uso! E o mesmo acontece com o JavaScript.

O sistema de grids

O principal conceito que você precisa conhecer para usar o Bootstrap é que ele monta a sua página através de colunas e a quantidade máxima é 12:

bootstrap-grid-1

Obviamente você não precisa dividir a sua página em 12 colunas, elas são apenas referências, você pode usar outras divisões:

bootstrap-grid-2

Caso 1 – conteúdo ocupando todo o espaço disponível;
Caso 2 – espaço disponível dividido no meio, em partes iguais;
Caso 3 – o conteúdo está dividido em três partes iguais.

Isso pode parecer estranho em um primeiro momento, mas acredite que a maioria dos sites podem ser perfeitamente encaixados nestes grids. E isso, além de manter uma harmonia no site, evitando que ele fique irregular e desproporcional, permite também uma fácil adaptação para dispositivos menores.

Dentro de uma coluna você pode criar divisões dentro dela. Apenas se lembre que as colunas não são fixas, os valores anteriores se referem a proporções.

Por exemplo, para dividir a área destacada abaixo em duas partes precisaríamos usar a proporção de 6 (6 é metade de 12, a quantidade máxima de colunas, logo 6 representa 50% do espaço disponível):

Bootstrap colunas grids proporções quase1nerd

Esta conta de proporção é bem simples, basta você seguir o seguinte pensamento: você quer dividir a sua área em quantos espaços (colunas)?

Duas colunas, mesmas proporções:
Bootstrap grids 6 6
Três colunas, uma maior e duas pequenas:
bootstrap-grid-6-3-3

 

Duas colunas divididas ao meio, na primeira mais duas divisões e na segunda três:
bootstrap-grid-6-6-6-6-4-4-4-quase1nerd

 

Um espaço para o banner completo + três divisões + duas divisões iguais a um blog (lado esquerdo maior e direito menor):
bootstrap-grids-blog-banner

Classes responsivas

O Bootstrap automaticamente adapta o seu site para dispositivos menores, desde que você use as classes oferecidas pelo framework de colunas (grids, comentados anteriormente). Mas você tem autonomia para personalizar o seu site, fazendo com que determinado pedaço não apareça em dispositivos menores.

bootstrap responsivo

Se você usasse a classe “visible-md-3” por exemplo, ela só apareceria para tablets e computadores.

bootstrap-grid-responsive

Formatações para texto

Ao invés de criar estilos complementares para formatar textos, podemos usar os estilos já disponíveis e inclusive combiná-los. Se você precisar deixar um texto centralizado, basta acrescentar a classe “text-center”.