O que é Bootstrap: Tudo sobre este Framework

O que é Bootstrap

Você sabe o que é o Bootstrap, para que serve e como utilizar? Neste artigo vamos entender o que é, como surgiu e como utilizar o principal framework CSS da atualidade. Também veremos sobre suas vantagens e desvantagens.

Portanto, você encontrará os seguintes tópicos:

 

15% OFF

O que é o Bootstrap

O Bootstrap nada mais é que um framework Front End utilizados por milhares de desenvolvedores web pelo mundo. A partir dele, muitas etapas do desenvolvimentos web se tornam mais rápidas e dinâmicas, pois já trazem consigo diversos elementos prontos e estilizados.

Ele é uma ferramenta gratuita para desenvolvimento HTML, CSS e JS. Portanto, é uma ferramenta de código fonte aberto para todos. Contudo, hoje em dia, é o framework Front End mais conhecido e mais utilizado pelo mundo.

Como surgiu o Bootstrap

Como uma tentativa de resolver uma incompatibilidade dentro da própria equipe, os engenheiros Jacob Thorton e Mark Otto, criaram em 2010 o que é hoje o Bootstrap.

O objetivo inicial era otimizar o desenvolvimento através da adoção de uma estrutura única, reduzindo assim, inconsistências entre as diversas formas de codificar que variavam de cada profissional. E a tentativa deu tão certo que eles perceberam o grande potencial da ferramenta, lançando-a no GitHub como um software livre.

Ainda não tem um www

Sendo lançado no GitHub no segundo semestre de 2011, o framework logo ganhou fama, sendo uma das ferramentais mais populares no GitHub já no começo de 2012.

O Bootstrap oferece uma enorme variedade de Plugins e temas compatíveis com outros frameworks. Além disto, possui integração com qualquer linguagem de programação. Também é um software de código aberto, gratuito. Em pouco tempo após o seu lançamento já recebeu a contribuição de inúmeros desenvolvedores de todo o planeta. Desta forma, tornando-o o software livre mais ativo do mundo.

A importância do Bootstrap

Conforme explicado anteriormente, o Bootstrap é hoje um dos frameworks/Front End mais utilizados pelo mundo inteiro. Portanto, sua importância para a criação de websites é de enorme referência.

Seus padrões seguem os princípios de usabilidade e as tendências de design para interfaces. Além disso, sua padronização permite que os sites tenham um visual atraente, ou seja, uma forma de criar páginas esteticamente agradáveis.

Como usar o Bootstrap

Para utilizar faça o download do Bootstrap no site oficial da ferramenta. Adicione os arquivos “bootstrap.min.css” e “bootstrap.min.js” nas pastas correspondentes a eles dentro do seu site. Depois, é só chamar o CSS e o JS dentro da tag <head> do HTML. É importante lembrar que este framework acessa a biblioteca jQuery para ativar o comportamento de seus plugins. Portanto, lembre-se de inseri-lo em sua página para que tudo funcione perfeitamente.

Outra forma, é chamando através de um artigo externo, conforme o próprio exemplo do Bootstrap:

CSS

JavaScript

Template inicial

Dessa forma, temos o template inicial conforme o código abaixo:

O que eu posso fazer

Com o Bootstrap é possível realizar a criação de interfaces gráficas para sua página na web de forma rápida e fácil. Portanto, é possível fazer diversas coisas. Você pode estar estudando a variedade de opções através da documentação do Bootstrap. Vamos citar aqui alguma das principais ferramentas utilizadas para o desenvolvimento com este framework.

1. Utilizar layout de Grid responsivo

Inicialmente, temos que utilizar a meta tag para ativar o responsivo em nossa página. Basta incluir no Head do nosso documento a seguinte linha de código:

Com isso podemos utilizar facilmente o sistema de contêiner e grid do Bootstrap para poder realizar a criação de interfaces gráficas responsivas. Como por exemplo no código abaixo:

Com isso, obtemos uma página com 3 colunas de proporções idênticas. Porém, graças a classe col-sm, ao chegar no tamanho de 576px (tamanho do valor SM), ela realiza uma quebra de linhas automaticamente. Inicialmente teremos algo como na imagem abaixo:

Exemplo de colunas responsivas com bootstrap

Ao chegarmos a uma tela com valor de 576px ou menor, é realizado a quebra de linha e obtemos então algo como na imagem abaixo:

Exemplo de colunas no modo responsivo com bootstrap

2. Criar tabelas

Com o Bootstrap, podemos estar criando tabelas Bootstrap com padrões pré definidos de uma forma rápida e simples. Vejamos o exemplo abaixo:

Dessa forma, teremos como resultado algo como na imagem abaixo:

Tabela

Você pode estar aprendendo mais sobre tabelas em nosso artigo sobre tabelas Bootstrap. Com a leitura desse artigo você será capaz de criar qualquer tabela com esse framework.

3. Criar figuras com estilos bases

Use as classes .figure, .figure-img e .figure-caption para conseguir alguns estilos bases para os elementos HTML5 <figure> e <figcaption>. Imagens na tag <figure> não possuem tamanhos explícitos, por isso, tenha certeza de colocar a classe .img-fluid no elemento <img>, para fazer com que ela seja responsiva.

Vejamos um simples exemplo abaixo:

Com isso teremos como resultado algo como na imagem abaixo:

Figura com legenda a direita

4. Criar um modal Bootstrap

Com o framework é possível estar criando um modal. Um modal é basicamente uma janela que abre sobre o conteúdo da página sem se desfazer dele. Como na imagem abaixo:

Modal Bootstrap

Você pode estar lendo mais a respeito e aprendendo a criar o seu próprio modal bootstrap em nosso artigo sobre.

5. Botões

Os botões Bootstrap são botões personalizados, com suporte a tamanhos, estilos e muito mais. Portanto, são utilizados dentro de formulários, diálogos ou outras coisas.

O Bootstrap possui vários estilos de botões pré-definidos para diversos propósitos, além de outros recursos extras para mais controle.

Vejamos o exemplo abaixo:

Dessa forma temos diversos tipos de botões como na imagem abaixo:

Botões bootstrap

Você pode estar lendo mais sobre em nosso artigo sobre botões Bootstrap, onde explicamos detalhadamente. Com a leitura deste, temos a certeza que você conseguirá criar e utilizar botões a vontade em suas páginas com o Bootstrap.

6. E muito mais

Além de tudo que citamos, é possível fazer muito mais. O Bootstrap é um framework bem completo e extremamente poderoso. Com ele você é capaz de criar páginas modernas completas. Portanto recomendamos a leitura da documentação para o aprendizado assim como ver alguns exemplos que estão disponibilizados.

Características e Vantagens do Bootstrap

Agora, vamos ver mais a fundo as características que fazem este framework valer a pena. Entre elas:

  • Biblioteca de componentes;
  • Reuso de código;
  • Documentação e comunidade;
  • Padrão visual;
  • Responsividade.

Biblioteca de componentes

Talvez uma das características mais interessantes deste framework é o fato dele possuir uma extensa biblioteca de componentes, como ícones, caixas de texto, painéis e cores em links.

Reuso de código

Assim como é objetivo de todo framework, ele permite que menos código possa ser escrito, já que ele entrega uma série de formatações visuais prontas. A única necessidade do desenvolvedor é saber qual a classe ele deve chamar.

Se você já é desenvolvedor, deve saber como este recurso pode ser útil na sua vida. Menos código digitado significa uma excelente forma de ganhar tempo.

Documentação e Comunidade

No site oficial do Bootstrap, você encontra uma documentação bem completa do framework. Por ter uma documentação sempre atualizada e de fácil acesso, tirar dúvidas da ferramenta é extremamente fácil.

Não apenas dúvidas, mas uma documentação atualizada permite que as melhores práticas de programação com o framework sejam conhecidas. Isto aumenta a chance de novos projetos serem feitos com qualidade visual e técnica, o que é ótimo para o valor final do produto.

Responsividade

O Bootstrap traz consigo um sistema de layout 100% responsivo, o que facilita muito a vida do desenvolvedor. Utilizando apenas o Bootstrap é capaz de manter a página completamente responsiva. E isso tudo com poucas linhas de código.

Desvantagens de usar o Bootstrap

Apesar de tantas qualidades, o uso do Bootstrap, assim como de qualquer ferramenta, também tem suas desvantagens.

A principal desvantagem seu uso é o excesso de padronização. Por ser muito utilizado mundo afora, é possível perceber vários sites que seguem um mesmo padrão, como se fossem praticamente cópias um dos outros. Isso torna ruim do ponto de vista de inovação. Porém, ainda assim, não é um fator decisivo que comprometa o uso ou desuso do framework.

Outra desvantagem, é que, para desenvolvedores mais avançados, soluções caseiras podem ser muito melhor. Pois, permitem melhores customização dos elementos. Claro que com o domínio dos dois, é possível mesclar entre o framework e estilização próprias.

Usar ou não usar?

Agora que você já sabe o que é, todas suas vantagens e também desvantagens, cabe a cada um decidir seu deve implementa-los em seu projetos ou não. Porém, independente de seu uso, conhecer seus recursos é muito importante para um desenvolvedor, pois diversas páginas são feitas utilizando esta ferramenta.

 

Publicado por

Rafael Marques

Desenvolvedor Web especialista em Front End apaixonado por tecnologia! www.instagram.com/rafaelmarquesdev/ linkedin.com/in/rafamarquesrmb/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

hhchat