Le card di Bootstrap sono uno strumento essenziale per organizzare e presentare contenuti nei progetti web. Forniscono un modo semplice ma versatile per creare layout visualmente accattivanti che si adattano senza problemi a diversi dispositivi. Alla fine di questo articolo, saprai come utilizzare efficacemente i componenti delle card di Bootstrap nei tuoi progetti.
Perché scegliere Bootstrap?
Bootstrap rimane uno dei framework più popolari per la creazione di layout web reattivi e ottimizzati per i dispositivi mobili. I suoi principali vantaggi includono:
- Design reattivo rapido e semplice: è sufficiente una conoscenza di base di HTML e CSS per creare layout sorprendenti.
- Approccio “Mobile-First”: Bootstrap mette al primo posto la reattività mobile fin dall’inizio.
- Compatibilità con i browser: funziona perfettamente su tutti i principali browser.
- Sistema di griglia basato su Flexbox: semplifica compiti di allineamento e spaziatura.
- Componenti estesi: una vasta gamma di elementi riutilizzabili come pulsanti, modali e card.
La versione più recente di Bootstrap introduce miglioramenti significativi, come il supporto per Flexbox e il versatile componente card, che sostituisce componenti più vecchi come pannelli e miniature.
Concetti chiave
Le card di Bootstrap sono strumenti versatili per creare layout organizzati e reattivi. Ti permettono di visualizzare vari tipi di contenuti come testo, immagini e multimedia all’interno di un elegante contenitore. Di seguito sono riportate alcune caratteristiche chiave che li rendono indispensabili per gli sviluppatori:
- Facilità d’Uso: Puoi creare rapidamente una card combinando elementi come div class=”card-body”, che definisce l’area del contenuto, e p class=”card-text”, dove risiedono le informazioni testuali.
- Supporto per Diversi Tipi di Contenuto: Aggiungi un titolo della card, immagini o gruppi di liste per strutturare efficacemente il tuo contenuto.
- Reattività: Utilizzando la griglia e i breakpoint di Bootstrap, le card possono adattarsi a qualsiasi dimensione del dispositivo, dal mobile al desktop.
- Design Personalizzabile: Le classi di utilità ti consentono di personalizzare l’aspetto, inclusi colori, bordi e allineamento del testo.
- Layout Avanzati: Funzionalità come gruppi di card, decks e layout in muratura consentono un allineamento e un’organizzazione senza soluzione di continuità.
Cos’è il Componente Card di Bootstrap?
Bootstrap introduce un componente UI versatile e moderno chiamato card, che funge da contenitore flessibile e elegante per visualizzare vari tipi di contenuti. Con uno stile predefinito minimo, le card di Bootstrap possono essere facilmente migliorate utilizzando la sua ampia gamma di classi di utilità.
Questo componente è costruito su Flexbox, consentendo un allineamento e uno spazio precisi. Gli sviluppatori possono utilizzare le utility di spaziatura di Bootstrap per controllare efficacemente margini e padding.
Le schede possono comodamente ospitare diversi tipi di contenuti come titolo, sottotitolo, testo del corpo e immagini, ecc., e sezioni opzionali di intestazione e piè di pagina. Puoi anche includere diverse sezioni (blocchi di schede) per costruire diversi tipi di schede a seconda del tuo utilizzo.
Classi Chiave delle Schede di Bootstrap
Sotto sono elencate le classi utility chiave delle schede di Bootstrap, insieme al loro scopo:
- card: La classe contenitore principale che definisce il componente scheda.
- card-body: Crea l’area principale dei contenuti all’interno della scheda.
- card-title: Stile del titolo della scheda, solitamente utilizzato con tag di intestazione come <h5>.
- card-text: Utilizzato per contenuti testuali standard all’interno della scheda.
- card-header: Aggiunge una sezione di intestazione stilizzata nella parte superiore della scheda.
- card-footer: Aggiunge una sezione di piè di pagina stilizzata nella parte inferiore della scheda.
- card-img-top: Posiziona un’immagine nella parte superiore della scheda.
- card-img-bottom: Posiziona un’immagine nella parte inferiore della scheda.
- list-group: Crea un gruppo di lista all’interno della scheda.
- list-group-item: Stile degli elementi individuali nel gruppo di lista.
- card-group: Raggruppa più carte insieme con larghezza e altezza uguali.
- card-deck: Allinea più carte con spaziatura, deprecato in Bootstrap 5.
- text-*: Classi utility per la stilizzazione del colore del testo (ad es., text-primary, text-success).
- bg-*: Classi utility per la stilizzazione del colore di sfondo (ad es., bg-light, bg-dark).
Questa panoramica concisa elenca le classi essenziali utilizzate per costruire e personalizzare le carte Bootstrap.
Come includere Bootstrap nel tuo progetto
Puoi iniziare a usare Bootstrap nel tuo progetto senza sforzo includendolo da una Content Delivery Network (CDN) o scaricando i file necessari da getbootstrap.com
Per questo esempio, dimostreremo come impostare una semplice pagina HTML utilizzando una CDN per includere il componente carta di Bootstrap. Questo metodo ti consente di creare e stilizzare rapidamente le carte senza dover configurare ulteriormente.
Segui i passaggi seguenti per creare il tuo file index.html e includere Bootstrap 5.3.3:
<!doctype html>
<html lang="en">
<head>
<!-- Tag meta richiesti -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Bootstrap Card Example</title>
</head>
<body>
<div class="container mt-5">
<div class="card" style="width: 18rem;">
<div class="card-header bg-primary text-white">
Example Card Header
</div>
<div class="card-body">
<h5 class="card-title">Example Card Title</h5>
<p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the
header, title, and text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- Bootstrap Bundle con Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>Abbiamo incluso i file di Bootstrap tramite un CDN, garantendo che la versione più recente del framework sia sempre disponibile. È stata aggiunta una divisione del contenitore per servire da base per il tuo contenuto, permettendoti di iniziare a costruire con il componente di scheda di Bootstrap immediatamente.
Per ulteriori dettagli, puoi esplorare la documentazione del modello di avvio.
Creazione di Card di Bootstrap di Base
Per creare una semplice card, segui questi passaggi:
- Utilizza la classe .card con un tag <div> per creare il contenitore esterno.
- Aggiungi la classe .card-body a un tag interno <div> per definire il corpo della card.
- Utilizza le classi .card-title e .card-subtitle con tag di intestazione (<h5> e <h6>) per aggiungere il titolo e il sottotitolo della card.
- Utilizza la classe .card-text con tag <p> per includere contenuti testuali.
- Utilizza la classe .card-img-top con il tag <img> per aggiungere un’immagine nella parte superiore della card.
Questi sono i blocchi di costruzione fondamentali di un layout di card di base. Ecco un esempio:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Questo codice genera una card con un’immagine, un titolo, un sottotitolo, un testo e un pulsante, e si adatterà alla larghezza del contenitore genitore a meno che non sia specificato diversamente utilizzando la proprietà style=”width: 30rem;”.
Questa è una schermata del risultato:
Schede Orizzontali in Bootstrap
Le schede orizzontali consentono di visualizzare contenuti in un layout affiancato, rendendole ideali per design compatti e organizzati. Puoi crearle utilizzando le classi della griglia per un comportamento reattivo, assicurando che la scheda abbia un aspetto fantastico su tutti i dispositivi.
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a card with text beside an image, perfect for showcasing content
side-by-side.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Questo è uno screenshot del risultato:
Gruppi di Elenco in Schede Bootstrap
Bootstrap consente di migliorare le tue schede includendo gruppi di elenco, rendendo più facile visualizzare contenuti strutturati e organizzati. Le classi list-group e list-group-flush si integrano perfettamente all’interno delle schede, consentendo agli sviluppatori di creare elenchi visivamente accattivanti.
Ecco come puoi creare una scheda con un gruppo di elenco flush:
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
Migliorare le Funzionalità delle Schede
Aggiungere Intestazioni e Piè di Pagina
Puoi migliorare le tue schede includendo intestazioni e piè di pagina con le classi .card-header e .card-footer. Ecco un esempio:
<div class="row">
<div class="col-sm-3">
<div class="card">
<div class="card-header">
This is a header
</div>
<img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
<div class="card-footer">
This is a footer
</div>
</div>
</div>
</div> Questo è lo screenshot del risultato:
Questo layout aggiunge più contesto alla scheda con un’intestazione e un piè di pagina stilizzati.
Sovrapporre Testo alle Immagini
Utilizza .card-img-overlay per sovrapporre contenuti sopra l’immagine. Semplicemente sostituendo la classe card-body con la classe card-img-overlay, possiamo utilizzare l’immagine come sovrapposizione:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Questo è uno screenshot del risultato:
Aggiungere Cappelli Immagine alla Scheda
Aggiungi immagini nella parte superiore o inferiore della carta utilizzando .card-img-top o .card-img-bottom.
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<p class="card-text">This card has an image cap at both the top and bottom.</p>
</div>
<img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom">
</div>Questo è uno screenshot del risultato:
Le immagini in alto e in basso della carta sono chiamate image caps.
Design Responsivo con le Card di Bootstrap
Il design responsivo garantisce che le tue card siano visualizzate correttamente su tutti i dispositivi. Utilizza il sistema grid di Bootstrap per controllare il layout.
Codice di Esempio
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Questo è uno screenshot del risultato:
Modifica dell’Altezza e della Larghezza della Card di Bootstrap
Per impostare una larghezza specifica per una card, puoi utilizzare l’attributo style o le classi utility di Bootstrap. Ecco un esempio:
<div class="card" style="width: 10rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a simple card example with a custom width.</p>
</div>
</div>Questo è uno screenshot del risultato:
La larghezza di questa card è limitata a 10rem, che può essere regolata in base alle esigenze del tuo design.
Normalmente, l’altezza della card verrà regolata per adattarsi verticalmente al contenuto della card, ma possiamo anche controllarla utilizzando CSS personalizzato (ad esempio, style=”height: 10rem;”) o le utility di dimensionamento di Bootstrap (ad esempio, <div class=”card h-200″>).
Si noti che l’ultima versione di Bootstrap ha adottato unità rem invece delle unità px perché rem è un’unità di misura scalabile – quindi funziona meglio con le impostazioni dell’utente, rendendo il testo molto più accessibile. Il risultato è che tutti gli elementi nella pagina si adatteranno alla dimensione dello schermo.
Puoi scoprire di più sulle nuove funzionalità di Bootstrap nell’articolo di SitePoint ” Bootstrap: Super Smart Features to Win You Over“.
Utilizzo del Sistema di Griglie per Controllare la Larghezza
Un’altra opzione per controllare la larghezza del componente card di Bootstrap è utilizzare il sistema di griglie di Bootstrap (righe e colonne):
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example card using the grid system.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Another Card</h5>
<p class="card-text">This card sits next to the first one.</p>
</div>
</div>
</div>
</div>Questa è una schermata del risultato:
In questo esempio, due card vengono visualizzate affiancate, ognuna occupando quattro colonne (col-md-4) su schermi medi e più grandi.
Stili delle Card
Bootstrap fornisce varie opzioni per personalizzare le card, inclusi colori di sfondo, bordi e stili di testo.
Colori di Sfondo e Testo
È possibile cambiare i colori di sfondo e testo di una card utilizzando classi di utilità come .bg-primary o .text-white.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body">
<h5 class="card-title">Primary Card Title</h5>
<p class="card-text">Quick text to demonstrate card styling.</p>
</div>
</div>Colori dei Bordi
Usa .border-{color} classi per personalizzare il colore del bordo delle tue schede. Il testo all’interno della scheda può anche essere stilizzato con .text-{color}.
<div class="card border-success mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-success">
<h5 class="card-title">Success Card Title</h5>
<p class="card-text">Simple content styled with a border.</p>
</div>
</div>Intestazioni e piedi di pagina trasparenti
Rimuovi il colore di sfondo da intestazioni e piedi di pagina utilizzando .bg-transparent e personalizza i loro bordi.
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-info">Header</div>
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-info">
<h5 class="card-title">Info Card Title</h5>
<p class="card-text">Example content inside a card.</p>
</div>
<div class="card-footer bg-transparent border-info">Footer</div>
</div>Mixare sfondi e bordi
Combina le utility di sfondo e bordo per uno stile unico.
<div class="card bg-light border-dark mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-dark">
<h5 class="card-title">Mixed Style Card</h5>
<p class="card-text">Custom card combining background and border.</p>
</div>
</div>Ecco il risultato che mostra quattro diversi stili di schede in un layout a riga singola:
Bootstrap ti consente di creare schede con diversi stili di intestazione
- ‘header primary card title’ per le sezioni principali
- ‘header light card title’ per design sottili
- ‘header secondary card title’ per schede con testo di supporto.
- ‘header dark card title’ per un aspetto audace
- ‘header success card title’ per messaggi positivi
- ‘header danger card title’ per avvisi.
Con queste versatili opzioni di stile per le schede, puoi anche creare design unici come “header warning card title”, “header info card title” per enfatizzare informazioni critiche o attirare l’attenzione su dettagli specifici in modo fluido.
Aggiungere navigazione
Un’altra bella funzionalità del componente scheda di Bootstrap è la possibilità di aggiungere modelli di navigazione avanzati alla sezione intestazione come schede e pillole di navigazione.
Aggiungere schede all’intestazione della scheda
Per includere le schede nell’intestazione della carta, utilizza le classi .nav-tabs e .card-header-tabs su un elenco non ordinato (
- ). Ecco un esempio:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a tabbed navigation element in its header.</p>
</div>
</div>Questa è la schermata del risultato:
Aggiunta di Pillole all’Intestazione della Carta
Allo stesso modo, possiamo aggiungere pillole di navigazione semplicemente sostituendo .nav-tabs con .nav-pills e .card-header-tabs con .card-header-pill sull’elemento <ul>:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-pills card-header-pill">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a pill-style navigation element in its header.</p>
</div>
</div>Questa è la schermata del risultato:
Puoi trovare ulteriori informazioni a riguardo nella documentazione sui componenti di navigazione di Bootstrap
Aggiunta di Collegamenti al Componente Card di Bootstrap
Possiamo rapidamente aggiungere collegamenti all’interno delle carte utilizzando l’elemento <a> con la classe .card-link :
<div class="card">
<div class="card-body">
<h3 class="card-title">Adding Links</h3>
<p class="card-text">These are simple links</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
<div class="card-footer">
This is a footer
</div>
</div>Questa è la schermata del risultato:
Allineamento e Trasformazione del Testo nei Componenti Card di Bootstrap
Bootstrap fornisce classi utility per il testo per allineare e trasformare il testo all’interno di un componente card. Per l’allineamento del testo, puoi utilizzare le seguenti classi:
- .text-start per l’allineamento del testo a sinistra nella card
- .text-end per l’allineamento del testo a destra nella card
- .text-center per l’allineamento del testo al centro nella card
- .text-justify per l’allineamento giustificato del testo nella card (si applica alle versioni precedenti, deprecato in Bootstrap 5)
- Utilizzare .text-nowrap per evitare il testo di andare a capo
Puoi anche trasformare il testo utilizzando le seguenti classi:
- .text-lowercase per trasformare il testo in minuscolo
- .text-uppercase per trasformare il testo in maiuscolo
- .text-capitalize per capitalizzare la prima lettera di ogni parola
Personalizzare i colori di sfondo, testo e bordo del componente Card di Bootstrap
Puoi personalizzare lo sfondo, il testo e il bordo di una card di Bootstrap utilizzando classi di utilità per testo e sfondo. Ecco alcuni esempi:
- Colori del Testo: Utilizza .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark o .text-white per cambiare il colore del testo.
- Colori dello Sfondo: Utilizza .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark o .bg-white per cambiare il colore dello sfondo.
- Colori del Bordo: Utilizza .border-primary, .border-success, .border-danger, .border-warning, .border-info, .border-light, .border-dark o .border-white per stilare il colore del bordo.
La demo di CodePen qui sotto mostra tutti i diversi tipi di card che possiamo creare con Bootstrap. Sentiti libero di sperimentarci da solo:
Creare Layout Avanzati Con il Componente Card di Bootstrap
La card di Bootstrap è un componente UI versatile ampiamente utilizzato nei layout web moderni per visualizzare tipi di contenuto misto (come testo e immagini) come entità singola o collezioni raggruppate.
Le carte sono particolarmente utili per il design responsivo e sono comunemente implementate in layout come il layout a Masonry, noto anche come layout simile a Pinterest.
Le carte possono essere utilizzate per creare layout per gallerie di immagini, post di blog o prodotti di e-commerce. Piattaforme importanti come Google e Facebook sfruttano ampiamente le carte per organizzare e visualizzare contenuti sulle loro applicazioni web.
In passato, la creazione di layout avanzati di questo tipo richiedeva una profonda conoscenza di CSS e HTML. Tuttavia, con le ultime funzionalità di Bootstrap, gli sviluppatori possono creare layout basati su carte in modo responsivo e visivamente accattivante senza sforzo.
Classi come .card-group, .card-deck e .card-columns semplificano il processo di organizzazione delle carte con stile e allineamento coerenti.
Raggruppamento/annidamento delle carte
Gruppi di carte in Bootstrap sono un modo efficiente per visualizzare più componenti di carte come un’entità singola, unita con larghezza e altezza uniformi.
Questo layout è ottenuto utilizzando la proprietà display: flex;, garantendo che tutte le carte si allineino perfettamente. È particolarmente utile per il design responsivo e i layout web moderni dove le dimensioni coerenti delle carte sono essenziali.
Per creare un gruppo di carte, utilizzare la classe .card-group come wrapper div contenente singole carte.
Ecco un esempio che mostra un gruppo di tre carte:
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top">
<div class="card-img-overlay">
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 1</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">This is an example of a grouped card.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 2</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">Grouped cards ensure uniform styling.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 3</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">They are responsive and visually appealing.</p>
</div>
</div>
</div>Questa è una schermata del risultato:
Come si può vedere, le tre carte sono collegate e hanno la stessa larghezza e altezza.
Mazzi di carte
Nelle versioni precedenti di Bootstrap, .card-deck veniva utilizzato per creare layout di carte in cui le carte avevano la stessa larghezza e altezza ma non erano collegate tra loro. Tuttavia, in Bootstrap 5, viene consigliato di utilizzare il sistema grid a tale scopo. Questo approccio offre maggiore flessibilità e reattività.
Per ottenere un layout simile, utilizza la classe .row con .col per controllare lo spaziatura e allineamento delle carte. Ecco un esempio:
<div class="row row-cols-1 row-cols-md-3 g-4">
Come possiamo vedere, le carte sono delle stesse dimensioni con un margine tra loro.
Colonne di carte
Nelle versioni precedenti di Bootstrap, la classe .card-columns veniva utilizzata per creare un layout simile a quello di Masonry in cui le carte venivano aggiunte dall’alto in basso e da sinistra a destra. Tuttavia, in Bootstrap 5, questa funzionalità è stata rimossa.
Per ottenere un layout simile, puoi utilizzare il sistema grid in combinazione con il layout Masonry in CSS o un plugin JavaScript come Masonry.js per comportamenti più complessi.
Ecco come creare un layout di stile Masonry utilizzando il sistema grid e CSS:
Ottimizzazione delle prestazioni
Un’efficienza delle prestazioni è cruciale per creare carte Bootstrap che si caricano rapidamente e si adattano in modo fluido. Ecco tecniche pratiche per migliorare le prestazioni durante l’integrazione di componenti di carte Bootstrap come div con classe card-body e h5 con classe card-title.
Caricamento pigro delle immagini
Il lazy loading ritarda il caricamento delle immagini fino a quando non sono visibili nel viewport, ottimizzando la velocità della pagina. Utilizzare l’attributo loading=”lazy” con card img top per una soluzione efficiente.
<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">Ottimizzare le Dimensioni delle Immagini
Ridimensionare le immagini per adattarle alle dimensioni del contenitore, garantendo tempi di caricamento più veloci. Utilizzare img-fluid con div class card img per ridimensionare automaticamente le immagini.
<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">Questo assicura che la card img top si adatti perfettamente, indipendentemente dalla larghezza dell’elemento genitore.
Minificare CSS e JavaScript
Minificare stili e script per ridurre le dimensioni dei file. Combinare più elementi div class card header e ridurre al minimo CSS personalizzato per un rendering più veloce.
Esempio Ottimizzato
anziché applicare stili ripetitivi o personalizzati come questo:
<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
<div class="card-body">
<h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5>
<p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p>
</div>
</div>Utilizzare le classi di utilità di Bootstrap per una struttura più pulita e facilmente mantenibile:
<div class="card border-primary text-center p-3">
<div class="card-body">
<h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5>
<p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p>
</div>
</div>Usare SVG per le Icone
Gli SVG sono leggeri e scalabili, rendendoli ideali per le intestazioni delle card e gli elementi decorativi. Si caricano più velocemente e mantengono la nitidezza su tutti i dispositivi.
Esempio
<div class="card text-center">
<div class="card-header bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
<path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
</svg>
<h5 class="card-title">SVG Optimized Header</h5>
</div>
<div class="card-body">
<p class="card-text">SVGs provide clear visuals with minimal overhead.</p>
</div>
</div>Anteprima e Prefetch delle Risorse
Utilizzare rel=”preload” per caricare risorse critiche e rel=”prefetch” per anticipare i futuri bisogni. Questo è particolarmente utile per contenuti pesanti delle card.
Esempio
<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">Ridurre la Complessità del DOM
Evitare strutture div class card eccessivamente nidificate che possono rallentare il rendering. Semplificare i layout per ottimizzare le prestazioni.
Prima dell’ottimizzazione
<div class="card">
<div class="card-body">
<div>
<div>
<p>Nested Content</p>
</div>
</div>
</div>
</div>Dopo l’ottimizzazione
<div class="card">
<div class="card-body">
<p class="card-text">Optimized Content</p>
</div>
</div>Ottimizzare i caratteri
Caricare preventivamente i caratteri personalizzati o utilizzare i caratteri di sistema per ridurre la latenza. Un pulito corpo della carta della classe div può ulteriormente evidenziare l’appeal visivo delle tue carte.
Esempio
<div class="card">
<div class="card-body" style="font-family: 'Roboto', sans-serif;">
<h5 class="card-title">Optimized Font</h5>
<p class="card-text">Preloading ensures faster rendering for card content.</p>
</div>
</div>Conclusione
Il componente della carta Bootstrap è un’aggiunta potente al framework Bootstrap, che consente agli sviluppatori di creare pagine web in stile moderno senza approfondire eccessivamente il funzionamento del CSS. Puoi aggiungere layout a carte per rappresentare gallerie di immagini, widget della dashboard e visualizzare post di blog o prodotti per un sito web di e-commerce aggiungendo classi CSS.
Come risultato delle nuove funzionalità e componenti, Bootstrap continua ad essere un potente framework CSS disponibile per tutti, in particolare per gli sviluppatori che devono creare i propri layout reattivi e in stile moderno ma non hanno abbastanza tempo e budget o la conoscenza approfondita del CSS necessaria per produrre codice personalizzato.
Se hai padronanza dei concetti di base di Bootstrap ma ti chiedi come portare le tue competenze di Bootstrap al livello successivo, dai un’occhiata al nostro Corso per la costruzione del tuo primo sito web con Bootstrap 4 per una rapida e divertente introduzione al potere di Bootstrap.
Domande frequenti sulla padronanza dei componenti della carta Bootstrap per il design reattivo
Cos’è un componente di carta Bootstrap?
Un componente Card di Bootstrap è un contenitore moderno e flessibile per contenuti, che consente di creare layout visivamente accattivanti per testo, immagini e multimedia. Le card fanno parte del framework di Bootstrap, progettato per aiutare gli sviluppatori a organizzare le informazioni in modo reattivo e adatto ai dispositivi mobili.
Come posso creare un componente Card di Bootstrap?
Creare un componente Card di Bootstrap è semplice. Puoi utilizzare un div con la classe card come contenitore e aggiungere contenuti come titoli, testo e immagini al suo interno. Ecco un esempio:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card body.</p>
</div>
</div>Come impostare altezza e larghezza della Card in Bootstrap?
Puoi personalizzare la larghezza e l’altezza della card di Bootstrap utilizzando stili inline o le classi di utilità di Bootstrap. Ad esempio:
<div class="card" style="width: 20rem; height: 15rem;">
<div class="card-body">
<h5 class="card-title">Custom Card</h5>
<p class="card-text">This card has a custom height and width.</p>
</div>
</div>In alternativa, puoi anche utilizzare classi di utilità di Bootstrap come w-50 o h-100 per impostare le dimensioni della card in modo reattivo.
Come ridimensionare una Card in Bootstrap?
Per ridimensionare una card, puoi utilizzare classi di utilità per le dimensioni della card come w-25, w-50 o w-75 per la larghezza, e h-auto o h-100 per l’altezza. Questo assicura che la tua card si adatti al layout senza necessità di CSS aggiuntivo. Ecco un esempio:
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Responsive Card</h5>
<p class="card-text">This card resizes based on its parent container.</p>
</div>
</div>Come posso creare un titolo per la Card in Bootstrap?
Per aggiungere un titolo alla tua card, utilizza un elemento <h5> con la classe=”card-title”. Questa classe garantisce che il titolo sia stilizzato in modo coerente con gli standard di design di Bootstrap.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card with a title.</p>
</div>
</div>Come posso utilizzare la classe card-body in Bootstrap?
La classe card-body è una classe di utilità che fornisce padding e organizza il contenuto all’interno di una card Bootstrap. È il contenitore principale per il contenuto di una card.
<div class="card">
<div class="card-body">
<h5 class="card-title">Using card-body</h5>
<p class="card-text">This is the content inside the card-body section.</p>
</div>
</div>Come risolvere il problema della dimensione della card Bootstrap?
Per risolvere la dimensione di una card, applicare una larghezza e un’altezza specifiche utilizzando stili inline o classi di utilità. Ad esempio:
<div class="card" style="width: 250px; height: 300px;">
<img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fixed Size Card</h5>
<p class="card-text">This card has a fixed size for consistency.</p>
</div>
</div>Come regolare la dimensione della card in Bootstrap?
La dimensione della card può essere regolata dinamicamente utilizzando le classi di utilità di Bootstrap o CSS Grid. Ecco un esempio di ridimensionamento responsivo della card:
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Adjustable size based on parent grid.</p>
</div>
</div>
</div>
</div>Posso personalizzare sfondi e bordi delle card Bootstrap?
Sì, Bootstrap offre estese classi di personalizzazione. Utilizzare bg-primary per i colori di sfondo e border-success per lo stile del bordo. Esempio:
<div class="card bg-info border-danger">
<div class="card-body">
<h5 class="card-title">Custom Background</h5>
<p class="card-text">This card has a custom background and border.</p>
</div>
</div>Come posso utilizzare le immagini con le card?
Bootstrap supporta le immagini all’interno delle card utilizzando card-img-top o card-img-bottom. Esempio:
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card with Image</h5>
<p class="card-text">This card includes a top image.</p>
</div>
</div>Come utilizzare la classe div card body in Bootstrap?
La classe div card body in Bootstrap definisce l’area principale del contenuto all’interno di una card. Fornisce padding e assicura uno spaziatura coerente per testo, immagini e altri elementi all’interno della card.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some text within a card body.</p>
</div>
</div>Cosa significa la classe p card text in Bootstrap?
La classe p card text in Bootstrap viene utilizzata per stilizzare il contenuto testuale all’interno del corpo della card. Applica stili tipografici predefiniti per rendere il testo pulito e professionale.
<div class="card">
<div class="card-body">
<p class="card-text">This is an example of styled text inside a Bootstrap card.</p>
</div>
</div>Come aumentare la dimensione della card in Bootstrap?
Per aumentare le dimensioni della carta, regola la larghezza e l’altezza utilizzando w-100 per la larghezza completa o specifica le dimensioni utilizzando stili. Esempio:
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Large Card</h5>
<p class="card-text">This card has an increased size for visibility.</p>
</div>
</div>Come posso rendere le carte della stessa altezza?
Utilizza .d-flex e .align-items-stretch:
<div class="row g-3">
<div class="col-md-4 d-flex">
<div class="card flex-fill">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Aligned with others.</p>
</div>
</div>
</div>Source:
https://www.sitepoint.com/bootstrap-card-component-introduction/