O que é Bootstrap? Guia para iniciantes

O Bootstrap se tornou uma ferramenta essencial para desenvolvedores front-end.

Mas o Que é Bootstrap?

Você sabe que é útil, mas para que serve e ​como isso realmente ajuda desenvolvedores web​?

O kit de ferramentas de desenvolvimento de aplicativos da Web foi criado pelos ex funcionários do Twitter Mark Otto e Jacob Thornton.

O site oficial do Bootstrap descreve o Bootstrap como:

“A estrutura HTML, CSS e JS mais popular para o desenvolvimento de primeiros projetos móveis responsivos na web.”

Em termos leigos:

Bootstrap é uma coleção gigante de bits de código úteis e reutilizáveis ​​escritos em HTML, CSS e JavaScript. É também uma estrutura de desenvolvimento de front-end que permite que desenvolvedores e designers criem sites totalmente responsivos rapidamente.

O Bootstrap evita que você escreva muito código CSS, dando a você mais tempo para gastar no design de páginas da web.

Também é GRÁTIS!

Atualmente, está hospedado no GitHub e pode ser baixado facilmente em getbootstrap.com.

Por que o Bootstrap é o preferido para os desenvolvedores da web?

Vamos dividir as vantagens em 8 partes:

1. Grade responsiva do bootstrap

Chega de gastar horas codificando a sua própria grade – o Bootstrap vem com o seu próprio sistema de grade predefinido!

Agora, você pode começar a encher os seus containers com conteúdo.

Definir pontos de interrupção personalizados para cada coluna é muito fácil, usando as suas quebras extra pequenas, pequenas, médias, grandes e extra grandes. Você também pode simplesmente manter o padrão, pois ele já pode atender às necessidades do seu site.

2. Imagens Responsivas do Bootstrap

O Bootstrap vem com o seu próprio código para redimensionar imagens automaticamente com base no tamanho da tela atual. Basta adicionar a classe responsiva .img às suas imagens e as regras CSS predefinidas cuidarão do resto.

Deixe o Bootstrap redimensionar as suas imagens para você!

Ele pode até mesmo mudar a forma das suas imagens com a adição de classes como img-circle e img-rounded, e isso sem ir e voltar entre o código e o seu software de design.

3. Componentes do Bootstrap

O Bootstrap vem com vários componentes que você pode adicionar facilmente à sua página da web, incluindo:

• Barras de navegação
• Dropdowns
• Barras de progresso
• Miniaturas
• …e mais!

Não é apenas tranquilo adicionar elementos de design atraentes à sua página da web, você também poderá ter a certeza de que cada um deles terá uma ótima aparência, independentemente do tamanho da tela ou do dispositivo usado para visualizá-los.

São muitas funcionalidades prontas ao seu alcance!

4. JavaScript do Bootstrap

Ainda não tem funções suficientes? Experimente o JQuery!

O bootstrap também permite que os desenvolvedores tirem vantagem de mais de uma dúzia de plug-ins JQuery personalizados. JQuery oferece ainda mais espaço para brincar com a interatividade, oferecendo soluções fáceis para pop-ups modais, transições, carrosséis de imagens e – um dos meus favoritos – um plugin chamado scrollspy, que atualiza automaticamente a sua barra de navegação conforme você rola por uma página.

5. Documentação do Bootstrap

A documentação do Bootstrap é uma das melhores que já vi. Cada pedaço de código é descrito e explicado em detalhes explícitos no seu site.

As explicações também incluem exemplos de código para implementação básica, simplificando o processo até mesmo para o mais iniciante dos iniciantes. Tudo o que você precisa fazer é escolher um componente, copiar e colar o código na sua página e ajustar a partir daí.

6. Personalização do Bootstrap

Uma das principais críticas quando se trata de frameworks como o Bootstrap é o seu tamanho – o peso que eles jogam pode realmente desacelerar o seu aplicativo no primeiro carregamento. A versão atual do arquivo CSS do Bootstrap, por exemplo, tem 119 KB. Embora possa não parecer muito grande em comparação com arquivos de imagem e vídeo, para um arquivo CSS, isso é enorme!

O que o Bootstrap permite que você faça para combater isso, no entanto, é personalizar a funcionalidade que deseja incluir no download. Simplesmente acessando a página de personalização e download deles, você pode verificar os recursos de que não precisa para o seu aplicativo, reduzindo o peso do seu arquivo e poupando aos usuários o tempo de carregamento adicional.

A personalização é a chave!

7. Comunidade Bootstrap

Como em tantos projetos de código aberto, o Bootstrap tem uma grande comunidade de designers e desenvolvedores por trás dele. Estar hospedado no GitHub torna mais fácil para os desenvolvedores modificar e contribuir com a base de código do Bootstrap. Também torna mais fácil para as pessoas colaborarem, darem seus conselhos e interagirem com colegas e usuários.

O Bootstrap tem uma página ativa no Twitter, um blog do Bootstrap e até uma sala exclusiva do Slack. E isso nem chega à riqueza de desenvolvedores dispostos a ajudar com problemas técnicos no Stack Overflow, onde todas as perguntas podem ser encontradas na tag bootstrap-4.

8. Templates Externos do Bootstrap

Conforme a popularidade do Bootstrap cresceu, as pessoas começaram a criar templates baseados no Bootstrap para acelerar ainda mais o processo de desenvolvimento web. Existem muitos sites dedicados a compartilhar e comprar modelos personalizados com base no Bootstrap.

Por que você não deve usar o Bootstrap?

Agora, você provavelmente está pensando que para usar o Bootstrap não precisa de cérebro!

Mas lembre-se de que cada moeda tem dois lados.

Como quase tudo na vida, até o Bootstraps tem suas desvantagens.

Vamos dar uma olhada rápida em algumas reclamações comuns que você pode ouvir sobre o Bootstrap:

A sintaxe do bootstrap é confusa!

Antes de se familiarizar com o Bootstrap, algumas de suas sintaxes podem ser confusas. Ao usar o sistema de grade, por exemplo, para fazer uma coluna que ocupe um terço da tela, você deve adicionar a classe .col-md-4 a ela.

4? De onde veio esse 4?!

Sem dúvida, os quatro podem levar você a acreditar que a coluna ocuparia um quarto da tela – não um terço. Embora essa sintaxe faça sentido (o Bootstrap usa um sistema de 12 colunas e 4 é um terço de 12), pode não ser intuitiva para quem é novo no processo inteiro.

Os arquivos de bootstrap são muito grandes!

Como mencionado anteriormente, os arquivos Bootstrap podem ser um pouco, bem, grandes para contabilizar a funcionalidade completa oferecida por sua estrutura. Isso pode levar a um aumento no tempo de carregamento de sites, especialmente em redes mais lentas.

Os iniciantes podem ter dificuldade em identificar e corrigir esse problema; no entanto, como mencionado acima, a ferramenta de personalização no site do Bootstrap pode ajudar a eliminar qualquer código desnecessário para funções que você nunca usará.

Bootstrap – faça do seu jeito!

Basta escolher os pedaços de que precisa e deixar o resto. (Claro, essa tarefa fica mais fácil quanto mais você sabe sobre codificação!)

Bootstrap me impede de realmente aprender a codificar!

Sempre há o risco de que, ao usar o Bootstrap, você entre em um ciclo de simplesmente reciclar o código existente sem realmente entendê-lo. Ao gastar tempo para realmente aprender o que está fazendo, no entanto, você pode usar o Bootstrap como uma forma de acelerar o seu aprendizado, em vez de atrapalhar.

Resumindo:

Como você provavelmente já notou, o Bootstrap é uma ferramenta poderosa que permite ao desenvolvedor começar a trabalhar de forma rápida e sem dor. Facilita a integração de muitos recursos excelentes que enriquecem a interação do usuário com a web sem a necessidade de codificá-los do zero.

O Bootstrap é imensamente popular e tem sido usado para construir alguns sites excelentes. Não acredita?

Confira o site do MongoDB, o site da NASA ou até mesmo o FIFA.com.

Fonte: https://careerfoundry.com/en/blog/web-development/what-is-bootstrap-a-beginners-guide/