Introdução ao Bootstrap para iniciantes

Gosto muito de desenvolver aplicações (simples ou não) com o Bootstrap, que é um framework CSS que ajuda e muito no desenvolvimento front end, então criei este post para tentar apresentar o framework para quem está iniciando, principalmente o pessoal das comunidades de desenvolvimento web do Facebook, que vira e meche postam dúvidas bem básicas sobre o Bootstrap.


Antes de iniciar, quero esclarecer que a minha intenção com este post (que pode e deve evoluir para uma lista de posts sobre o assunto) é apenas tentar apresentar o Bootstrap de forma simples para quem ainda está conhecendo HTML e CSS. Tenho alguns motivos pessoais para tal, primeiro porque quando eu comecei a estudar desenvolvimento web, eu empacava muito em especificações CSS (principalmente propriedades relacionadas a posicionamento de itens) que hoje em dia nem são mais utilizadas ou que estão sendo trabalhadas para serem descontinuadas ou substituídas, e segundo porque é muito difícil alguém produzir algo realmente útil com apenas HTML e CSS puro, do zero (a não ser que a intenção seja estudar e entender como funciona a coisa).

Com o Bootstrap, qualquer iniciante que sabe como aplicar estilos CSS em um elemento HTML, seja com classes ou ID’s, já vai conseguir produzir layouts mais interessantes e visualmente modernos.

Dê uma fuçada na página oficial do Bootstrap e vamos começar!

O que siginifica framework

Framework é uma expressão em inglês que não tem bem uma tradução em português. Para nós é mais fácil entender o real sentido da palavra: aumentar a produção diminuindo esforços.

No universo web, você sempre esbarra com algum desenvolvedor que vai te encorajar ou não a utilizar frameworks. Já busquei informações sobre este ponto em diversos portais gringos e nacionais, e pra mim a conclusão é: se você sabe como determinado recurso funciona (no caso o CSS e HTML), utilizar um framework pode ser muito benéfico. Se você não souber como funciona o recurso, você pode até conseguir utilizar o framework, mas qualquer pepino já viu.

Então não se esqueçam, para utilizar qualquer framework CSS você precisa no mínimo conhecer a linguagem HTML e CSS a ponto de estilizar elementos.

O que de fato é o Bootstrap?

O Bootstrap é uma solução criada em 2010 por dois desenvolvedores do Twitter fissurados em CSS, @mdo e @fat. A intenção era criar e disponibilizar uma solução para otimizar a produção de layouts responsivos para web. O projeto era utilizado internamente no Twitter, mas como era open source e estava disponibilizado no GitHub, a popularidade do framework explodiu e hoje é praticamente inviável um desenvolvedor web não saber utilizar o mesmo.


Enquanto escrevo esse artigo, o Bootstrap está na versão 3.3.4. As principais alterações do framework ocorreram no lançamento das versões 2 e 3, em sua maioria relacionada a responsividade, que foi o recurso mais badalado no universo web nos últimos anos com o surgimento de tantos dispositivos móveis com tela e acesso a internet.

Apesar do Bootstrap ajudar muito no desenvolvimento web, ele não vai fazer todo o seu trabalho. Com ele você pode reproduzir qualquer layout presente na web, desde que tenha o conhecimento necessário em CSS para ajustes no código. O que o Bootstrap não pode fazer por você:

  • Clonar um layout.
  • Programar todos os elementos necessários para produzir um website.
  • Eliminar a necessidade de programar (HTML/CSS).
  • Mágica (sem irônia).

O que significa responsividade ou design responsivo

Um layout com design responsivo é aquele que tem em suas linhas de código, parâmetros para melhorar a forma como o layout vai ser exibido em diferentes resoluções de tela, que basicamente se resume em smartphones, tablets, notebooks, desktops e televisores smart.

Imagina o trabalho que desenvolvedores teriam se fossem desenvolver uma aplicação para cada dispositivo (já não basta as diferentes plataformas no mercado), com base na resolução de tela. A imagem abaixo descreve bem esse drama, pense em cada tela como um dispositivo, do Apple Watch a um monitor LED Full HD.

Introdução ao Bootstrap para iniciantes by Web Social Dev

Bom, parece loucura imaginar que um só layout pode ter tantas formas e tamanhos diferentes sem perder a integridade, mas sim é possível, e a Apple faz isso a tempos (só observar a similaridade do design em todos os produtos, do hardware ao software, existe um felling).

Introdução ao Bootstrap para iniciantes by Web Social Dev

Se quiser testar o conceito com um exemplo real, acesse o site do Bootstrap e redimensione o seu navegador. Você vai notar que não importa o tamanho da tela, o conteúdo está lá, adaptado para aquela resolução. Isso é a tal responsividade do layout.

Na guia Getting Started também tem um exemplos bem legais de sites criados com o Bootstrap. Só acessar e testar a responsividade. Dê uma fuçada no site, o próximo passo é criar o ambiente de desenvolvimento.

Integrando o Bootstrap a uma página HTML

Como o Bootstrap é um conjunto de propriedades CSS e funções JavaScript, podemos implementar seus recursos em qualquer página Web (desde que não haja restrições).

No site do Bootstrap são disponibilizados links CDN, para utilização imediata do framework, ou você pode baixar o pacote completo com todos os recursos e incorporar em um projeto. Existe também a possibilidade de trabalhar com o Bootstrap na versão Sass ou Less, que maximiza o desenvolvimento elevando o nível de produção.

Nos nossos exemplos, vamos baixar o pacote e incorporar em um arquivo HTML, por diversas razões. Uma delas, é que somos iniciantes, se utilizarmos links CDN (que basta copiar e colar na página HTML) não vamos ter um retorno bacana em relação a erros. Outro ponto negativo é que não vamos entender como funciona o Bootstrap. Precisamos entender como funciona a estrutura de arquivos do Bootstrap, feito isso, utilizar os links CDN vai ser bem interessante.

Com seu editor de código favorito (utilizo o Sublime Text ou o Codio, online), crie um arquivo HTML com o nome index.html.


Ainda na guia Getting Started, tem um exemplo de uma marcação HTML adaptada ao Bootstrap. Vamos utilizar esse exemplo, porém vamos fazer algumas alterações, então considerem o exemplo abaixo.

<!DOCTYPE html>
<html lang="pt-br">

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- essas 3 meta tags precisam estar logo após a tag head do documento, qualquer outra meta tag pode ser declarada abaixo destas -->

    <title>Introdução ao Bootstrap para iniciantes by Web Social Dev</title>

    <!-- link para o arquivo CSS do Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">  
   
    <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
   <![endif]-->

  </head>

  <body>

    <!-- inicio - area de producao -->

    <h1>Olá!</h1>

    <!-- fim - area de producao -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>

  </body>

</html>
abaixo.

Você deve ter notado alguns itens que até o momento não foram mencionados, o HTML5 Shim o Respond.js e o framework jQuery.

O HTML5 Shim serve para permitir que browsers desatualizados (internet explorer e cia) aceitem tags nativas do HTML5 e o Respond.js é uma forma otimizada de processar media queries, que são regras CSS para estilizar elementos com base na resolução do dispositivo. Eles estão envoltos na tag <!--[if lt IE 9]> <![endif]-->, que significa elas apenas serão aplicadas se o navegador for internet explorer 9 para baixo.

jQuery é um framework JS (JavaScript) e o Bootstrap depende dele (as famosas dependências!) para trabalhar com funções JavaScript. Note que abaixo dele, temos um link para o arquivo de funções JavaScript do Bootstrap bootstrap.js. Esse arquivo está abaixo do jQuery justamente porque precisa que o jQuery já tenha sido carregado para que as funções operem corrementa, caso contrário o funções vão apresentar falha.

O link para arquivos JS normalmente é feito no fim do documento, para não impactar no carregamento do conteúdo da página, já que a maioria das funções JS atuam apenas por trás do design.


Agora só falta baixar o pacote de resources do Bootstrap (link direto) e juntar tudo em uma pasta para que a primeira mágica ocorra! 🙂

Crie uma pasta com nome que você quiser e jogue o arquivo que criamos, index.html dentro dela. Descompacte a pasta do Bootstrap e você vai ter três pastas, css, js e fonts. Copie e cole essas pastas na pasta que criamos com o arquivo index. No fim, vamos ter uma estrutura similar a do exemplo abaixo:

sua-pasta/
├── css/
├── js/
├── fonts/
└── index.html

As pastas do Bootstrap que acoplamos ao nosso exemplo se resume a estrutura de arquivos abaixo:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Na pasta CSS temos as folhas de estilo que compõem o design do framework. Note que existem dois arquivos apenas com variações de extensão. Arquivos com extensão .min são arquivos minificados. Basicamente são excluídos os espaçamentos do arquivo para minimizar o processamento e otimizar a execução do mesmo (a regra vale para o arquivo CSS e JS). Os arquivos da pasta FONTS compõem a tipografia do framework que também inclui ícones.

No nosso projeto, utilizamos os arquivos bootstrap.css e bootstrap.js, que são mais densos que os arquivos minificados, porém para quem está aprendendo é o retorno de erros fica mais claro pois o arquivo está formatado seguindo boas práticas. Depois podemos apenas trocar o link para o arquivo minificado e enquadramos o projeto nos padrões de performance.


Primeiro teste

Vamos agora fazer o primeiro teste para confirmar se realmente o framework está operando no nosso arquivo HTML.

Primeiro, uma técnica bem útil para acompanhar se determinado arquivo é carregado em um página web, aprenda a utilizar a ferramenta de desenvolvedores do Google Chrome. No Windows, você pressiona a tecla F12 e ela vai surgir de baixo pra cima por padrão na guia Elements.

Com o arquivo index.html e a ferramenta de desenvolvedores abertos no Chrome, dê um refresh na página e confira na guia Network, se os arquivos bootstrap.css e bootstrap.js obtiveram retorno GET na coluna Method. Se sim, o Bootstrap foi carregado com sucesso, se não, é necessário confirmar se o caminho para o arquivo está correto ou se existe o arquivo especificado no caminho indicado.

Para testar algumas das funcionalidades mais simples do framework, vamos criar alguns botões. Na guia CSS da página do Bootstrap, vá até o item Buttons, escolhe um dos exemplos de código, copie e cole em qualquer lugar da area de produção do nosso arquivo HTML. Fiz um teste com o seguinte código, logo após a linha em que declaramos um “olá”:

<button type="button" class="btn btn-default">Padrão</button>
<button type="button" class="btn btn-primary">Primário</button>

Resultado:

Introdução ao Bootstrap para iniciantes by Web Social Dev

Conclusão da primeira etapa

Nesta primeira parte de introdução tentei explicar tudo que possivelmente pode causar dúvidas para quem está começando a usar o Bootstrap.

Clique no botão abaixo para baixar a pasta com os arquivos do Bootstrap e a página index que criamos neste tutorial.

Download

Nos próximos tutoriais vamos começar a produzir algo útil para o layout, enquanto percorremos os recursos e funcionalidades do framework, como os sistema de grid e a tipografia do Bootstrap.

Continuem acompanhando, quem tiver dúvidas estou aberto a dialogo nos comentários!

🙂

  • Filho

    Gostei muito desse artigo, espero poder aprender mais com os próximos. Meus parabéns pela grande iniciativa. 😉

    • Espero eu poder ajudar você a aprender, qualquer coisa estamos ai 🙂

  • Lucas De Souza Siqueira

    Muito bom! Esperando outro ansiosamente.

    • Obrigado Lucas, essa semana o post sobre grid está no ar. Valeu!

  • Alison Serafim

    Muito bom, primeiro tutorial de introdução ao bootstrap que li e possui qualidade e riqueza nos detalhes.
    Continue assim. Estou esperando o próximo ansiosamente.

    • Valeu Alison, já to fazendo um sobre a grid, até o fim da semana ta no ar! Qualquer coisa estamos ai!

  • Bruno Tinelli

    Muito bom! esperando os próximos artigos.

    • Opa, valeu Bruno, ta pra sair, atrasado mas já já ele sai 🙂

  • Aldo Meira

    Boa tarde Thierry, achei o seu site por acaso, pesquisando algumas coisas sobre bootstrap.
    Primeiro parabéns pelos artigos, os dois são ótimos e fáceis de entender.
    Gostaria de saber mais sobre o mesmo, não sei se você já tem outros artigos para serem postados, de qualquer forma estarei esperando ..

    • Aldo, muito obrigado pelo comentário, e tenho sim mais artigos sobre, e estão no gatilho para publicar, porém a falta de tempo ultimamente não me permitiu ainda! falta apenas finalizar alguns exemplos, vou fazer de tudo para finalizar essa semana pra não perder o foco do tutorial! 🙂

  • Rafael Dantas

    Rapaz, esse artigo é muito bom! Parabéns, muito detalhado e organizado! Ganhou um leitor =D

  • Joao Victor

    Ótimo artigo, consegue passar bem o conteúdo a ser aprendido.

  • Ricardo Campos de Lima

    parabéns!!! muito bom!

  • Jonatan Damasio Potrikus

    Caraca parabéns, otimo material. Espero encontrar mais materiais seus. Obrigado por essa contribuição.

  • Dayane

    Oie! Gostei muito do post, estava pesquisando sobre Bootstrap (lógico kkk) e encontrei muitos sites explicando sobre, mas não tão bem como você, sou totalmente iniciante nesse mundo web, então estava super confusa, mas ler isso aqui me ajudou bastante, valeu! Vou ler o próximo, beijos :3

  • Pingback: Material minicurso web – PET Computação UFMA()

  • Pingback: Material minicurso web | PET()