English 中文 العربية 日本語 Português

Bootstrap: Projeto Prático

Última atualização: 2026-08-26

1. Introdução à Lição

(1) Pré-requisitos

(2) 🎯 O que você vai aprender

(3) O Problema

Alice enfrenta uma página em branco e precisa construir do zero uma página inicial corporativa completa—a navbar, Hero, cards de recursos, introdução da equipe, formulário de contato e rodapé. Cada módulo requer design cuidadoso, e ela não sabe por onde começar.

(4) A Solução

Esta lição aplica de forma abrangente o conhecimento aprendido nas 18 lições anteriores para construir do zero uma página inicial corporativa completa. Alice está completando um projeto Bootstrap completo de forma independente pela primeira vez—ela usará o modelo desta lição para criar seu próprio site de portfólio.

Método de Entendimento: Prática = construir uma casa com blocos—cada componente aprendido anteriormente (navbar, card, carrossel, formulário) é um bloco. Agora, combinamos eles em uma página completa.

(5) O Benefício

Através do modelo desta lição, Alice constrói com sucesso uma página inicial corporativa responsiva completa. Todos os módulos reutilizam componentes Bootstrap, o código é limpo e padronizado, e apenas o conteúdo precisa ser substituído para uso em produção.

2. Visão Geral do Projeto

Vamos construir uma página inicial corporativa contendo os seguintes módulos:

100% 
graph TD
    A[Navbar - Fixa no Topo] --> B[Hero Banner - Fundo largura total + CTA]
    B --> C[Recursos - Três cards]
    C --> D[Sobre - Texto e imagem misturados]
    D --> E[Equipe - Quatro cards de membros]
    E --> F[Formulário de Contato - Formulário + Informações]
    F --> G[Rodapé - Links + Direitos Autorais]

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Template Completo de Site Corporativo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Acme Corp - Início</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="bi bi-box me-2"></i>Acme Corp</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#hero">Início</a></li>
          <li class="nav-item"><a class="nav-link" href="#features">Recursos</a></li>
          <li class="nav-item"><a class="nav-link" href="#team">Equipe</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">Contato</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <section id="hero" class="bg-primary text-white py-5 mt-5">
    <div class="container text-center py-5">
      <h1 class="display-4 fw-bold">Construa Mais Rápido com Bootstrap</h1>
      <p class="lead mb-4">Um framework moderno e responsivo para seu próximo projeto.</p>
      <a href="#features" class="btn btn-light btn-lg px-4">Saiba Mais</a>
      <a href="#contact" class="btn btn-outline-light btn-lg px-4 ms-2">Fale Conosco</a>
    </div>
  </section>

  <!-- Recursos -->
  <section id="features" class="py-5">
    <div class="container">
      <h2 class="text-center mb-5">Por Que Nos Escolher</h2>
      <div class="row g-4">
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-lightning-charge-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Desempenho Rápido</h5>
              <p class="card-text text-body-secondary">Otimizado para velocidade com pegada mínima de CSS e JS.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-phone-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Totalmente Responsivo</h5>
              <p class="card-text text-body-secondary">Funciona perfeitamente em mobile, tablet e desktop.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-palette-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Personalizável</h5>
              <p class="card-text text-body-secondary">Fácil de tematizar com variáveis Sass e propriedades CSS customizadas.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Sobre -->
  <section class="py-5 bg-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <img src="https://via.placeholder.com/600x400/0d6efd/fff?text=About+Us" class="img-fluid rounded-3 shadow" alt="Sobre">
        </div>
        <div class="col-lg-6">
          <h2>Sobre Nossa Empresa</h2>
          <p class="lead text-body-secondary">Construímos soluções web desde 2015.</p>
          <p>Nossa equipe de desenvolvedores experientes usa o Bootstrap para criar aplicações web rápidas, confiáveis e bonitas para clientes em todo o mundo.</p>
          <ul class="list-unstyled">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>200+ projetos entregues</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>50+ clientes corporativos</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>99% satisfação dos clientes</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Equipe -->
  <section id="team" class="py-5">
    <div class="container">
      <h2 class="text-center mb-5">Conheça Nossa Equipe</h2>
      <div class="row g-4">
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/0d6efd/fff?text=AW" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Alice">
            <div class="card-body">
              <h5 class="card-title">Alice Wang</h5>
              <p class="card-text text-body-secondary">CEO & Fundadora</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/198754/fff?text=BC" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Bob">
            <div class="card-body">
              <h5 class="card-title">Bob Chen</h5>
              <p class="card-text text-body-secondary">CTO</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/dc3545/fff?text=CL" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Charlie">
            <div class="card-body">
              <h5 class="card-title">Charlie Li</h5>
              <p class="card-text text-body-secondary">Desenvolvedor Líder</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/6f42c1/fff?text=DY" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Diana">
            <div class="card-body">
              <h5 class="card-title">Diana Yang</h5>
              <p class="card-text text-body-secondary">Designer UX</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contato -->
  <section id="contact" class="py-5 bg-light">
    <div class="container">
      <h2 class="text-center mb-5">Entre em Contato</h2>
      <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
          <form class="needs-validation" novalidate>
            <div class="mb-3">
              <label class="form-label">Nome</label>
              <input type="text" class="form-control" required>
              <div class="invalid-feedback">Por favor, insira seu nome.</div>
            </div>
            <div class="mb-3">
              <label class="form-label">E-mail</label>
              <input type="email" class="form-control" required>
              <div class="invalid-feedback">Por favor, insira um e-mail válido.</div>
            </div>
            <div class="mb-3">
              <label class="form-label">Mensagem</label>
              <textarea class="form-control" rows="4" required></textarea>
              <div class="invalid-feedback">Por favor, insira uma mensagem.</div>
            </div>
            <button class="btn btn-primary w-100" type="submit">Enviar Mensagem</button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Rodapé -->
  <footer class="bg-dark text-white py-4">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <p class="mb-0">&copy; 2026 Acme Corp. Todos os direitos reservados.</p>
        </div>
        <div class="col-md-6 text-md-end">
          <a href="#" class="text-white me-3"><i class="bi bi-twitter-x"></i></a>
          <a href="#" class="text-white me-3"><i class="bi bi-github"></i></a>
          <a href="#" class="text-white"><i class="bi bi-linkedin"></i></a>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    (function() {
      var forms = document.querySelectorAll('.needs-validation')
      Array.prototype.slice.call(forms).forEach(function(form) {
        form.addEventListener('submit', function(event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
    })()
  </script>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

3. Decomposição de Módulos

Módulo Componentes/Classes Utilitárias Usadas Pontos Técnicos
Navbar navbar-expand-lg fixed-top scroll Fixa no topo, rolagem suave de links internos
Hero display-4 lead btn-lg bg-primary Fundo largura total + botões CTA duplos
Recursos card h-100 shadow-sm row-cols-* Três cards de altura igual, zero JS
Sobre row align-items-center img-fluid Texto e imagem lado a lado, quebra responsiva
Equipe rounded-circle card border-0 Grade responsiva de quatro membros
Formulário form-control needs-validation Validação de formulário completa
Rodapé bg-dark flex text-md-end Colunas esquerda-direita responsivas

4. Variações e Extensões de Módulos

▶ Exemplo: Variações de Seção Hero

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Variações de Hero</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <!-- Tipo de Hero 1: Texto Centralizado -->
  <section class="bg-primary text-white py-5">
    <div class="container text-center py-4">
      <h1 class="display-4 fw-bold">Hero Centralizado</h1>
      <p class="lead mb-4">Texto centralizado simples com botões CTA.</p>
      <a href="#" class="btn btn-light btn-lg px-4">Começar Agora</a>
    </div>
  </section>

  <!-- Tipo de Hero 2: Imagem + Texto Divididos -->
  <section class="bg-dark text-white py-5">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <h1 class="display-5 fw-bold">Hero de Layout Dividido</h1>
          <p class="lead mb-4">Texto à esquerda, imagem à direita. Ótimo para páginas de produto.</p>
          <a href="#" class="btn btn-warning btn-lg">Saiba Mais</a>
        </div>
        <div class="col-lg-6 text-center">
          <i class="bi bi-laptop display-1 text-warning"></i>
        </div>
      </div>
    </div>
  </section>

  <!-- Tipo de Hero 3: Imagem de Fundo -->
  <section class="py-5" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://via.placeholder.com/1200x400/333/fff?text=BG'); background-size: cover; background-position: center;">
    <div class="container text-center py-5 text-white">
      <p class="text-uppercase small fw-bold text-warning">Oferta Limitada</p>
      <h1 class="display-4 fw-bold">Hero com Imagem de Fundo</h1>
      <p class="lead mb-4">Com gradiente sobreposto para legibilidade.</p>
      <div class="d-flex justify-content-center gap-2">
        <a href="#" class="btn btn-warning btn-lg px-4">Comprar Agora</a>
        <a href="#" class="btn btn-outline-light btn-lg px-4">Saiba Mais</a>
      </div>
    </div>
  </section>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Grade de Recursos com Ícones

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grade de Recursos com Ícones</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-5">Por Que Nos Escolher</h2>
    <div class="row g-4">
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-rocket-takeoff fs-2 text-primary"></i>
          </div>
          <h5>Entrega Rápida</h5>
          <p class="text-body-secondary small">Implantação relâmpago com CDN global.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-success bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-shield-check fs-2 text-success"></i>
          </div>
          <h5>Seguro</h5>
          <p class="text-body-secondary small">Segurança de nível empresarial integrada.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-warning bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-graph-up-arrow fs-2 text-warning"></i>
          </div>
          <h5>Escalável</h5>
          <p class="text-body-secondary small">Cresce com seu negócio, sem limites.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-info bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-headset fs-2 text-info"></i>
          </div>
          <h5>Suporte 24/7</h5>
          <p class="text-body-secondary small">Assistência especializada a qualquer hora.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Carrossel de Depoimentos de Clientes

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carrossel de Depoimentos</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-5">O Que Nossos Clientes Dizem</h2>
    <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="2"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-primary"></i>
            <p class="lead mb-4">"O Bootstrap transformou nosso fluxo de desenvolvimento. Entregamos o MVP em 2 semanas em vez de 2 meses."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/0d6efd/fff?text=JD" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>John Doe</strong>
                <small class="d-block text-body-secondary">CEO, TechStart</small>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-success"></i>
            <p class="lead mb-4">"Os componentes responsivos nos economizaram inúmeras horas. Tudo simplesmente funciona em todos os dispositivos."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/198754/fff?text=JS" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>Jane Smith</strong>
                <small class="d-block text-body-secondary">CTO, WebFlow Inc</small>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-warning"></i>
            <p class="lead mb-4">"A personalização via Sass foi um divisor de águas. Combinamos perfeitamente com nossa marca sem brigar com o framework."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/dc3545/fff?text=MW" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>Mike Wang</strong>
                <small class="d-block text-body-secondary">Dev Líder, DesignCo</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Anterior</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Próximo</span>
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Seção de Tabela de Preços

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tabela de Preços</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-2">Planos de Preços</h2>
    <p class="text-center text-body-secondary mb-5">Escolha o plano que atende suas necessidades.</p>
    <div class="row g-4 justify-content-center">
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <h5 class="text-body-secondary">Iniciante</h5>
          <div class="display-4 fw-bold my-3">$9</div>
          <p class="text-body-secondary">por mês</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>1 projeto</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>5GB de armazenamento</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Suporte básico</li>
            <li class="mb-2 text-body-tertiary"><i class="bi bi-x-circle-fill me-2"></i>Análises avançadas</li>
          </ul>
          <button class="btn btn-outline-primary w-100 mt-auto">Começar Agora</button>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-primary border-2 shadow">
          <div class="badge bg-primary text-uppercase mb-2" style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);">Popular</div>
          <h5>Profissional</h5>
          <div class="display-4 fw-bold my-3">$29</div>
          <p class="text-body-secondary">por mês</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>10 projetos</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>50GB de armazenamento</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Suporte prioritário</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Análises avançadas</li>
          </ul>
          <button class="btn btn-primary w-100 mt-auto">Começar Agora</button>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <h5 class="text-body-secondary">Empresarial</h5>
          <div class="display-4 fw-bold my-3">$99</div>
          <p class="text-body-secondary">por mês</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Projetos ilimitados</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>500GB de armazenamento</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Suporte 24/7</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Integrações customizadas</li>
          </ul>
          <button class="btn btn-outline-primary w-100 mt-auto">Fale Conosco</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(1) Tabela de Referência de Componentes da Página

Seção Componente Recomendado Combinação de Classes Utilitárias Uso Responsivo
Hero container + display-* bg-primary text-white py-5 text-center text-md-start
Card de Recurso card + row-cols-* border-0 shadow-sm h-100 col-12 col-md-4
Sobre row align-items-center img-fluid rounded-3 shadow empilhamento col-lg-6
Equipe card + rounded-circle border-0 text-center col-6 col-lg-3
Depoimentos carousel + card border-0 p-5 mx-auto d-none d-md-block
Preços card + list-unstyled border-primary shadow col-lg-3 col-md-6
Formulário form-control + needs-validation w-100 mb-3 col-md-8 col-lg-6
Rodapé bg-dark text-white py-4 text-md-end colunas col-md-6

(2) Tabela de Referência de Breakpoints Responsivos

Breakpoint Prefixo de Classe Largura Mínima Dispositivo Alvo
X-Small Nenhum < 576px Mobile retrato
Small sm ≥ 576px Mobile paisagem
Medium md ≥ 768px Tablet
Large lg ≥ 992px Laptop
X-Large xl ≥ 1200px Monitor desktop
XX-Large xxl ≥ 1400px Monitor widescreen
Este modelo usa md / lg MD + LG Cobre tablet a desktop

(3) Tabela de Mapeamento de Esquema de Cores

Variável CSS Valor Padrão Exemplo de Cor de Marca Uso
--bs-primary #0d6efd #6f42c1 (roxo) Botões primários, links, cor de destaque
--bs-secondary #6c757d #adb5bd (cinza) Texto secundário, informações auxiliares
--bs-success #198754 #20c997 (ciano) Estado de sucesso, feedback de conclusão
--bs-warning #ffc107 #fd7e14 (laranja) Aviso, atenção, marcadores de promoção
--bs-danger #dc3545 #e83e8c (rosa) Erro, exclusão, alto risco
--bs-info #0dcaf0 #0d6efd (azul) Alertas informativos, marcadores de orientação
--bs-light #f8f9fa #f8f9fa Área de fundo clara
--bs-dark #212529 #1a1a2e Rodapé, área escura

❓ Perguntas Frequentes

P: Este site corporativo pode ser usado diretamente em produção? R: O modelo pode ser usado diretamente, mas recomenda-se: (1) Substituir imagens placeholder por conteúdo real; (2) Modificar variáveis Sass de acordo com as cores da marca; (3) Adicionar lógica real de processamento de formulário no back-end; (4) Adicionar meta tags de SEO.

P: Como posso tornar a página mais personalizada? R: A personalização Sass na Fase 5 pode alcançar cores de marca, fontes customizadas e modificações globais de espaçamento. Você também pode sobrescrever rapidamente os padrões do Bootstrap usando variáveis CSS.

P: Como o estado ativo da navbar é atualizado com a rolagem? R: Você precisa de JavaScript para ouvir eventos de rolagem, combinado com IntersectionObserver para determinar a seção atualmente visível. Este não é um recurso nativo do Bootstrap, mas pode ser alcançado com bibliotecas de terceiros.

P: Como este modelo se adapta a diferentes telas? R: O modelo é inerentemente responsivo: col-md-4 empilha automaticamente no mobile, navbar-expand-lg colapsa em um menu hambúrguer em telas estreitas, e img-fluid torna as imagens responsivas. Para melhorar a adaptação, você pode adicionar classes de breakpoint como col-12 col-sm-6 col-lg-3 para controlar o número de colunas em telas diferentes, ou usar d-none d-md-block para ocultar módulos secundários no mobile.

P: Quanto de estilo padrão do Bootstrap vs. CSS personalizado devo usar em um projeto? R: O princípio 80/20 é recomendado: 80% classes utilitárias e componentes Bootstrap, 20% CSS personalizado. Primeiro, use classes utilitárias para layout e espaçamento, sobrescreva cores de marca com variáveis Sass, e finalmente adicione CSS personalizado para efeitos especiais. Evite transformar seu projeto Bootstrap em "CSS totalmente personalizado"—isso perderia as vantagens de eficiência do framework.

📖 Resumo

📝 Exercícios

  1. ⭐ Com base no modelo desta lição, crie uma página inicial de portfólio pessoal: Substitua o nome da marca pelo seu nome, mude a seção Hero para "Olá, eu sou [Seu Nome]", mude a seção de recursos para suas tags de habilidade, e mude a seção de equipe para mostrar seus projetos.
  2. ⭐⭐ Adicione um novo módulo de carrossel de "Depoimentos" ao modelo usando a combinação carousel + card.
  3. ⭐⭐⭐ Adicione animações de rolagem: Use atributos data-bs-* do Bootstrap ou CSS @keyframes simples para fazer os módulos da página surgirem ao carregar.

Lição Anterior: Classes Utilitárias · Próxima Lição: Personalização Sass

Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%