Bootstrap: o problema é o PHP

Frank K Hosaka · Junho 7

O portal do Bootstrap tem um exemplo para o login e utilizei no meu código:

arquivo bootstrap.php
<!doctype html>
<html lang="en">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Projeto Laravel</title>
<style>
  .form:focus-within 
  {
    z-index: 2;
  }
</style>
<body class="bg-body-tertiary">
<div style="height:150px"></div>
<main class="w-25 m-auto">
  <form method="post" action="teste.php"> 
  <h1 class="h3 mb-3 fw-normal">Projeto Laravel</h1>
  <div class="form form-floating">
  <input type="email" class="form-control" style="background-color:white" autofocus>
  <label>Email</label>
  </div>
  <div class="form form-floating">
  <input type="password" class="form-control">
  <label>Senha</label>
  </div>
  <div class="my-3"></div>
  <button class="btn btn-primary w-100 py-2" type="submit">Entrar</button>
  </form>
</main>

O problema é que o resultado sai bem diferente do exemplo do portal, a caixa do <input type=email> sai com o fundo azul. Eu imaginei que fosse erro de digitação, mas hoje descobri que o problema é a extensão do arquivo. O exemplo do portal do Bootstratp usa o arquivo .html, mas eu uso a extensão .php, e olha só o desastre:

Editado Junho 7 por Frank K Hosaka

Frank K Hosaka · Junho 7

Eu ainda não consegui resolver o problema, mas consegui tirar o CSS z-index:2 do código, separei o <input type-email> do <input type=password> com um

<div class="my-1"></div>

entre eles, e assim a borda que aparece na hora de digitar não se sobrepõe à borda do outro. Não é uma solução elegante, mas a solução é bem simples. O Bootstrap oferece vários recursos, no meu caso, eu só tentei copiar o layout o máximo que eu pude.

O código final ficou assim:

<!doctype html>
<html lang="en">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Projeto Laravel</title>
<body class="bg-body-tertiary">
<div style="height:150px"></div>
<main class="w-25 m-auto">
  <form method="post" action="teste.php"> 
  <h1 class="h3 mb-3 fw-normal">Projeto Laravel</h1>
  <div class="form-floating">
  <input type="email" class=form-control autofocus>
  <label>Email</label>
  </div>
  <div class="form-floating">
  <div class="my-1"></div>
  <input type="password" class="form-control">
  <label>Senha</label>
  </div>
  <div class="my-3"></div>
  <button class="btn btn-primary w-100 py-2" type="submit">Entrar</button>
  </form>
</main>

Note que na figura abaixo que as caixas do <input> estão com o fundo branco, o problema é na hora de digitar, o PHP pinta de azul.

Editado Junho 7 por Frank K Hosaka

Entrar

Bootstrap: o problema é o PHP

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades