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
- Acesse o site oficial do BootStrap e clique no botão GET STARTED localizado logo no início da página
- Role a página até encontrar o modelo padrão Starter template e copie o código
- Abra um novo arquivo no Brackets e salve-o para index.html
- Cole o código do Starter template no arquivo criado
- Mofique a linha 2 do seu código, moficando o código
<html lang="en">para<html lang="pt-br"> - 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.