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

Come creare carte Bootstrap 5?

1

Bootstrap 4 ha introdotto un nuovo componente chiamato card. I componenti come pannelli, miniature e pozzetti in Bootstrap 3 sono stati rimossi e realizzati come un singolo componente chiamato carte in Bootstrap 4. Le carte sono elementi ottimizzati per i dispositivi mobili e sono diventate più popolari con l’uso in Google Material Design. In questo tutorial discutiamo come creare varie carte in tempo reale utilizzando l’ultimo Bootstrap 5.

È possibile scaricare gli esempi utilizzati in questo tutorial qui.

Tutorial Bootstrap 5 Carte

Questo tutorial copre i seguenti capitoli:

  1. Che cos’è il componente della carta?
  2. Carta Bootstrap base 5
  3. Dimensioni delle carte
  4. Scheda con sottotitoli e link
  5. Allineamento del testo
  6. Aggiunta di intestazione e piè di pagina
  7. Utilizzo delle schede di navigazione
  8. Immagine in fondo alla scheda
  9. Scheda con sovrapposizione di immagini
  10. Carta invertita o nera
  11. Carte con colori di sfondo
  12. Schede di contorno
  13. Layout delle carte

1 Che cosa sono le carte in Bootstrap?

Le carte sono un contenitore fluido che contiene intestazione, piè di pagina e contenuto. La parte del contenuto può avere diversi tipi di elementi come titolo, descrizione, immagine, pulsanti, ecc. Con il mix and match di diversi elementi, ci sono molte possibilità per creare diversi tipi di carte. Copriamo le carte con un aspetto di base e più accattivante.

2 carte base

Il componente base della scheda avrà un’immagine, un titolo, una descrizione e un pulsante. Questa è la forma più generica di utilizzo delle carte sui blog e sui progetti di layout di pagina.

Come creare carte Bootstrap 5?

Lo snippet di codice per la creazione della scheda di base è riportato di seguito con il modello di partenza completo :

<!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> <!-- Basic Card with Image, Title and Description --> <div class="card" style="width:20rem;"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- 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>

Idealmente non c’è bisogno di script per le carte fintanto che vengono utilizzati solo elementi semplici all’interno del blocco delle carte. Come hai notato, ci sono molte classi CSS utilizzate per creare una carta.

  • La carta dovrebbe essere identificata con la classe ".card" racchiusa con a

    etichetta.

  • L’immagine è un elemento opzionale nella scheda. Per includere l’immagine in cima dovresti aggiungere una classe ".card-img-top". La classe aggiuntiva ".img-fluid" viene aggiunta per garantire che l’immagine sia reattiva e si adatti alla larghezza del contenitore.

  • La carta può avere più blocchi di carte avvolti all’interno di un separato

    tag con una classe CSS “.card-body". Ogni blocco di carte contiene il contenuto di quel blocco come titolo, descrizione, ecc.

  • Nel nostro esempio abbiamo usato

    intestazione per titolo con la classe “.card-title”. Dopo il titolo abbiamo una breve descrizione usando

    tag con la classe “.card-text”. Infine abbiamo un pulsante identificato con la normale classe di pulsanti Bootstrap.

Ricorda che ".card" e ".card-body" sono sufficienti per avere una carta con qualsiasi tipo di contenuto all’interno del blocco.

3 Dimensionamento del componente della scheda

Il componente della scheda per impostazione predefinita è fluido e si estende su tutta la larghezza del contenitore. Nell’esempio di carta di base sopra, abbiamo usato "style="width:20rem;"" per limitare la larghezza a 20rem. È possibile utilizzare diversi modi per limitare la larghezza.

  • Usando lo stile in linea come nell’esempio sopra.
  • Utilizzo del layout della griglia.
  • Utilizzo delle classi di utilità per regolare larghezza e altezza.

In tutti i nostri esempi, utilizzeremo lo stile in linea per rendere la carta di una larghezza specifica.

4 Card con sottotitoli e link

Iniziamo a modificare la scheda di base per avere un sottotitolo e collegamenti al posto del pulsante. Il sottotitolo può essere aggiunto utilizzando la classe ".card-subtitle" e il margine inferiore deve essere aggiunto per creare lo spazio necessario tra titolo e sottotitolo. I collegamenti vengono creati utilizzando tag di ancoraggio HTML standard .

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6> <p class="card-text">This card has no image but has subtitle and two links instead of button.</p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> </div> </div>

Questo dovrebbe produrre il seguente risultato sul browser:

Come creare carte Bootstrap 5?

5 carte con allineamento del testo

Per impostazione predefinita, gli elementi della carta sono allineati a sinistra che possono essere modificati a destra e al centro utilizzando le classi ".text-right" e ".text-center" rispettivamente nella classe ".card-block".

<!-- Card with Center Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-center"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with center text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- Card with Right Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-right"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with right text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

Il risultato finale sarà il seguente:

Come creare carte Bootstrap 5?

L’elemento immagine viene rimosso nell’esempio della scheda sopra per mostrare l’allineamento del testo.

6 Aggiunta di intestazione e piè di pagina

Che ne dici di aggiungere intestazione e piè di pagina alla scheda in modo simile al componente del pannello in Bootstrap 3? Sì, puoi aggiungere intestazione e piè di pagina usando le classi ".card-header" e ".card-footer" come di seguito:

<div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-primary">Button</a> </div> <div class="card-footer"> This is a Footer </div> </div>

Ricorda di aggiungere classi di intestazione o piè di pagina per separare

tag prima e dopo la sezione ".card-block". L’output della scheda con intestazione e piè di pagina è riportato di seguito:

Come creare carte Bootstrap 5?

7 Utilizzo delle schede di navigazione nella scheda

La parte di intestazione della scheda può utilizzare il componente di navigazione predefinito per convertire la scheda come una scheda orizzontale come di seguito.

Come creare carte Bootstrap 5?

Di seguito il codice della tessera con navigazione:

<div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link active" href="#">Tab1</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link" href="#">Tab2</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link disabled" href="#">Tab3</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">This is a title for tab 1</h4> <p class="card-text">This card uses navigation with default navigation components.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

8 Immagine in basso

La carta predefinita avrà l’immagine sopra la carta come mostrato nell’esempio della carta di base. Puoi spostare l’immagine verso il basso sulla scheda usando ".card-img-bottom" e spostare il

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is Bootstrap 5 card with image aligned bottom of the card component.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> <img class="card-img-bottom" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Image Down"> </div>

La scheda con l’immagine in basso avrà il seguente aspetto:

Come creare carte Bootstrap 5?

9 Scheda con sovrapposizione di immagini

Invece di avere l’immagine in alto o in basso, puoi aggiungere tutti gli elementi di testo sopra l’immagine come una sovrapposizione come di seguito:

Come creare carte Bootstrap 5?

<div class="card bg-dark text-white" style="width:20rem;"> <img class="card-img" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a short description to explain what this card is about.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> </div>

La classe ".card-img-overlay" viene utilizzata all’interno

tag che copre tutti gli elementi di testo per sovrapporli all’immagine. Qui abbiamo usato ".card-inverse" per convertire il testo in colore chiaro poiché abbiamo usato un’immagine di sfondo scuro. Puoi leggere di più sulla carta invertita nel prossimo esempio.

10 carte invertite o nere

Per impostazione predefinita, gli elementi di testo di una carta utilizzano colori scuri assumendo che il colore di sfondo sia di colore chiaro (generalmente bianco). Il colore del testo può essere facilmente invertito in un colore chiaro utilizzando la classe ".text-white". Ricorda che questo invertirà solo i colori del testo e dovresti dichiarare lo sfondo manualmente in un colore scuro usando la classe ".bg-dark" per garantire la leggibilità.

Di seguito è riportato il codice per la carta invertita con colore di sfondo nero dichiarato utilizzando lo stile in linea.

<div class="card bg-dark text-white mb-3" style="background-color: #333;"> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a card with inverse color and background is set as black.</p> <a href="#" class="btn btn-primary">Go somehwere</a> </div> </div>

La carta invertita dovrebbe apparire come di seguito:

Come creare carte Bootstrap 5?

11 carte con diversi colori di sfondo

Guardare le carte con sfondo bianco sarà noioso. Utilizzare una delle classi di utilità di sfondo per aggiungere uno sfondo colorato al componente della scheda. Puoi passare a uno dei colori di sfondo come primario, secondario, successo, chiaro, scuro, avviso, informazioni o pericolo. Di seguito è riportata la scheda con intestazione e diversi colori di sfondo.

<div class="card text-white bg-primary mb-3"> <div class="card-header">Primary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card text-white bg-secondary mb-3"> <div class="card-header">Secondary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with secondary color background.</p> </div> </div> <div class="card text-white bg-success mb-3"> <div class="card-header">Success</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card text-white bg-info mb-3"> <div class="card-header">Info</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card text-white bg-warning mb-3 text-center"> <div class="card-header">Warning</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background and aligned center.</p> </div> </div> <div class="card text-white bg-danger mb-3 text-center"> <div class="card-header">Danger</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background and aligned center.</p> </div> </div> <div class="card bg-light mb-3 text-center"> <div class="card-header">Light</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with light color background and aligned center.</p> </div> </div> <div class="card text-white bg-dark mb-3 text-center"> <div class="card-header">Dark</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with dark color background and aligned center.</p> </div> </div>

Ricorda di includere la classe ".text-white" poiché tutti questi sfondi sono di colore più scuro e richiedono che il testo sia di colore più chiaro.

Le carte con diversi colori di sfondo sono mostrate di seguito:

Come creare carte Bootstrap 5?

12 Carte Contorno

Le carte del contorno avranno uno sfondo bianco semplice con diversi colori del bordo usando “.card-outline-primary”,”.card-outline-secondary”,”.card-outline-success”,”.card-outline-info”,” classi .card-outline-warning” e “card-outline-danger”.

<div class="card border-primary mb-3 text-center"> <div class="card-header">Primary Border</div> <div class="card-body text-primary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-secondary mb-3 text-center"> <div class="card-header">Secondary Border</div> <div class="card-body text-secondary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-light mb-3 text-center"> <div class="card-header">Light Border</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-dark mb-3 text-center"> <div class="card-header">Dark Border</div> <div class="card-body text-dark"> <p>This is a card text paragraph with secondary color background without title.</p> <footer>Quote by <cite title="Source Title">Someone said</cite></footer> </div> </div> <div class="card border-success mb-3 text-center"> <div class="card-header">Success Border</div> <div class="card-body text-success"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card border-info mb-3 text-center"> <div class="card-header">Info Border</div> <div class="card-body text-info"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card border-warning mb-3 text-center"> <div class="card-header">Warning Border</div> <div class="card-body text-warning"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background.</p> </div> </div> <div class="card border-danger text-center"> <div class="card-header">Danger Border</div> <div class="card-body text-danger"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background.</p> </div> </div>

Le schede di contorno avranno il seguente aspetto:

Come creare carte Bootstrap 5?

13 Bootstrap 5 layout di carte

Tutti gli esempi precedenti riguardano la creazione della carta come singolo componente. Bootstrap offre anche tre classi per creare layout di carte più adatti ai layout di blog.

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

Discuteremo queste classi di layout delle carte nel nostro prossimo tutorial.


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