Bootstrap 3

E 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 Projeto
Abra o Arquivo baixado (bootstrap-3.2.0.zip);
Configurando Projeto
Abra o Arquivo baixado (bootstrap-3.2.0.zip);
Extraia para o seu projeto (vai extrair uma pasta bootstrap-3.2.0-dist);
Configurando Projeto
Abra 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 Projeto
Abra 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 Projeto
Abra 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 index
Abra o Arquivo index.hmtl do seu root do projeto;
Configurando index
Abra o Arquivo index.hmtl do seu root do projeto;
Acesse http://goo.gl/yfil6c e copie o Basic Template;
Configurando index
Abra 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:
Viewport

Meio 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.
Link

Chamada do arquivo CSS do Bootstrap:

Link

Chamada do arquivo CSS do Bootstrap:

O arquivo bootstrap se encontra em nosso diretório public,

vamos por ali também:
Script

Chamada de arquivos de Script do Bootstrap, nesse caso ele

chama um Javascript externo:
Script

Chamada 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
Container

Bootstrap precisa de um elemento que envolva o site para

abrigar o sistema de Grid.

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

O 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 responsivo

https://www.youtube.com/watch?v=BMhIBVSEFvc

Tableless (Responsivo na pratica do rascunho ao digita)

http://goo.gl/WxED7R
Código Fonte
http://goo.gl/P5DnTD

Iago Effting iago.effting@gmail.com