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)