Publicado em

Bootstrap 3: Como Começar

Bootstrap TutorialA primeira coisa que você deve saber para usar o Bootstrap 3 é 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ê serve 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.

43 comentários sobre “Bootstrap 3: Como Começar

  1. 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…

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

      Abs

      1. Qdo vai continuar ?

    1. Beleza, vou elaborar esse.

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

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

  3. 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??

  4. Qual jQuery, há vários?

    1. 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.

  5. 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!

    1. Muito obrigado, Janise!

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

    1. Muito obrigado, Aurino!

  7. 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.

    1. Muito obrigado, Octacilio!

  8. Gostei.

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

    1. Muito obrigado, Miguel!

  10. 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.

    1. 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!

      1. 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….

      2. 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?

        1. Olá, Gilson.

          Mande um e-mail explicando o que precisas, que preparo um orçamento (http://webdevacademy.com.br/contato).

          Sds.
          Ruan

  11. 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

    1. Charles,

      Com o Bootstrap sozinho, acho difícil de conseguir esse visual. Talvez sem o grid system você consiga.

      Tem alguns projetos open source que fazem o que você precisa. Dá uma olhada nessa lista:
      http://www.sitepoint.com/metro-bootstraps/

      Mas o que eu achei mais interessante foi esse:
      https://metroui.org.ua/

      Abs!
      Ruan

  12. 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

  13. 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

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

      Abs.
      Ruan

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

    1. 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.

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

    1. Muito obrigado, Antonio!

  16. 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.

    1. 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

  17. 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.

    1. Muito obrigado, Wagner!

      Abs.

  18. 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á.

    1. 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

  19. 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.

    1. 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.

  20. 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

Deixe uma resposta

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