Tecnologias

​Bootstrap (Framework)

Front-end

​Bootstrap (Framework)

​Bootstrap (Framework)

Bootstrap é um framework web de front-end gratuito e de código aberto. Ele contém modelos de design baseados em HTML e CSS para tipografia, formulários, botões, navegação e outros componentes de interface, além de extensões JavaScript opcionais. Ao contrário de muitos frameworks web anteriores, ele se preocupa apenas com o desenvolvimento front-end.

História

O Bootstrap, originalmente chamado de Twitter Blueprint, foi desenvolvido por Mark Otto e Jacob Thornton no Twitter como uma estrutura para incentivar a consistência entre ferramentas internas. Antes do Bootstrap, várias bibliotecas eram usadas para o desenvolvimento de interfaces, o que levava a inconsistências e um alto custo de manutenção. De acordo com o desenvolvedor do Twitter, Mark Otto:

Um grupo muito pequeno de desenvolvedores e eu nos reunimos para projetar e construir uma nova ferramenta interna e tivemos a oportunidade de fazer algo mais. Através desse processo, nos vimos construindo algo muito mais substancial do que outra ferramenta interna. Meses depois, terminamos com uma versão inicial do Bootstrap como uma maneira de documentar e compartilhar padrões e recursos de design comuns dentro da empresa.

Depois de alguns meses de desenvolvimento por um pequeno grupo, muitos desenvolvedores do Twitter começaram a contribuir para o projeto como parte do Hack Week, uma semana estilo hackathon para a equipe de desenvolvimento do Twitter. Ele foi renomeado do Twitter Blueprint para o Bootstrap e lançado como um projeto de código aberto em 19 de agosto de 2011. Ele continuou a ser mantido por Mark Otto, Jacob Thornton e um pequeno grupo de desenvolvedores de núcleo, bem como uma grande comunidade de colaboradores.

Em 31 de janeiro de 2012, foi lançado o Bootstrap 2, que adicionou suporte interno para o Glyphicons, vários novos componentes, bem como alterações em muitos dos componentes existentes. Esta versão suporta web design responsivo. Isso significa que o layout das páginas da Web se ajusta dinamicamente, levando em conta as características do dispositivo usado (desktop, tablet, celular).

A próxima versão principal, a Bootstrap 3, foi lançada em 19 de agosto de 2013. Ela reprojetou componentes para usar design plano e uma primeira abordagem móvel.

Características

O Bootstrap é um framework web que se concentra em simplificar o desenvolvimento de páginas informativas (em oposição a aplicativos da web). O objetivo principal de adicioná-lo a um projeto da Web é aplicar as opções de cor, tamanho, fonte e layout do Bootstrap a esse projeto. Como tal, o principal fator é se os desenvolvedores responsáveis encontram essas escolhas a seu gosto. Uma vez adicionado a um projeto, o Bootstrap fornece definições básicas de estilo para todos os elementos HTML. O resultado final é uma aparência uniforme para prosa, tabelas e elementos de formulário em navegadores da web. Além disso, os desenvolvedores podem aproveitar as classes CSS definidas no Bootstrap para personalizar ainda mais a aparência de seus conteúdos. Por exemplo, o Bootstrap forneceu tabelas de cores claras e escuras, cabeçalhos de página, citações de texto mais proeminentes e texto com realce.

O Bootstrap também vem com vários componentes JavaScript na forma de plugins jQuery. Eles fornecem elementos adicionais da interface do usuário, como caixas de diálogo, dicas de ferramentas e carrosséis. Cada componente do Bootstrap consiste em uma estrutura HTML, declarações CSS e, em alguns casos, no código JavaScript. Eles também estendem a funcionalidade de alguns elementos de interface existentes, incluindo, por exemplo, uma função de preenchimento automático para campos de entrada.

Exemplo de uma página da Web usando o framework Bootstrap

Exemplo de uma página da Web usando a estrutura do Bootstrap renderizada no Firefox

Os componentes mais importantes do Bootstrap são seus componentes de layout, pois afetam uma página da web inteira. O componente básico de layout é chamado de Contêiner, já que todos os outros elementos da página são colocados nele. Os desenvolvedores podem escolher entre um contêiner de largura fixa e um contêiner de largura de fluido. Enquanto o último sempre preenche a largura da página da web, o primeiro usa uma das quatro larguras fixas predefinidas, dependendo do tamanho da tela que mostra a página:

Menor que 576 pixels

576 a 768 pixels

768 a 942 pixels

992-1200 pixels

Maior que 1200 pixels

Depois que um contêiner estiver em vigor, outros componentes de layout do Bootstrap implementarão um layout de grade CSS por meio da definição de linhas e colunas.

Uma versão pré-compilada do Bootstrap está disponível na forma de um arquivo CSS e três arquivos JavaScript que podem ser facilmente adicionados a qualquer projeto. A forma bruta do Bootstrap, no entanto, permite que os desenvolvedores implementem mais personalizações e otimizações de tamanho. Essa forma bruta é modular, o que significa que o desenvolvedor pode remover componentes desnecessários, aplicar um tema e modificar os arquivos Sass não compilados.