loader image

Bootstrap – Starter Template

O Bootstrap é um popular framework usado para criação de sites responsivos.

O que é um framework?

São aqueles quadros fixados na parede para organizarmos nossas ferramentas na garagem ou na oficina do vovô que fica no quintal da casa.

Esta mesma ideia é aplicada em diversas áreas e vertentes do desenvolvimento, incluindo a web. O Bootstrap é um destes quadros de ferramentas na qual temos tudo que desejamos organizado e pronto para usar. A diferença é que não iremos encontrar um martelo ou um serrote nesta quadro de ferramentas, mas sim blocos de códigos que resolvem diversos problemas dos desenvolvedores web mais exigentes e perfeccionistas do mundo.

O Bootstrap foi desenvolvido pela equipe de Twitter como uma forma de padronizar o desenvolvimento das diversas aplicações criadas por eles. Logo, a ideia de criar um framework para auxiliar desenvolvedores web se mostrou tão excelente que o Bootstrap se popularizou rapidamente.

O que significa Bootstrap?

Bootstrap não possui uma tradução exata mas é uma referência em inglês para “usando recursos próprios”.

O que é necessário para aprender Bootstrap? Uma garagem ou um quintal?

Para criarmos nossa primeira página usando este fantástico framework, vamos precisar de um bom editor de código, na Etec usamos o Brackets. Mas indico também o Visual Studio Code, outro excelente software para desenvolvedores Web. Apenas não indico para este primeiro momento softwares como Dreamweaver e softwares de page builders neste primeiro momento pois de início precisamos aprender para então pensarmos em produtividade.

Passo a passo de como criar sua primeira página HTML usando Bootstrap

  1. Acesse o site oficial do BootStrap e clique no botão GET STARTED localizado logo no início da página
  2. Role a página até encontrar o modelo padrão Starter template e copie o código
  3. Abra um novo arquivo no Brackets e salve-o para index.html
  4. Cole o código do Starter template no arquivo criado
  5. Mofique a linha 2 do seu código, moficando o código <html lang="en"> para <html lang="pt-br">
  6. Salve novamente sua página e execute o Live Preview do Brackets para visualizar o resultado:

Pronto! Agora seu site está preparado para trabalhar com Bootstrap. Agora temos que estrutura e organizar o conteúdo do site. Para isso temos que aprender o sistema de Grid do Bootstrap. Este será o assunto da nossa próxima aula – Bootstrap Sistema de Grid.

Deixe seu comentário