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
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.html do seu root do projeto;
Configurando index
Abra o Arquivo index.html do seu root do projeto;
Acesse http://goo.gl/yfil6c e copie o Basic Template;
Configurando index
Abra o Arquivo index.html 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:
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:
Container
Bootstrap precisa de um elemento que envolva o site para abrigar o sistema de Grid.
Acesse http://getbootstrap.com/css/#overview-container
https://getbootstrap.com.br/docs/4.1/layout/grid/
https://getbootstrap.com.br/docs/4.1/components/forms/
https://getbootstrap.com.br/docs/4.1/components/forms/#formulário-horizontal
Formulários
Segundo a documentação
