Outro Card-Deck Bootstrap com Foreach (PHP)

assinante · 5 de setembro de 2020

<?php
	require_once 'system/config.php';
	require_once 'system/database.php';
?>

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <title>Home Page</title>
  </head>
  <body>


<div class="container">

	<?php
		$posts = DBRead('posts', "WHERE status = 1 ORDER BY data DESC");

		if (!$posts)
			echo '<h2>Nenhuma postagem encontrada!</h2>';
		else
			foreach ($posts as $post): 
	?>

<div class="card mb-3">
  <img class="card-img-top" src="<?php echo $post['imagem']; ?>" height='350' width='600' alt="Card image cap"> 
  <div class="card-body">
    <h5 class="card-title"><a href="exibe.php?id=<?php echo $post['id']; ?>" title="<?php echo $post['titulo']; ?>"><?php echo $post['titulo']; ?></a></h5>
    <h6 class="card-subtitle mb-2 text-muted">
        por <b><?php echo $post['autor']; ?></b>
    em <b><?php echo date('d/m/Y', strtotime($post['data'])) ?></b> |
    Visitas: <b><?php echo $post['visitas']; ?></b>
  </h6>
    <p class="card-text">
        <?php
      $str = strip_tags($post['conteudo']);
      $len = strlen($str);
      $max = 500;

      if ($len <= $max)
        echo $str;
      else
        echo substr($str, 0, $max) . '...';
        ?>
    </p>
    <div class="pb-5"><a href="exibe.php?id=<?php echo $post['id']; ?>" class="btn btn-dark float-right" title="Ler Mais">Ler Mais</a></div>
  </div>
</div>

<?php endforeach; ?>
</div>


</body>
</html>

Essa é minha tela inicial de um sistema de blog que estou fazendo, quando tem mais de 4 postagens, gostaria fosse quebrando a linha automaticamente, sendo responsivo, entende?

Não sei nada sobre card-deck do bootstrap, alguem ajuda?

Renan M Galvão · 9 de setembro de 2020

Olá. Se eu entendi bem você quer 4 cards alinhados horizontalmente e quando houver mais do que isso eles irão para a "próxima linha", isto é, para baixo. O Bootstrap funciona com um sistema de grade que é formado por linhas e colunas que ficam dentro de contêineres como na imagem:

São 12 colunas por linha. Para definir a quantidade de elementos por linha (row na classe bootstrap) basta dividir o número de colunas pelo número de elementos. No teu caso 12 / 4 = 3. Cada elemento teu deve ocupar 3 colunas para que haja 4 elementos por linha. Muito bem, isso é o básico. O resultado com o HTML e aplicando o que eu disse:

Imagem:

Spoiler

Código:

Spoiler


<div class="card mb-3 mx-auto col-3">
                <img class="card-img-top img-fluid" src="https://via.placeholder.com/350x600" height="350" width="600" alt="Card image cap"> 
                <div class="card-body">
                    <h5 class="card-title"><a href="exibe.php?id=id" title="Dies Irae">Dies Irae</a></h5>
                    <h6 class="card-subtitle mb-2 text-muted">por <b>Tomás de Celeno</b> em <b>01/01/1200</b> | Visitas: <b>1404</b></h6>
                    <p class="card-text">
                        Dies iræ! dies illa Solvet sæclum in favilla Teste David cum Sibylla! Quantus tremor est futurus, quando judex est venturus, cuncta stricte discussurus! Tuba mirum spargens sonum per sepulchra regionum, coget omnes ante thronum. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Liber scriptus proferetur, in quo totum continetur, unde mundus judicetur. Judex ergo cum sedebit, quidquid latet apparebit: nil in...
                    </p>
                    <div class="pb-5"><a href="exibe.php?id=id" class="btn btn-dark float-right" title="Ler Mais">Ler Mais</a></div>
                </div>
            </div>

Como você pretende também deixar o site responsivo você precisa se atentar aos pontos de quebra. Existem 4 que são: xs (extra pequeno), sm (pequeno), md (médio), lg (largo ou grande). Por padrão o bootstrap utiliza o xs, então, se você usar a classe "col-3" você terá definido tanto para telas extras pequenas quanto para todo o restante de tamanhos já que o bootstrap configura da resolução inicial para cima. As classes dos outros tamanhos apenas funcionam se você alcançar o tamanho mínimo requerido para aquela classe. Os pontos de quebras são estes:

Spoiler


// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Caso você queira uma separação diferente a depender da tela você precisa configurar isso manualmente visualizando naquela tela para ter uma noção melhor do que está ocorrendo. O padrão é: col-{tamanho_tela}-{quantidade_colunas}. Isso vai depender do teu gosto. No caso eu fiz a seguinte configuração: em telas extra pequenas haverá apenas um card por vez, em telas médias (note que telas "pequenas" seguirá a mesma configuração que as telas extra pequenas) haverá duas e apenas a partir de telas grandes (ou largas) haverá os 4 elementos por linha (row).

Imagens:

Spoiler

Código:

Spoiler


<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

        <title>Home Page</title>
    </head>
    <body>
        <div class="container">
        <div class="row">

            <div class="card mb-3 mx-auto col-12 col-md-6 col-lg-3">
                <img class="card-img-top img-fluid" src="https://via.placeholder.com/350x600" height="350" width="600" alt="Card image cap"> 
                <div class="card-body">
                    <h5 class="card-title"><a href="exibe.php?id=id" title="Dies Irae">Dies Irae</a></h5>
                    <h6 class="card-subtitle mb-2 text-muted">por <b>Tomás de Celeno</b> em <b>01/01/1200</b> | Visitas: <b>1404</b></h6>
                    <p class="card-text">
                        Dies iræ! dies illa Solvet sæclum in favilla Teste David cum Sibylla! Quantus tremor est futurus, quando judex est venturus, cuncta stricte discussurus! Tuba mirum spargens sonum per sepulchra regionum, coget omnes ante thronum. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Liber scriptus proferetur, in quo totum continetur, unde mundus judicetur. Judex ergo cum sedebit, quidquid latet apparebit: nil in...
                    </p>
                    <div class="pb-5"><a href="exibe.php?id=id" class="btn btn-dark float-right" title="Ler Mais">Ler Mais</a></div>
                </div>
            </div>

            <div class="card mb-3 mx-auto col-12 col-md-6 col-lg-3">
                <img class="card-img-top img-fluid" src="https://via.placeholder.com/350x600" height="350" width="600" alt="Card image cap"> 
                <div class="card-body">
                    <h5 class="card-title"><a href="exibe.php?id=id" title="Dies Irae">Dies Irae</a></h5>
                    <h6 class="card-subtitle mb-2 text-muted">por <b>Tomás de Celeno</b> em <b>01/01/1200</b> | Visitas: <b>1404</b></h6>
                    <p class="card-text">
                        Dies iræ! dies illa Solvet sæclum in favilla Teste David cum Sibylla! Quantus tremor est futurus, quando judex est venturus, cuncta stricte discussurus! Tuba mirum spargens sonum per sepulchra regionum, coget omnes ante thronum. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Liber scriptus proferetur, in quo totum continetur, unde mundus judicetur. Judex ergo cum sedebit, quidquid latet apparebit: nil in...
                    </p>
                    <div class="pb-5"><a href="exibe.php?id=id" class="btn btn-dark float-right" title="Ler Mais">Ler Mais</a></div>
                </div>
            </div>

            <div class="card mb-3 mx-auto col-12 col-md-6 col-lg-3">
                <img class="card-img-top img-fluid" src="https://via.placeholder.com/350x600" height="350" width="600" alt="Card image cap"> 
                <div class="card-body">
                    <h5 class="card-title"><a href="exibe.php?id=id" title="Dies Irae">Dies Irae</a></h5>
                    <h6 class="card-subtitle mb-2 text-muted">por <b>Tomás de Celeno</b> em <b>01/01/1200</b> | Visitas: <b>1404</b></h6>
                    <p class="card-text">
                        Dies iræ! dies illa Solvet sæclum in favilla Teste David cum Sibylla! Quantus tremor est futurus, quando judex est venturus, cuncta stricte discussurus! Tuba mirum spargens sonum per sepulchra regionum, coget omnes ante thronum. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Liber scriptus proferetur, in quo totum continetur, unde mundus judicetur. Judex ergo cum sedebit, quidquid latet apparebit: nil in...
                    </p>
                    <div class="pb-5"><a href="exibe.php?id=id" class="btn btn-dark float-right" title="Ler Mais">Ler Mais</a></div>
                </div>
            </div>

            <div class="card mb-3 mx-auto col-12 col-md-6 col-lg-3">
                <img class="card-img-top img-fluid" src="https://via.placeholder.com/350x600" height="350" width="600" alt="Card image cap"> 
                <div class="card-body">
                    <h5 class="card-title"><a href="exibe.php?id=id" title="Dies Irae">Dies Irae</a></h5>
                    <h6 class="card-subtitle mb-2 text-muted">por <b>Tomás de Celeno</b> em <b>01/01/1200</b> | Visitas: <b>1404</b></h6>
                    <p class="card-text">
                        Dies iræ! dies illa Solvet sæclum in favilla Teste David cum Sibylla! Quantus tremor est futurus, quando judex est venturus, cuncta stricte discussurus! Tuba mirum spargens sonum per sepulchra regionum, coget omnes ante thronum. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Liber scriptus proferetur, in quo totum continetur, unde mundus judicetur. Judex ergo cum sedebit, quidquid latet apparebit: nil in...
                    </p>
                    <div class="pb-5"><a href="exibe.php?id=id" class="btn btn-dark float-right" title="Ler Mais">Ler Mais</a></div>
                </div>
            </div>

            <div class="card mb-3 mx-auto col-12 col-md-6 col-lg-3">
                <img class="card-img-top img-fluid" src="https://via.placeholder.com/350x600" height="350" width="600" alt="Card image cap"> 
                <div class="card-body">
                    <h5 class="card-title"><a href="exibe.php?id=id" title="Dies Irae">Dies Irae</a></h5>
                    <h6 class="card-subtitle mb-2 text-muted">por <b>Tomás de Celeno</b> em <b>01/01/1200</b> | Visitas: <b>1404</b></h6>
                    <p class="card-text">
                        Dies iræ! dies illa Solvet sæclum in favilla Teste David cum Sibylla! Quantus tremor est futurus, quando judex est venturus, cuncta stricte discussurus! Tuba mirum spargens sonum per sepulchra regionum, coget omnes ante thronum. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Liber scriptus proferetur, in quo totum continetur, unde mundus judicetur. Judex ergo cum sedebit, quidquid latet apparebit: nil in...
                    </p>
                    <div class="pb-5"><a href="exibe.php?id=id" class="btn btn-dark float-right" title="Ler Mais">Ler Mais</a></div>
                </div>
            </div>

            <div class="card mb-3 mx-auto col-12 col-md-6 col-lg-3">
                <img class="card-img-top img-fluid" src="https://via.placeholder.com/350x600" height="350" width="600" alt="Card image cap"> 
                <div class="card-body">
                    <h5 class="card-title"><a href="exibe.php?id=id" title="Dies Irae">Dies Irae</a></h5>
                    <h6 class="card-subtitle mb-2 text-muted">por <b>Tomás de Celeno</b> em <b>01/01/1200</b> | Visitas: <b>1404</b></h6>
                    <p class="card-text">
                        Dies iræ! dies illa Solvet sæclum in favilla Teste David cum Sibylla! Quantus tremor est futurus, quando judex est venturus, cuncta stricte discussurus! Tuba mirum spargens sonum per sepulchra regionum, coget omnes ante thronum. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Mors stupebit et natura, cum resurget creatura, judicanti responsura. Liber scriptus proferetur, in quo totum continetur, unde mundus judicetur. Judex ergo cum sedebit, quidquid latet apparebit: nil in...
                    </p>
                    <div class="pb-5"><a href="exibe.php?id=id" class="btn btn-dark float-right" title="Ler Mais">Ler Mais</a></div>
                </div>
            </div>

           
        </div>
        </div>
    </body>
</html>

Pequenas observações:

Coloquei os cards dentro de de um <div class="row"> para que efetivamente eles estivessem dentro de uma "linha". Se não me engano é possível montar a página sem colocar esse div com a classe, entretanto, o CSS pode dar resultados não esperados. Não aconselho que faça isso.
Utilizei mx-auto em todos os cards. Análogo ao mb-3 que você usou eu apenas defini que as marges horizontais serão distribuídas de maneira automática quando houver espaço. Isso é ótimo para os cards que irão sobrar embaixo.
Usei a classe img-fluid em todas as imagens para que o aspecto delas não se torne feio após o redimensionamento.

Leia mais na documentação: https://getbootstrap.com.br/docs/4.1/getting-started/introduction/. Fique com Deus.

assinante · 10 de setembro de 2020

@Renan M Galvão Não sei como agradecer seu suporte!! SENSACIONAL a sua explicação e exemplificação! Imagino o tempo que investiu para explicar dessa forma, além disso, ainda apresentou a solução! Vou passar a adotar o mx-auto. Percebi que essa foi sua primeira contribuição aqui no Fórum. Então.... seja muito bem-vindo a melhor comunidade tech da internet !!!

Novamente, muito obrigado e espero te ver mais por aqui !! tmj