Clique aqui e veja todas as aulas
1. Introdução ao Bootstrap
Bootstrap é uma biblioteca front-end popular que facilita a criação de interfaces web responsivas e bem estilizadas. Ele oferece diversos componentes prontos, como botões, formulários, tabelas e muito mais, permitindo que você estilize a interface do seu projeto rapidamente.
2. Integrando o Bootstrap no Projeto
Primeiro, vamos garantir que o Bootstrap esteja integrado ao nosso projeto. No arquivo tasks.php, adicione o link para o Bootstrap na seção <head>:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerenciador de Tarefas</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>Agora, podemos começar a estilizar os elementos da nossa página.
3. Estilizando o Formulário de Criação de Tarefas
No formulário de criação de tarefas, já estamos usando algumas classes do Bootstrap, como form-control para os inputs. Vamos melhorá-lo ainda mais.
<form method="post" class="mt-3">
<div class="form-group">
<label for="name">Nome da Tarefa</label>
<input type="text" name="name" class="form-control" placeholder="Digite o nome da tarefa" required>
</div> <div class="form-group">
<label for="description">Descrição</label>
<textarea name="description" class="form-control" rows="3" placeholder="Descrição da tarefa" required></textarea>
</div> <div class="form-group">
<label for="status">Status</label>
<input type="text" name="status" class="form-control" placeholder="Status da tarefa" required>
</div>
<button type="submit" name="create" class="btn btn-primary btn-block">Criar Tarefa</button>
</form>- Melhorias: O botão agora usa as classes
btnebtn-primarypara ficar azul e estilizado. O formulário está espaçado commt-3(margin-top) eform-controlpara inputs etextareamelhoram a aparência.
4. Estilizando a Lista de Tarefas
Vamos utilizar o componente de lista do Bootstrap para tornar a exibição das tarefas mais clara e organizada.
<h3 class="mt-5">Lista de Tarefas</h3>
<ul class="list-group mt-3">
<?php while ($row = $tarefas->fetch_assoc()): ?>
<li class="list-group-item">
<h5><?php echo $row['name']; ?></h5>
<p><?php echo $row['description']; ?></p>
<span class="badge badge-info"><?php echo $row['status']; ?></span>
</li>
<?php endwhile; ?> </ul>- Melhorias: A lista agora usa
list-groupelist-group-itempara estilizar cada tarefa. O nome da tarefa é exibido como um título (<h5>), a descrição como um parágrafo, e o status recebe umabadge(etiqueta) estilizada.
5. Tornando a Interface Responsiva
Graças ao Bootstrap, nossa interface já é responsiva. Isso significa que ela se adapta automaticamente a diferentes tamanhos de tela, como celulares, tablets e desktops, sem a necessidade de alterações adicionais.
Experimente redimensionar a janela do navegador para ver como os elementos se ajustam ao espaço disponível.
6. Exercício Prático
- Teste o formulário e a listagem de tarefas em diferentes dispositivos (como no celular ou em uma janela redimensionada).
- Experimente alterar as cores dos botões e das badges usando classes como
btn-success,btn-dangeroubadge-warning,badge-success.
7. Próximos Passos
Na próxima aula, vamos continuar aprimorando a interface do nosso projeto, adicionando mais funcionalidades e completando o ciclo de CRUD (inclusão, leitura, atualização e exclusão de tarefas).
