Estudo de Caso #01 – Programação WEB

Template Básico HTML com Bootstrap

Este estudo de caso visa criar um template básico usando HTML e Bootstrap, permitindo a construção de uma página web estática e responsiva. O exercício inclui a criação de elementos como Navbar, Header, Body com um formulário de cadastro de cliente, e Footer.

O Bootstrap facilita a estilização e a responsividade com classes predefinidas, simplificando o desenvolvimento de componentes visuais, como formulários e layouts.

O Bootstrap 5 foi importante por oferecer componentes prontos e responsivos, sem a necessidade de customizações extensas em CSS. A construção da Navbar e do formulário foi rápida e resultou em uma interface limpa e organizada. As dificuldades estiveram na organização das classes e no ajuste dos espaçamentos, garantindo uma boa distribuição dos elementos.

Considerações e Reflexões

Criar um template com HTML e Bootstrap é uma excelente introdução ao front-end. O Bootstrap simplifica muito o desenvolvimento de layouts responsivos sem a necessidade de CSS detalhado. Esta experiência proporcionou uma base sólida para construir interfaces focadas em usabilidade.

Cadastro de Cliente

################

Script

<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Template Básico com Bootstrap</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <!-- NavBar -->
   <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item me-4">
          <a class="nav-link text-danger badge bg-light border border-danger rounded-pill px-3 py-2" href="#">Home</a>
        </li>
        <li class="nav-item me-4">
          <a class="nav-link text-danger badge bg-light border border-danger rounded-pill px-3 py-2" href="#">Sobre</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-danger badge bg-light border border-danger rounded-pill px-3 py-2" href="#">Cadastro</a>
        </li>
      </ul>
      </div>
    </div>
  </nav>

  <!-- Header -->
  <header class="bg-primary text-white text-center py-5">
    <h1>Bem-vindo ao Meu Site</h1>
    <p>Exemplo de um template simples usando HTML e Bootstrap 5</p>
  </header>

  <!-- Body -->
  <div class="container mt-5 text-center">
    <h2 class="mb-5">Cadastro de Cliente</h2>
    <form>
       <div class="mb-3 text-start">
        <label for="nome" class="form-label">Nome Completo:</label>
        <input type="text" class="form-control" id="nome" placeholder="Digite seu nome completo">
      </div>
       <div class="mb-3 text-start">
        <label for="cpf" class="form-label">CPF:</label>
        <input type="text" class="form-control" id="cpf" placeholder="Digite seu CPF">
      </div>
       <div class="mb-3 text-start">
          <label for="nascimento" class="form-label">Data de Nascimento:</label>
         <input type="text" class="form-control" id="nascimento" placeholder="Selecione sua data de nascimento">
      </div>
    <p id="dataSelecionada"></p>
       <div class="mb-3 text-start">
        <label for="email" class="form-label">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Digite seu email">
      </div>
       <div class="mb-3 text-start">
        <label for="telefone" class="form-label">Telefone:</label>
        <input type="tel" class="form-control" id="telefone" placeholder="Digite seu telefone">
      </div>
          <div class="d-flex justify-content-center">
      <button type="submit" class="btn btn-primary">Enviar</button>
    </div>
    </form>
  </div>
  <!-- Footer -->
  <footer class="bg-dark text-white text-center py-4 mt-5">
    <p>&copy; 2024 rolfrostock. Todos os direitos reservados.</p>
  </footer>
</body>
</html>