Bootstrap (framework front-end)

Origem: Wikipédia, a enciclopédia livre.
Bootstrap
Bootstrap logo
Bootstrap (framework front-end)
Autor Mark Otto, Jacob Thornton
Desenvolvedor Bootstrap Core Team
Plataforma Mecanismo de renderização
Lançamento 19 de agosto de 2011
Versão estável 5.2.3 (22 dezembro 2022; 486 dias)
Versão em teste 5.3.0 alpha 3
Escrito em HTML, CSS, Less (v3), Sass (v4) e JavaScript
Licença MIT License (Apache License 2.0 prior to 3.1.0)
Estado do desenvolvimento Ativo
Página oficial getbootstrap.com
Repositório github.com/twbs/bootstrap/

Bootstrap é um framework web com código-fonte aberto para desenvolvimento de componentes de interface e front-end para sites e aplicações web, usando HTML, CSS e JavaScript, baseado em modelos de design para a tipografia, melhorando a experiência do usuário em um site amigável e responsivo.

O Bootstrap é um dos projetos mais bem avaliados no site GitHub, com mais de 111 600 estrelas e 51 500 forks.[1] Possui ampla documentação na página oficial: https://getbootstrap.com/, assim como diversos tutoriais e materiais em português.

Origem[editar | editar código-fonte]

Bootstrap é um projeto de código aberto originalmente desenvolvido para o site Twitter, chamado de Twitter Blueprint, desenvolvido por Mark Otto e Jacob Thornton como um instrumento para incentivar a consistência através de ferramentas internas.

Antes de Bootstrap, várias bibliotecas foram utilizadas para o desenvolvimento de interfaces, gerando inconsistências e um elevado peso de manutenção. De acordo com o desenvolvedor Mark Otto:

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

Depois de alguns meses de desenvolvimento por um pequeno grupo, muitos desenvolvedores no Twitter começaram a contribuir com o projeto, como parte da Hack Week. Ele foi renomeado como Twitter Blueprint to Bootstrap; e lançado como um projeto de código aberto em 19 de agosto de 2011.[2] Ele continuou a ser mantido por Mark Otto, Jacob Thornton e um pequeno grupo de desenvolvedores, bem como uma grande comunidade de colaboradores.[3]

Em 31 de janeiro de 2012, o Bootstrap 2 foi lançado; e foi responsável por acrescentar a layout grid responsiva de doze colunas, suporte interno para Glyphicons, vários novos componentes, bem como as alterações para muitos dos componentes existentes.[4]

Em 19 de agosto de 2013, o Bootstrap 3 foi lançado, sendo responsável por redesenhar componentes para uso em flat design; e uma abordagem para dispositivos móveis.[5]

Em 29 de outubro de 2014, Mark Otto anunciou que o Bootstrap 4 estava em desenvolvimento.[6] A primeira versão alfa do Bootstrap 4 foi lançada em 19 de agosto de 2015.[7] A primeira versão beta foi lançada em 10 de agosto de 2017.[8]

Em 5 de maio de 2021 a versão 5 do Bootstrap é lançada.

Recursos[editar | editar código-fonte]

O Bootstrap 3 suporta as versões mais recentes do Google Chrome, Firefox, Internet Explorer, Opera e Safari (exceto no Windows). Além disso, também suporta o IE8 e o mais recente Firefox Extended Support Release (ESR).[9]

Desde a versão 2.0, o Bootstrap oferece web design responsivo. Isso significa que o layout de páginas web se ajusta de forma dinâmica, de acordo com as características do dispositivo (computador, tablet, smartphone).

A partir da versão 3.0, o Bootstrap aprovou uma filosofia de mobile-first design, enfatizando o design responsivo por padrão.

A versão 4.0 alfa adicionou suporte ao Sass e flexbox. E o Bootstrap v5.0 deixou de usar jQuery como um requisito básico. Além disso, introduziu um conjunto de ícones por meio do Bootstrap icons.[10]

Estrutura e função[editar | editar código-fonte]

Example of a webpage using Bootstrap framework
Exemplo de uma página da web usando o framework Bootstrap renderizado no Mozilla Firefox

O Bootstrap é modular; e consiste de uma série de estilos Less que implementam os vários componentes do kit de ferramentas. Estas folhas são geralmente compiladas em um pacote e incluídas em páginas web, mas os componentes individuais podem ser incluídos ou removidos.

Desde a versão 2, a documentação do Bootstrap inclui um assistente para personalização, o que gera uma versão personalizada do Bootstrap com base nos componentes solicitados e várias configurações.

A partir do Bootstrap 4, o Sass é usada em vez do Less para as folhas de estilo.

Cada inicialização do componente consiste em uma estrutura HTML; declarações CSS; e, em alguns casos, acompanha código de JavaScript.

Folhas de estilo[editar | editar código-fonte]

O Bootstrap oferece um conjunto de folhas de estilo que faculta as definições de estilo para todos os principais componentes HTML. Estes fornecem uma aparência moderna para a formatação de texto, tabelas e elementos de formulário.

Componentes reutilizáveis[editar | editar código-fonte]

Além de regular os elementos do HTML, o Bootstrap contém outros elementos de interface comumente utilizados. Os componentes são implementados como classes CSS, as quais devem ser aplicadas a certos elementos HTML em uma página.

Componentes JavaScript[editar | editar código-fonte]

Representação do sistema de grade do Bootstrap.
Representação do sistema de grade do Bootstrap. Podemos delimitar o conteúdo usando as classes container, container-fluid e container-*.

O Bootstrap vem com vários componentes JavaScript no formulário de plugins jQuery (a versão 5 abandonou o uso do jQuery, sendo reescrito utilizando as funções nativas do JavaScript). Eles fornecem mais elementos de interface do usuário, tais como caixas de diálogo, dicas e carrosséis. Eles também estendem a funcionalidade de alguns elementos da interface, incluindo, por exemplo, uma função "autocompletar" para campos de entrada. Na versão 1.3,[11] os seguintes plugins JavaScript são suportados: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel e Typeahead.

Bootstrap 4[editar | editar código-fonte]

Em 29 de outubro de 2014, Mark Otto anunciou que o Bootstrap 4 estava em desenvolvimento. Em 6 de setembro de 2016, Mark suspendeu os trabalhos no Bootstrap 3, a fim de liberar mais tempo para trabalhar no Bootstrap 4. Mais de 4.000 mudanças foram feitas para o código base do Bootstrap 4 até agora.

O Bootstrap 4 é quase uma reescrita completa do Bootstrap 3. Alterações significativas incluem:

  • Migração do Less para o Sass;
  • Deixou de oferecer suporte para o IE8, IE9 e o iOS 6;
  • Adicionado suporte flexbox; e, em seguida, deixou de prestar suporte ao non-flexbox;
  • O aumento global do tamanho da fonte de 14px para 16px;
  • Reescreveu quase todos os componentes, jQuery, plugins e documentação.

Veja também[editar | editar código-fonte]

Referências

  1. «Search · stars:>1». GitHub. Consultado em 8 de setembro de 2020 
  2. Otto, Mark (19 de agosto de 2011). «Bootstrap from Twitter». Developer Blog. Twitter. Consultado em 8 de setembro de 2020. Cópia arquivada em 23 de fevereiro de 2017 
  3. «About». Bootstrap. Consultado em 8 de setembro de 2020 
  4. Otto, Mark (31 de janeiro de 2012). «Say hello to Bootstrap 2.0». Developer Blog. Twitter. Consultado em 8 de setembro de 2020. Cópia arquivada em 23 de fevereiro de 2017 
  5. Otto, Mark (19 de agosto de 2013). «Bootstrap 3 released». Consultado em 8 de setembro de 2020. Cópia arquivada em 23 de outubro de 2016 
  6. Otto, Mark (29 de outubro de 2014). «Bootstrap 3.3.0 released». Consultado em 8 de setembro de 2020. Cópia arquivada em 24 de julho de 2016 
  7. Otto, Mark (19 de agosto de 2015). «Bootstrap 4 alpha». Consultado em 8 de setembro de 2020. Cópia arquivada em 23 de janeiro de 2017 
  8. Otto, Mark; Thornton, Jacob (8 de setembro de 2020). «Bootstrap 4 Beta». Consultado em 16 de agosto de 2017 
  9. «Supported browsers». Bootstrap. Consultado em 8 de setembro de 2020 
  10. «Bootstrap Icons». icons.getbootstrap.com (em inglês). Consultado em 25 de março de 2022 
  11. «Bootstrap, from Twitter 1.3.0 Documentation - BootstrapDocs». bootstrapdocs.com (em inglês). Consultado em 8 de setembro de 2020 

Ligações externas[editar | editar código-fonte]