Bootstrap
Olá pessoal, vou demostrar para vocês como personalizar um site de maneira simples e fácil utilizando o Bootstrap.
Mas o que é Bootstrap?
Bootstrap nada mais é do que um framework HTML, CSS e JavaScript, utilizado para agilizar o desenvolvimento de projetos baseado na acessibilidade dos usuários, tanto leigos como avançados. Mas o desafio com tantos dispositivos existentes hoje em dia (celulares, tablets, laptops, pc, TV, relógios, etc.), é sempre agilizar o desenvolvimento, e por isso, a utilização do Bootstrap é altamente recomendável pois ele trabalha também com aplicações responsivas tornando o desenvolvimento muito mais rápido e prático.
É bom que você tenha conhecimentos básicos em HTML, CSS e JavaScript.
Vamos nessa:
Preparando o ambiente
Tenha um editor de texto de sua preferência: bloco de notas, notepad++, Sublime text 3, DreamWaver, entre outros. Aqui será utilizado o Sublime.
Fazendo o download do Bootstrap
Fazer o download no site http://getbootstrap.com. Neste momento em que estou escrevendo este Tutorial, o Bootstrap está na versão 3.3.5, logo a versão 4 estará a caminho. Ao clicar no botão Download Bootstrap, abrirá uma página com 3 opções para download. Clique em Download Bootstrap; será baixado um arquivo .zip pronto, é só descompactar em qualquer lugar no seu computador. No meu caso vou colocá-lo em uma pasta que eu criei no www do WAMP ou algum outro software para servidor local, como por exemplo o XAMP (temos um tutorial completo sobre a instalação do XAMP, clique aqui para ler).
Como podemos notar, tenho uma pasta C:/wamp/www/evolu, mas poderia ser em qualquer outro lugar. Como se trata de arquivos html, funciona perfeitamente sem ter que se preocupar com servidor web. Crie uma pasta onde você achar melhor, o mais comum é na área de trabalho.
Feito isso, o ambiente já está preparado.
Observe 3 pastas:
Na pasta CSS contém os seguintes arquivos:
Na pasta fonts terá:
Na pasta js:
Para não ficar muito teórico vou explicando cada um assim que for utilizando-os para facilitar o aprendizado.
Agora vamos criar um arquivo simples, um HTML5. Com o nome de index.html na pasta que extraímos do arquivo .zip.
Ficando como mostra a figura acima.
Agora vamos utilizá-los:
Um html mínimo para iniciarmos. (Lembrando que estou utilizando o Sublime):
Isso no navegador fica assim:
Agora com Bootstrap:
Isso no navegar fica assim:
No próximo tutorial vou explorar mais o bootstrap, mas tenha certeza de que tudo o que foi estudado aqui tenha dado certo pois este passo é um dos mais importantes.
13
Coordenador Odair Gabriel.
“O que é escrito sem esforço é geralmente lido sem prazer”.(Samuel Johnson)