Bootstrap 3: Como Começar

Aviso: Este tutorial foi feito para a versão 3 do Bootstrap. O tutorial da versão 4 será publicado em breve.

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.

  • Fabiano

    Gostaria muito amigo de continuar essas aulas poderia dar continuidade? Eu ate pagaria amigo. Pois e algo que estou almejando a tempos ..tipo criar um projeto usando o booystrap, e sua aula foi muito ótima…

    • Ruan Carvalho

      Obrigado, Fabiano!
      Vou tentar aproveitar essas folgas da Copa pra continuar os tutoriais.

      Abs

      • Fabiano

        Qdo vai continuar ?

  • Fabiano

    este layout voce poderia mostrar como fazer ele em video aulas..
    http://webdevacademy.com.br/tutoriais/ux/bootstrap-3-como-comecar/#!prettyPhoto%5Bgallery%5D/1/

    • Ruan Carvalho

      Beleza, vou elaborar esse.

  • Hey, I see you have a twitter account, do you tweet all your new posts?

    • Yes, Gracie. I do tweet my new posts. But they’re all written in portuguese.
      Google Translate can help in this case.

  • Fabiano

    Ruan tudo bem…teria como fazer um video mostrando como fazer um sistema igual a este???
    Faria algo via skype também relacionado a este modelo??

  • Marco

    Qual jQuery, há vários?

    • Normalmente, usamos a lib jQuery para projetos web, que está no jquery.com.

      Agora, se você se refere à versão, de preferência pegue a mais recente.

  • Janise

    Parabéns!
    Você tem uma dinâmica muito boa em suas vídeo aulas. O conteúdo está bem explicado e organizado. Me ajudou muito.
    Muito Obrigado!

  • Aurino Júnior

    Muito bom. Grato pela disponibilização do seu tempo para divulgar conteúdo de qualidade. Abraço.

  • Octacilio

    Muito boa a sua intenção em divulgar algo sobre BootStrap que pra nós é uma ferramenta agil e muito interessante. Vai ajudar muito se continuar as aulas que citou. Grato.

  • caique marcelino

    Gostei.

  • miguel heichard

    Genial, muito bom. Desmistificou este framework. Brigadão.

  • fabianosb

    Ruan tudo bem…teria como fazer um video mostrando como fazer um sistema igual a este??? o de sistema de cadastro de veículos ?
    Só isso, já faz um tempo que questionei a respeito , só preciso saber se dá ou não para fazer, acho que pode ser a dúvida de outras pessoas também.

    • Beleza, Fabiano.
      O sistema todo não dá pra mostrar.
      Mas já estou fazendo (finalmente!) o tutorial de como criar aquelas telas, com todo o CRUD, só não vai salvar em banco de dados.
      Já o vídeo é um pouco mais demorado. Mas vai ter sim.

      Abs!

      • fabianosb

        Poxa Legal, estou na expectativa, é que pra desenvolver seria mais fácil alguém que já sabe mostrar, pegar o getting starter do boots e ler é uma coisa, na prática alguém mostrando o caminho das pedras é mais didático, aprende mais fácil, porque querendo ou não sempre vai ter um macete ou outro que quem já manja consegue passar estes detalhes….

      • Bom dia caro amigo. Tive que aprender bootstrap para começar a criação de um projeto de uma página de um markrtplace será que você não faria pra mim uma página? Preciso apenas da estrutura com 3 botões e uma caixa de busca com o logo do site mais nada. Podemos falar?

  • charles lins

    Pessoal,

    Preciso fazer uma tela com blocos (estilo metro), com os blocos de diferente largura e altura.
    Alguem tem um modelo para eu estudar?

    Como quero: https://goo.gl/rTYs3Z

  • Someone

    Velho,

    Eu não quero parecer um hater não mas, cada vez que, no seu vídeo, você pronunciou jquery sem pronunciar a letra “u” eu sentia que estava tomando uma paulada na orelha!!
    No mais, embora muito básico esse tutorial, a idéia é boa.

    Someone

  • Jarbas Peixoto Júnior

    Ruan, parabéns pelo site e pela simplicidade nas explicações. Seus tutoriais, vídeos, etc, são EXCELENTES.

    Há mais de um ano, meus amigos do trabalho já haviam me dito para utilizar o bootstrap, mas sempre fui “chucro” e “achava” que seria difícil entender.

    Com suas explicações simples, tomei “gosto” pelo bootstrap e atualmente é indispensável em meu trabalho.

    Parabéns!

    Abraços,
    Jarbas

    • Muito obrigado, Jarbas.
      Qualquer dúvida, é só passar aqui e comentar.

      Abs.
      Ruan

  • Parabéns!!

  • Luis Henrique Campaci

    existe a possibilidade de traduzir as palavras em inglês do bootstrap para o português ???

    • A princípio não. A não ser que você queira reconstruir o framework todo.
      Mas, não vale a pena.

      Já o HTML, você pode mudar à vontade.

  • Muito bom mesmo com linguagem didática de fácil compreensão

  • Paulo (Sidewalk) Vicente

    Ruan, Parabéns mesmo. Voce explica de uma forma bem clara, objetiva. Vai direto ao ponto, sem enrolação . Muito tranquilo entender da forma como voce escreve. O tempo que ganhamos ao recorrer aos seus tutoriais é significativo. Há livros por aí que se perdem em explicaçṍes exaustivas. Usando de gíria, “enche o saco”. Mais uma vez, obrigado.

    • Muito obrigado, Paulo!
      A intenção é essa mesmo… ir direto ao ponto e ajudar a entender o assunto. Por isso, pretendo adicionar sempre mais tutoriais, apesar do tempo limitado, e quem sabe, escrever alguns livros/ebooks seguindo esse mesmo formato.

      Fico muito feliz que tenha sido útil pra você.

      Abs.
      Ruan

  • Wagner Junior

    Ruan, você está de parabéns. Sempre achei que não iria entender o bootstrap, pois vários materiais contem explicações exaustivas, com a sua didática ficou muito mais fácil aprender.

  • Daniel Tavares

    Parabéns pelos videos tutoriais. Tudo muito bem explicado e direto ao ponto.
    Contudo tenho um pergunta: Sou obrigado a trabalhar com JQuery? Não poderia utilizar o BootStrap com Angular?

    Grato desde já.

    • Obrigado, Daniel!

      É possível usar com Angular, sem problemas. O Bootstrap depende do jQuery para fazer os componentes funcionarem (Modal, Carousel, Tabs, etc.)
      Se não for usar esses componentes, pode tirar o jQuery, que o visual e o grid system funcionarão normalmente.

      Abs.
      Ruan

  • Karina

    Ruan o plugin validator.js https://1000hz.github.io/bootstrap-validator/ implementei no meu form, que aquele tipo wizard, passo a passo, o usurário só vai para a próxima página se preenche a atual, tem vários fieldset -> form-group coloquei na tag form : data-toggle=” validator” no script chamando o arquivo validator.js mas no final o botão não está validando, deixa o usuário passar para o próximo passo. Sabe dizer o que está faltando para implementar?

    Obrigada.

    • Provavelmente tá faltando algumas regras de validação nos campos.
      Mas, tem que verificar cada campo. Tenta ir adicionando um por vez, pra ver qual que está deixando passar.

  • Renato

    Amigo, obrigado pelos tutoriais.
    Estou começando a “brincar” com php e html e não estou conseguindo instalar o bootstrap corretamente.
    Estou usando o Netbeans 8.2 com Composer. Meu arquivo composer.json traz o seguinte:
    “require”: {
    “twbs/bootstrap”: “3.3.*”
    }
    Depois de rodar os comandos de install e update, o arquivo customizer-variables.html que fica na pasta vendor/twbs/bootstrap/docs/_includes vem com vários erros, como nesta linha:

    O compiler aponta erro em @gray-base.

    Pesquisei de várias formas no google e não consegui encontrar uma boa referência disso. Tentei fazer a instalação manual também, apenas copiando os arquivos para as pastas, como no seu tutorial, mas deu o mesmo problema.

    Desculpe se minha dúvida é muito trivial, mas agradeço se puder responde-la.

    Abraço

  • Mateus

    Massa

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

Acima ↑