Card
Larghezza della Card
Il div con classe card è responsivo, ha l’attributo width impostato a 100%, quindi tende ad occupare tutta la larghezza disponibile.
Negli esempi qui sotto, dove una card è mostrata singolarmente, per motivi puramente estetici è stata impostata una larghezza fissa in pixel. Normalmente invece NON DEVE MAI ESSERE IMPOSTATA.
Una card va inserita in una griglia e saranno le colonne di questa a limitarne le dimensioni, oppure in un layout come quelli mostrati nella seconda parte di questa pagina, che determineranno dimensioni e modalità con cui le card inserite in essi appariranno sullo schermo.
Tipi di card
Sono mostrati alcuni tipi di card dei molti ottenibili combinando le varie parti predisposte per costruirle:
- body
- title
- immagine
- liste
- header
- footer
Naturalmente è possibile ottenere ulteriori tipi di card con combinazioni diverse di questi elementi, ma in ogni caso dovrebbero esserci sempre un titolo, un paragrafo di testo <p>...</p>, e almeno un link o un bottone.
Bootstrap 4
Le Card di Bootstrap Regione Lombardia sono graficamente più simili a quelle di Bootstrap 4 che a quelle di Boostrap Italia.
Per la documentazione tecnica è quindi meglio fare riferimento principalmente alla documentazione originale di Bootstrap 4 (in inglese) e solo secondariamente a quella di Bootstrap Italia.
Semplice
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
</div>
</div>con Foto
L’immagine è inserita in due div annidati con classi: img-responsive-wrapper, img-responsive e un tag figure con classe img-wrapper.
Ciò, oltre a rendere l’immagine responsiva, la ritaglia in formato 16/9, cercando di centrarla, qualora, come in questo caso, l’originale sia in formato 4/3.
Naturalmente ritaglio e centratura automatici funzionano entro certi limiti. Qualora la resa non sia adeguata sarà opportuno ritagliare la foto manualmente.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link<div class="card">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<figure class="img-wrapper">
<img src="/bootstrap-lombardia/dist/assets/img/bike-sharing.jpg" title="bike sharing" alt="parcheggio bike sharing a Milano">
</figure>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
</div>
</div>con Link-list
Qui l’immagine è semplicemente all’interno del div della card, senza nessun wrapper, ma il tag img ha classe card-im-top.
Ciò rende l’immagine responsiva ma la lascia nelle proporzioni originali.
La differenza risulta particolarmente evidente nell’ultimo esempio del layout card-deck, in fondo a questa pagina.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<img class="card-img-top" src="/bootstrap-lombardia/dist/assets/img/bike-sharing.jpg" title="bike sharing" alt="parcheggio bike sharing a Milano">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><a href="#">Cras justo odio</a></li>
<li class="list-group-item"><a href="#">Dapibus ac facilisis in</a></li>
<li class="list-group-item"><a href="#">Vestibulum at eros</a></li>
</ul>
</div>con Bottone
<div class="card">
<div class="card-body">
<div class="category-top">
<a class="category" href="#">Category</a>
</div>
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Primary</a>
</div>
</div>con Header
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Another link<div class="card">
<div class="card-header">
<a class="category" href="#">Category</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#">Another link</a>
</div>
</div>Layout
card-columns
Le card inserite in un div con classe card-columns vengono disposte automaticamente distribuendole su tre colonne in modo da ottimizzare lo spazio disponibile.
La prima card presente nel div contenitore è posta nella colonna di sinistra, la successiva al di sotto di questa oppure nella colonna successiva in modo da ottenere un rettangolo il meno alto possibile.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Another link<div class="card-columns">
include esempi-lombardia/card_semplice.html
include esempi-lombardia/card_con_foto.html
include esempi-lombardia/card_link-list.html
include esempi-lombardia/card_bottone.html
include esempi-lombardia/card_header.html
</div>card-deck
Questo layout rende le card al suo interno, tutte della stessa altezza.
E’ bene inserire 2 o 3 card in ognuno, e possibilmente di tipologia omogenea, perché lo spazio occupato non viene ottimizzato come capita per il card-columns.
esempio con card testuali
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card linkCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Another link<div class="card-deck">
include esempi-lombardia/card_semplice.html
include esempi-lombardia/card_bottone.html
include esempi-lombardia/card_header.html
</div>esempio con card con immagine
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card-deck">
include esempi-lombardia/card_con_foto.html
include esempi-lombardia/card_link-list.html
</div>card-deck su più righe
In questo esempio sono stati usati due card-deck consecutivi e la classe my-3 per distanziare le card verticalmente.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card linkCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Another link
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card-deck my-3">
include esempi-lombardia/card_semplice.html
include esempi-lombardia/card_bottone.html
include esempi-lombardia/card_header.html
</div>
<div class="card-deck my-3">
include esempi-lombardia/card_con_foto.html
include esempi-lombardia/card_link-list.html
</div>Riferimenti
Il contenuto di questa pagina si riferisce ai seguenti punti della Documentazione di Bootstrap 4: