TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare layout di carte Bootstrap 5?

2

Nel nostro tutorial precedente abbiamo spiegato diversi modi per creare carte come un singolo componente. Poiché le carte sono una raccolta di elementi diversi, puoi usarle per creare layout di pagina completi come pagine indice di blog in muratura. Bootstrap 5 offre tre classi CSS predefinite per la creazione di layout di pagina con le carte. In questo tutorial esploriamo di più sulla creazione di layout di carte.

È possibile scaricare i codici di layout di esempio utilizzati in questo tutorial qui.

Tipi di layout delle carte

Bootstrap utilizza le seguenti tre classi CSS per creare layout di carte:

  • gruppo di carte
  • mazzo di carte
  • colonne-carte

Oltre a queste classi puoi creare layout posizionando singole carte all’interno di colonne di layout della griglia predefinite .

Layout 1: Layout del gruppo di carte

È possibile utilizzare la classe ".card-group" per raggruppare singole carte in un layout scatola flessibile con colonne di uguale altezza. Di seguito è riportato un esempio che raggruppa tre carte come layout insieme utilizzando gruppi di carte.

Come creare layout di carte Bootstrap 5?

Come puoi vedere, il gruppo di carte avrà un bell’aspetto senza spazi tra le singole carte. Puoi mescolare e abbinare diversi elementi all’interno delle carte come discusso nel tutorial delle carte Bootstrap. In questo esempio, abbiamo utilizzato tre schede simili con immagine, titolo, descrizione e piè di pagina. Di seguito è riportato il codice completo per il layout del gruppo di carte, in pratica abbiamo inserito il codice dei gruppi di carte tra il corpo del modello di avvio Bootstrap :

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Card Groups Layout --> <div class="card-group"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 3"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> <!-- End of Card Groups Layout --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Layout 2: layout del mazzo di carte

La classe ".card-deck" crea il layout simile al gruppo di carte con l’eccezione che ci sarà uno spazio marginale tra le singole carte come mostrato di seguito:

Come creare layout di carte Bootstrap 5?

Il layout del mazzo di carte utilizza anche la casella flessibile per avere colonne di uguale altezza all’interno di un contenitore indipendentemente dalle dimensioni del contenuto delle singole carte.

Di seguito è riportato il codice completo per la creazione di un layout del mazzo di carte.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Card Deck Layout --> <div class="card-deck"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> <!-- End of Card Deck Layout --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Layout 3: layout delle colonne della scheda o layout della muratura

Il layout in muratura è uno dei modi più diffusi per mostrare la pagina dell’indice del blog con le singole caselle che si adattano allo spazio disponibile. Qui l’altezza della singola carta sarà diversa in base alle dimensioni effettive della carta. Di seguito è riportato come apparirà il layout della muratura utilizzando la classe ".card-columns".

Come creare layout di carte Bootstrap 5?

Il codice completo per il layout di muratura sopra è riportato di seguito:

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Card Columns Layout --> <div class="card-columns"> <div class="card"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and you can enter longer text to check the cards are aligned perfectly like on the masonry layout.</p> </div> </div> <div class="card"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card p-3 bg-dark text-white"> <blockquote class="blockquote mb-0"> <p>This is a blockquote and you can enter any quote from anyone.</p> <footer> <small class="text-muted"> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card bg-primary p-3 text-center text-white"> <blockquote class="blockquote mb-0"> <p>Here is a description for primary card.</p> <footer> <small> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card text-center"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p>Here is a short description of the card without image.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card p-3 text-right"> <blockquote class="blockquote mb-0"> <p>Here is a short description without title and image.</p> <footer> <small> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a long description for your card, enter anything you would like to enter here.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card"> <img class="card-img img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Image Only Card"> </div> </div> <!-- End of Card Columns Layout --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Puoi aggiungere tanti elementi o estrarlo dal blogroll per mostrarlo come una pagina indice.

Punti da notare:

  • Potrebbe essere necessario aggiungere il 100% di larghezza alle immagini utilizzate sul layout in muratura come .img-fluid{width:100%;}.

  • Ricorda che la classe ".p-3" viene utilizzata per aggiungere padding alla carta che contiene solo testo descrittivo per aggiungere padding 1rem.

  • I layout delle carte non sono responsive sui dispositivi mobili con la versione iniziale di Bootstrap 5.

    • *

Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More