![Bootstrap [Modo de Compatibilidade] - USPecologia.ib.usp.br/curso/2009/pdf/AO1/Bootstrap.pdf · Title: Microsoft PowerPoint - Bootstrap [Modo de Compatibilidade] Author: Cac�](https://static.fdocumentos.tips/doc/165x107/604571877c1b2b099e6993e0/bootstrap-modo-de-compatibilidade-title-microsoft-powerpoint-bootstrap-modo.jpg)
Introdução a Bootstrap 3
34
Click here to load reader
-
Upload
iago-effting -
Category
Internet
-
view
2.303 -
download
3
Transcript of Introdução a Bootstrap 3
[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
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
