Bootstrap 3: Como Começar

Update: Este tutorial foi feito para a versão 3 do Bootstrap. Veja o tutorial para Bootstrap 4 neste link.

A primeira coisa que você deve saber, para usar o Bootstrap, é como pegar o framework e como iniciar um projeto com ele.

Neste tutorial, você vai ver como fazer o download do Bootstrap e entender como criar as pastas iniciais de um projeto. Além disso, vamos ver para quê que servem cada uma das pastas e arquivos que já vêm com ele.

Ao final, você vai ter um ambiente com o Bootstrap funcionando, e pronto para começar a criar as suas páginas.


Passo 1: Pegue o Framework

Para fazer o download você deve acessar o site do Bootstrap – getbootstrap.com. Você vai ver um botão (Download Bootstrap) no centro, e ao clicar você será direcionado para a área de downloads.

Vão ter várias opções na tela, mas a que você deve usar, por enquanto, é primeira. Basta clicar e fazer o download.

bootstrap-tutorial

Depois que terminar o download, você deve extrair os arquivos para uma pasta onde vai ficar o seu projeto. Se você já tiver um servidor local, pode colocar nele.

O pacote do Bootstrap nada mais é do que um arquivo .ZIP com vários códigos CSS e JavaScript, prontos para você usar no seu projeto.

E você pode renomear a pasta que foi extraída com o nome do seu projeto.


Passo 2: Entenda a Estrutura do Bootstrap

Dentro dessa pasta, que agora é o início do seu projeto, você deve ter uma estrutura de pastas como essa:

bootstrap/
 ├── css/
 │    ├── bootstrap.css
 │    ├── bootstrap.css.map
 │    ├── bootstrap.min.css
 │    ├── bootstrap.min.css.map
 │    ├── bootstrap-theme.css
 │    ├── bootstrap-theme.css.map
 │    ├── bootstrap-theme.min.css
 │    └── bootstrap-theme.min.css.map
 ├── 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

Observe que há agora uma pasta “CSS”, uma pasta “Fonts” e uma pasta “JS” que vieram com o Bootstrap.

Cada uma delas possui uma versão completa (os arquivos *.css e *.js), e uma versão “minificada” (os arquivos *.min.css e *.min.js) de cada script.

Você deve usar a versão completa quando você quiser ler, ou ter acesso ao código-fonte do Bootstrap. E você deve usar a versão “minificada” (ou minified) quando for colocar seu projeto online, ou seja, em produção.

Por fim, a pasta “fonts” contém os vetores gráficos e a tipografia usada pelo Bootstrap para gerar ícones otimizados para o seu front-end.

Mais à frente, nos outros tutoriais, você poder ver como utilizá-los.


Passo 3: Adicione o jQuery

Bom, ainda falta um item nesse setup.

Para o Bootstrap funcionar corretamente, é preciso usar o jQuery. Senão nenhum componente, nem efeitos, irão funcionar. Você pode fazer o download do jQuery no site oficial: jquery.com/download

Download jQuery

O download do jQuery é um pouco diferente. Você deve clicar com o botão direito no link do arquivo e escolher “Salvar como”, no menu. Depois que salvar, você deve colocar o jQuery na pasta “JS” do seu projeto.

Eu recomendo, também, que você mude o nome do arquivo (para “jquery.js”), apenas para tirar a versão e deixar mais fácil de fazer o link, no HTML.


Passo 4: Crie o Template Inicial

Agora, na pasta do seu projeto, crie novo arquivo com o nome template-bootstrap.html e escreva a marcação básica de HTML5:

Observe na linha 1 o DOCTYPE:

<!DOCTYPE html>

Este é o DOCTYPE de HTML5. O Bootstrap precisa ter a marcação toda em HTML5 para exibir a página corretamente.


Passo 5: Entenda as Meta Tags

Agora, vamos as metatags necessárias…

<meta charset="utf-8">

Esta tag indica ao browser que a página vair usar caracteres Unicode, para exibir letras com acentos e cedilha, por exemplo.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Esta tag força o IE a usar as definições de CSS mais recentes, e evita que ele quebre o visual quando estiver no Modo de Compatibilidade.

Ela é obrigatória. Uma vez eu esqueci de colocar, e quando as pessoas abriam pelo IE o site aparecia quebrado.

Próximo…

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A metatag de viewport faz o site ocupar todo o espaço disponível na janela, tanto em celulares, como em tablets ou em PC’s.

Essa é a tag mais importante, e é ela que possibilita o design responsivo e o mobile-first.

Todas essas “meta-tags” servem para qualquer site, e não apenas quando você usar o Bootstrap.


Passo 6: Entenda as Referências do Bootstrap

Agora sim, vamos para as referências aos arquivos Bootstrap.

<link href="css/bootstrap.min.css" rel="stylesheet">

Este é a referência ao CSS do Bootstrap. Perceba que eu coloquei a versão minified (*.min.css). Esse link é obrigatório, claro.

Na linha 15 eu coloquei um “Hello World Bootstrap”, apenas para testar no browser.

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

E essas são as referências ao jQuery e aos plug-ins do Bootstrap. O jQuery deve sempre vir antes do Js do Bootstrap, porque o Bootstrap depende dele.

Observe que eu coloquei as bibliotecas Javascript por último – isso é uma boa prática para evitar lentidão no carregamento da página.


Passo 7: Teste no Browser

Vamos ver como o navegador exibe essa página:

Hello World Bootstrap

Como você pode ver, esse template é bem simples (até demais). Tem apenas algumas tags não-visuais e a estrutura básica.

Esse tipo de página se chama boilerplate, ou template básico. E ela serve como modelo inicial para outras páginas. Assim, você não precisará ficar reescrevendo o HTML básico, e os links do head.

Esta página já está otimizada para celulares e tablets, por causa da meta tag de viewport, e por causa dos estilos do Bootstrap que foram referenciados na página.


Opcional: Assista os Vídeos Abaixo

Caso você queira ver como fazer esse setup inicial, é só assistir os vídeos abaixo:


Próximos Passos…

Pronto. Agora você já tem um ambiente com o Bootstrap funcionando. Aqui você pôde ver nessa marcação básica os itens de HTML5, e as referências utilizadas em páginas com Bootstrap.

É importante você entender para que serve cada um desses itens, para resolver problemas que possam surgir.

Para criar outras páginas, basta copiar este template e começar a adicionar itens. Agora, podemos passar a trabalhar com os componentes de CSS do Bootstrap.

Orgulhosamente feito com WordPress | Tema: Baskerville 2 por Anders Noren

Acima ↑