Ads

Logo Bootstrap

Bootstrap é um kit de ferramentas (biblioteca) de desenvolvimento de aplicativos e páginas Web criado pelos ex-funcionários do Twitter; Mark Otto e Jacob Thornton.

Mark Otto e Jacob Thornton, criados do BootStrap

O Bootstrap é hoje a estrutura HTML, CSS e JS mais popular para o desenvolvimento de primeiros projetos móveis responsivos na web.

Trata-se é uma coleção de códigos úteis prontos para uso. Focado no desenvolvimento front-end, o Bootstrap permite que desenvolvedores e designers criem sites totalmente responsivos rapidamente.

Resumindo tudo isso, o Bootstrap evita que você escreva muito código, dando a você mais tempo para gastar no design de páginas da web e o melhor tudo, é totalmente gratuito.

Principais vantagens de usar Bootstrap em projetos da web

1. Sistema grid responsivo

Um sistema de grid é como organizamos o conteúdo de nossos sites, basicamente em linhas e colunas. Diferentemente de anos atrás, usávamos tabelas para organizarmos nossos conteúdos mas hoje usamos DIVs, que são agrupamentos de conteúdos.

O sistema de grid do Bootstrap oferece um forma prática de trabalhar com estas linhas e colunas. Definir pontos de interrupção personalizados para cada coluna é muito fácil, usando 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.

Entenda melhor como funciona acessando este site http://shoelace.io/

Sistema de grid do Bootstrap gerado automaticamente pelo site shoelace.io

2. Imagens responsivas do Bootstrap

O Bootstrap vem com 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 suas imagens para você!

Ele pode até mesmo mudar a forma de 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 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!

É muito fácil 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!

Para uma lista mais completa de recursos adicionáveis, verifique a documentação do componente.

4. JavaScript do Bootstrap

O bootstrap também permite que os desenvolvedores tirem vantagem de mais de uma dúzia de plug-ins JQuery personalizados. 

O JQuery oferece 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 sua barra de navegação conforme você rola por uma página.

5. Documentação do Bootstrap, só copiar e colar.

A documentação do Bootstrap é uma das melhores que existem. Cada pedaço de código é descrito e explicado em detalhes.

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 em sua página e ajustar a partir daí.

6. Personalização do Bootstrap

Uma das principais críticas quando se trata de bibliotecas como o Bootstrap é seu tamanho – o peso que eles jogam pode realmente desacelerar seu aplicativo ou site logo 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. Modelos e Templates gratuitos na Web

Está sem criatividade para criar o site daquele cliente que tem pressa na entrega, ou quer dar uma melhorada nos seus sites explorando outras aplicações do Bootstrap? Para isso existem os templates.

Conforme a popularidade do Bootstrap cresceu, as pessoas começaram a criar modelos 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. Dê uma pesquisada no Google.

Além dos modelos gratuitos você também pode comprar templates profissionais em sites como Theme Forest e Envato Elements.

9. Suporte dos editores de código mais populares.

O Bootstrap é recurso quase que nativo na maioria dos editores de códigos para Web, além de estar disponível também para IDEs domo Visual Studio, Net Beans e Eclipse.

Clique na imagem para executar o GIF – Extensão de Snippet para Bootstrap agiliza o desenvolvimento no editor Brackets.

Mas se você é desenvolvedor web deve ter seu editor de código favorito; Brackets, Atom, Sublime, Visual Code até mesmo o aclamado NotePad ++ possuem recursos que facilitam o uso do Bootstrap e você pode adicionar extensões como snippets, códigos curtos que geram outros códigos e fazem o desenvolvimento ficar ainda mais rápido.

Desvantagens do uso do BootStrap

Nem tudo é flores né? Então resolvi listar também as desvantagens. Vamos dar uma olhada rápida em algumas reclamações comuns que você pode ouvir sobre o Bootstrap.

1. A sintaxe do bootstrap é confusa para iniciantes.

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 em todo o processo.

2. 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!)

3. Bootstrap me deixa burro?

Sempre há o risco de que, ao usar o Bootstrap, você entre em um ciclo de simplesmente copiar e colar 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 seu aprendizado, em vez de atrapalhar.

Portanto, não deixe o Bootstrap atrapalhar seus estudos, não caia na tentação da facilidade de apenas dar um Ctrl + C e Ctrl + V.

Como aprender a criar meu primeiro site usando Bootstrap?

Aqui mesmo no Blogson você pode aprender a criar seus primeiros sites usando BS

  1. Introdução ao BootStrap
  2. Bootstrap Starter Template
  3. Bootstrap – Sistema de Grid
  4. Formulários com HTML 5 e BootStrap
Ads