Bootstrap (estrutura de front-end) - Bootstrap (front-end framework)
Autor (es) original (is) | Mark Otto, Jacob Thornton |
---|---|
Desenvolvedor (s) | Bootstrap Core Team |
lançamento inicial | 19 de agosto de 2011 |
Versão estável | |
Repositório | Repositório Bootstrap |
Escrito em | HTML , CSS , Less (v3), Sass (v4) e JavaScript |
Plataforma | Plataforma web |
Licença | Licença MIT ( Licença Apache 2.0 anterior a 3.1.0) |
Local na rede Internet |
getbootstrap |
Bootstrap é uma estrutura CSS gratuita e de código aberto voltada para o desenvolvimento web front-end responsivo e móvel . Ele contém CSS - e (opcionalmente) modelos de design baseados em JavaScript para tipografia , formulários , botões , navegação e outros componentes de interface.
Em agosto de 2021, Bootstrap é o décimo projeto mais estrelado no GitHub , com mais de 152.000 estrelas, atrás de freeCodeCamp (mais de 328.000 estrelas), framework Vue.js , biblioteca React , TensorFlow e outros.
História
Começos iniciais
O Bootstrap, originalmente denominado Twitter Blueprint, foi desenvolvido por Mark Otto e Jacob Thornton no Twitter como uma estrutura para encorajar a consistência entre as ferramentas internas. Antes do Bootstrap, várias bibliotecas eram usadas para o desenvolvimento da interface, o que gerava inconsistências e uma alta carga de manutenção. De acordo com o desenvolvedor do Twitter, Mark Otto:
Um grupo super pequeno de desenvolvedores e eu nos reunimos para projetar e construir uma nova ferramenta interna e vimos uma oportunidade de fazer algo mais. Por meio 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 forma de documentar e compartilhar padrões de design e ativos comuns dentro da empresa.
Após alguns meses de desenvolvimento por um pequeno grupo, muitos desenvolvedores do Twitter começaram a contribuir com o projeto como parte da Hack Week, uma semana no estilo hackathon para a equipe de desenvolvimento do Twitter. Foi renomeado de Twitter Blueprint para 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 centrais, bem como uma grande comunidade de contribuidores.
Bootstrap 2
Em 31 de janeiro de 2012, o Bootstrap 2 foi lançado, adicionando suporte integrado para Glyphicons, vários novos componentes, bem como alterações em muitos dos componentes existentes. Esta versão suporta web design responsivo , ou seja, o layout das páginas web se ajusta dinamicamente, levando em consideração as características do dispositivo utilizado (seja desktop, tablet ou celular).
Bootstrap 3
Em 19 de agosto de 2013, o Bootstrap 3 foi lançado. Ele redesenhou os componentes para usar um design plano e uma abordagem móvel inicial . O Bootstrap 3 apresenta um novo sistema de plugins com eventos com namespace. O Bootstrap 3 eliminou o suporte ao Internet Explorer 7 e Firefox 3.6, mas há um polyfil opcional para esses navegadores.
Bootstrap 4
Mark Otto anunciou o Bootstrap 4 em 29 de outubro de 2014. A primeira versão alfa do Bootstrap 4 foi lançada em 19 de agosto de 2015. A primeira versão beta foi lançada em 10 de agosto de 2017. Mark suspendeu o trabalho no Bootstrap 3 em 6 de setembro de 2016, para liberar tempo para trabalhar no Bootstrap 4. O Bootstrap 4 foi finalizado em 18 de janeiro de 2018.
Mudanças significativas incluem:
- Reescrita importante do código
- Substituindo Less por Sass
- Além de
Reboot
, uma coleção de alterações CSS específicas do elemento em um único arquivo, com base emNormalize
- Descartando o suporte para IE8 , IE9 e iOS 6
- Box flexível CSS apoio
- Adicionando opções de personalização de navegação
- Adicionando espaçamento responsivo e utilitários de dimensionamento
- Mudança da unidade de pixels em CSS para root ems
- Aumentando o tamanho da fonte global de 14 px para 16 px para melhor legibilidade
- Soltando os
panel
,thumbnail
,pager
, ewell
componentes - Largando a
Glyphicons
fonte do ícone - Grande número de classes de utilidades
- Estilo de formulário, botões, menus suspensos, objetos de mídia e classes de imagem aprimorados
O Bootstrap 4 é compatível com as versões mais recentes do Google Chrome , Firefox , Internet Explorer , Opera e Safari (exceto no Windows). Além disso, ele oferece suporte ao IE10 e ao mais recente Firefox Extended Support Release (ESR).
Bootstrap 5
Bootstrap 5 foi lançado oficialmente em 5 de maio de 2021.
As principais mudanças incluem:
- Novo componente de menu offcanvas
- Removendo a dependência do jQuery em favor do JavaScript vanilla
- Reescrever a grade para oferecer suporte a calhas e colunas responsivas colocadas fora das linhas
- Migrando a documentação de Jekyll para Hugo
- Descartando o suporte para Internet Explorer
- Movendo a infraestrutura de teste de QUnit para Jasmine
- Adicionar conjunto personalizado de ícones SVG
- Adicionando propriedades personalizadas CSS
- API aprimorada
- Sistema de grade aprimorado
- Personalização aprimorada de documentos
- Formulários atualizados
- Suporte RTL
Recursos
Bootstrap é uma biblioteca HTML, CSS e JS que se concentra em simplificar o desenvolvimento de páginas da web 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. Dessa forma, o principal fator é se os desenvolvedores responsáveis consideram essas opções de sua preferência. Depois de adicionado a um projeto, o Bootstrap fornece definições básicas de estilo para todos os elementos HTML . O resultado é uma aparência uniforme para prosa, tabelas e elementos de formulário em navegadores da web . Além disso, os desenvolvedores podem tirar proveito das classes CSS definidas no Bootstrap para personalizar ainda mais a aparência de seus conteúdos. Por exemplo, o Bootstrap provisionou tabelas de cores claras e escuras, cabeçalhos de página, citações puxadas mais proeminentes e texto com destaque.
O Bootstrap também vem com vários componentes JavaScript na forma de plug-ins jQuery . Eles fornecem elementos adicionais de interface do usuário, como caixas de diálogo , dicas de ferramentas e carrosséis. Cada componente Bootstrap consiste em uma estrutura HTML, declarações CSS e, em alguns casos, código JavaScript que acompanha. 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.
Os componentes mais proeminentes do Bootstrap são seus componentes de layout, pois eles afetam uma página da web inteira. O componente de layout básico é chamado de "Container", 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 fluida. Enquanto o último sempre preenche a largura da página da web, o primeiro usa uma das cinco larguras fixas predefinidas, dependendo do tamanho da tela que mostra a página:
- Menor que 576 pixels
- 576-768 pixels
- 768-992 pixels
- 992-1200 pixels
- Maior que 1200 pixels
Uma vez que um contêiner está no lugar, outros componentes de layout Bootstrap implementam um layout CSS Flexbox 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 prontamente adicionados a qualquer projeto. A forma bruta do Bootstrap, no entanto, permite que os desenvolvedores implementem mais personalizações e otimizações de tamanho. Esta 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 .
Nome |
Hex (RGB) |
Vermelho (RGB) |
Verde (RGB) |
Azul (RGB) |
Matiz (HSL / HSV) |
Sat. (HSL) |
Leve (HSL) |
Sat. (HSV) |
Valor (HSV) |
Alternativas |
---|---|---|---|---|---|---|---|---|---|---|
Bootstrap White | #FFFFFF | 100% | 100% | 100% | 0 ° | 0% | 100% | 0% | 100% | Branco |
Bootstrap Gray 100 | # F8F9FA | 97% | 98% | 98% | 210 ° | 17% | 98% | 1% | 98% | |
Bootstrap Gray 200 | # E9ECEF | 91% | 93% | 94% | 210 ° | 16% | 93% | 3% | 94% | |
Bootstrap Gray 300 | # DEE2E6 | 87% | 89% | 90% | 210 ° | 14% | 89% | 4% | 90% | |
Bootstrap Gray 400 | # CED4DA | 81% | 83% | 85% | 210 ° | 14% | 83% | 6% | 86% | |
Bootstrap Gray 500 | # ADB5BD | 68% | 71% | 74% | 210 ° | 11% | 71% | 9% | 74% | |
Bootstrap Gray 600 | # 6C757D | 42% | 46% | 49% | 208 ° | 7% | 46% | 14% | 49% | Bootstrap Grey |
Bootstrap Gray 700 | # 495057 | 29% | 31% | 34% | 210 ° | 9% | 31% | 16% | 34% | |
Bootstrap Gray 800 | # 343A40 | 20% | 23% | 25% | 210 ° | 10% | 23% | 19% | 25% | Bootstrap cinza escuro |
Bootstrap Gray 900 | # 212529 | 13% | 15% | 16% | 210 ° | 11% | 15% | 20% | 16% | |
Bootstrap Black | # 000000 | 0% | 0% | 0% | 0 ° | 0% | 0% | 0% | 0% | Preto |
Bootstrap Blue | # 0D6EFD | 5% | 43% | 99% | 216 ° | 98% | 52% | 95% | 99% | |
Bootstrap Indigo | # 6610F2 | 40% | 6% | 95% | 263 ° | 90% | 51% | 93% | 95% | |
Roxo Bootstrap | # 6F42C1 | 44% | 26% | 76% | 261 ° | 51% | 51% | 66% | 76% | |
Rosa bootstrap | # D63384 | 84% | 20% | 52% | 330 ° | 67% | 52% | 76% | 84% | |
Bootstrap Vermelho | # DC3545 | 86% | 21% | 27% | 354 ° | 71% | 54% | 76% | 86% | |
Bootstrap Orange | # FD7E14 | 99% | 49% | 8% | 27 ° | 98% | 54% | 92% | 99% | |
Bootstrap Amarelo | # FFC107 | 100% | 76% | 3% | 45 ° | 100% | 51% | 97% | 100% | |
Bootstrap Green | # 198754 | 10% | 53% | 33% | 152 ° | 69% | 31% | 82% | 53% | |
Bootstrap Teal | # 20C997 | 13% | 79% | 59% | 162 ° | 73% | 46% | 84% | 79% | |
Bootstrap Cyan | # 0DCAF0 | 5% | 79% | 94% | 190 ° | 90% | 50% | 95% | 94% | |
cinza | # 808080 | 50% | 50% | 50% | 0 ° | 0% | 50% | 0% | 50% | Cinza |
Azul | # 0000FF | 0% | 0% | 100% | 240 ° | 100% | 50% | 100% | 100% | |
Índigo | # 4B0082 | 29% | 0% | 51% | 275 ° | 100% | 26% | 100% | 51% | |
Roxa | # 800080 | 50% | 0% | 50% | 300 ° | 100% | 25% | 100% | 50% | |
Cor de rosa | # FFC0CB | 100% | 75% | 80% | 350 ° | 100% | 88% | 25% | 100% | |
vermelho | # FF0000 | 100% | 0% | 0% | 0 ° | 100% | 50% | 100% | 100% | |
laranja | # FFA500 | 100% | 65% | 0% | 39 ° | 100% | 50% | 100% | 100% | |
Amarelo | # FFFF00 | 100% | 100% | 0% | 60 ° | 100% | 50% | 100% | 100% | |
Verde | # 008000 | 0% | 50% | 0% | 120 ° | 100% | 25% | 100% | 50% | |
Cerceta | # 008080 | 0% | 50% | 50% | 180 ° | 100% | 25% | 100% | 50% | |
Ciano | # 00FFFF | 0% | 100% | 100% | 180 ° | 100% | 50% | 100% | 100% | Aqua |