Aula 10 - Bootstrap

Prévia do material em texto

Bootstrap
Bootstrap é um framework front-end para criar interfaces responsivas. É 
amplamente usado para designs modernos e consistentes.
Milhões de sites no mundo utilizam esta ferramenta para acelerar o 
desenvolvimento web.
Fabrício Tonetto Londero
Uma CDN (Content Delivery Network) é uma rede de servidores 
espalhados pelo mundo que entrega arquivos da web (como CSS, 
JavaScript e imagens) de forma rápida e eficiente.
Por que usar uma CDN?
•Velocidade: O arquivo é carregado de um servidor próximo do 
usuário.
•Confiabilidade: Menor chance de falhas, pois os arquivos vêm de 
servidores especializados.
•Praticidade: Você não precisa baixar o arquivo para o seu projeto —
apenas usa o link.
Configuração Inicial: Incluindo 
Bootstrap no seu Projeto
Download do Bootstrap
Use CDN para acesso rápido 
ou baixe arquivos locais.
Estrutura HTML Básica
Inclua links CSS e JavaScript 
no arquivo HTML.
Exemplo Prático
Link CDN: 
Sistema de Grid do Bootstrap: Layouts Flexíveis
Linhas e Colunas
Estruture layouts com linhas e 
colunas responsivas.
Classes de Colunas
Use `col-md-6` para dividir em 2 
colunas em telas médias.
Breakpoints
• sm, md, lg, xl, xxl
• Adaptam o layout a diferentes 
tamanhos de tela
Sistema de Grid do Bootstrap: Layouts Flexíveis
col-12 (100%)
col-6 (50%)
col-6 (50%)
col-4 (33%)
col-4 (33%)
col-4 (33%)
col-3 (25%)
col-3 (25%)
col-3 (25%)
col-3 (25%)
Componentes Essenciais: Navegação e Botões
Navbar
Crie barras de navegação responsivas e personalizáveis.
Botões
Estilos variados: `btn-primary`, tamanhos e estados como 
ativo ou desabilitado.
Botão Azul
Botão Verde
Botão Vermelho
Botão Amarelo
Botão Azul Claro
Botão Claro
Botão Escuro
Botão Cinza
Botão Azul Contornado
Atenção!
Sucesso!
Erro!
Informação!
Componentes Avançados: Cards e Modals
Cards
Estruturação com cabeçalho, corpo e rodapé para conteúdo 
organizado.
Modals
Pop-ups interativos para confirmação e alertas.
Título
Texto do card.
Saiba mais
Abrir Modal
Título do Modal
Este é o conteúdo do modal. Você pode 
colocar qualquer coisa aqui: texto, formulários, 
imagens, etc.
Fechar
Salvar mudanças
Formulários: Criando Inputs e Validações
Inputs
Textos, e-mails, senhas e outros tipos podem ser aplicados 
facilmente.
Validações
Use classes do Bootstrap para feedback visual de erros e 
sucesso.
Email
Enviar
Tipografia e Cores: Estilos 
Visuais Consistentes
Textos
Títulos, parágrafos e listas com estilos padrão e customizados.
Cores
Classes predefinidas como `text-primary` e `bg-success` 
facilitam estilos.
Utilitários: Classes Auxiliares 
para Estilização Rápida
Espaçamento
Margens e paddings como 
`mt-3` e `px-4` para ajustes 
rápidos.
Display
Controle de visibilidade 
com `d-none`, `d-md-block` 
e outros.
Alinhamento
Textos e elementos alinhados com `text-center` e `float-right`.
Temas e Personalização: Customizando o Bootstrap
Variáveis Sass
Altere cores, fontes e estilos com 
facilidade.
Temas Personalizados
Crie e importe temas para um visual 
único.
EXERCÍCIO
Crie um mini portfólio responsivo com Bootstrap
Objetivo: Utilizar componentes do Bootstrap para montar uma 
pequena página de apresentação com:
•Grid system
•Cards
•Modal
•Botões
•Formulário de contato