Ir para conteúdo
Fórum Script Brasil
  • 0

Bootstrap: o problema é o PHP


Frank K Hosaka

Pergunta

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:

 

Captura de tela 2024-06-06 224610.png

Captura de tela 2024-06-06 224626.png

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0
Postado (editado)

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.

Captura de tela 2024-06-07 081104.png

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...