Bootstrap 3E como salvará sua vida

Iago Effting iago.effting@gmail.com

[B]Bootstrap é o mais popular framework HTML, CSS, JS para desenvolvimento ágil.

Por que Utilizar?# Texto Sem Bootstrap

Por que Utilizar?# Texto Com Bootstrap

Por que Utilizar?# Table Sem Bootstrap

Por que Utilizar?# Table Com Bootstrap

Por que Utilizar?# Form Sem Bootstrap

Por que Utilizar?# Form Com Bootstrap

Por onde começar?Acesse o Site: http://getbootstrap.com

Por onde começar?Acesse o Site: http://getbootstrap.com

Encontre o Botão Download e Clique

Por onde começar?Acesse o Site: http://getbootstrap.com

Encontre o Botão Download e Clique

Clique em Download Bootstrap

Por onde começar?Acesse o Site: http://getbootstrap.com

Encontre o Botão Download e Clique

Clique em Download Bootstrap

Mas o que ele é?Recursos HTML, CSS e Javascript

Mas o que ele é?Recursos HTML, CSS e JavaScript

Configurando ProjetoAbra o Arquivo baixado (bootstrap-3.2.0.zip);

Configurando ProjetoAbra o Arquivo baixado (bootstrap-3.2.0.zip);Extraia para o seu projeto (vai extrair uma pasta bootstrap-3.2.0-dist);

Configurando ProjetoAbra o Arquivo baixado (bootstrap-3.2.0.zip);Extraia para o seu projeto (vai extrair uma pasta bootstrap-3.2.0-dist);Renomeio a pasta bootstrap-3.2.0-dist para public;

Configurando ProjetoAbra o Arquivo baixado (bootstrap-3.2.0.zip);Extraia para o seu projeto (vai extrair uma pasta bootstrap-3.2.0-dist);Renomeio a pasta bootstrap-3.2.0-dist para public;Crie um arquivo index.html na raiz do projeto;

Configurando ProjetoAbra o Arquivo baixado (bootstrap-3.2.0.zip);Extraia para o seu projeto (vai extrair uma pasta bootstrap-3.2.0-dist);Renomeio a pasta bootstrap-3.2.0-dist para public;Crie um arquivo index.html na raiz do projeto;Você agora terá essa estrutura em seu projeto:

Configurando indexAbra o Arquivo index.hmtl do seu root do projeto;

Configurando indexAbra o Arquivo index.hmtl do seu root do projeto;Acesse http://goo.gl/yfil6c e copie o Basic Template;

Configurando indexAbra o Arquivo index.hmtl do seu root do projeto;Acesse http://goo.gl/yfil6c e copie o Basic Template;Agora dentro do arquivo index.html cole o Basic Template:Como ficou o meu: http://goo.gl/7RnnyF

LangÉ o idioma que o Site vai ser indexado pelos sistemas de busca. Vamos trocar para pt-br:

ViewportMeio de padronizar a exibição de telas em px, como Tablets, celulares, monitores, etc.

Em Initial Scale, padronizamos a escala para 1 em todos os dispositivos.

LinkChamada do arquivo CSS do Bootstrap:

LinkChamada do arquivo CSS do Bootstrap:

O arquivo bootstrap se encontra em nosso diretório public, vamos por ali também:

ScriptChamada de arquivos de Script do Bootstrap, nesse caso ele chama um Javascript externo:

ScriptChamada de arquivos de Script do Bootstrap, nesse caso ele chama um Javascript externo:

Vamos deixar esse igual e alterar o seguinte, colocando apenas o public no inicio da linha:

Configurado!!Ao acessar o arquivo pelo navegador, você verá que está diferente o visual, igual a esse:

Use a Documentação!!Use sempre a documentação:

Acesse http://getbootstrap.com

ContainerBootstrap precisa de um elemento que envolva o site para abrigar o sistema de Grid.

Acesse http://getbootstrap.com/css/#overview-container

Sistema de GridO container que envolve o grid é dividido em 12 colunas, podendo assim manipular facilmente cada parte do site:

http://getbootstrap.com/css/#grid

Bonus Stage!

Veja como Criar um Site responsivohttps://www.youtube.com/watch?v=BMhIBVSEFvc

Tableless (Responsivo na pratica do rascunho ao digita)http://goo.gl/WxED7R

Código Fontehttp://goo.gl/P5DnTD

Iago Effting iago.effting@gmail.com