Bootstrap 4 carte
Carte
Una carta in Bootstrap 4 è una scatola bordata con del riempimento attorno al suo contenuto. Include opzioni per intestazioni, piè di pagina, contenuto, colori, ecc.
Giovanni Daina
Qualche testo di esempio qualche testo di esempio. John Doe è un architetto e ingegnere
Vedi ProfiloCarta Base
Una scheda di base viene creata con la .cardclasse e il contenuto all'interno della scheda ha una .card-bodyclasse:
Esempio
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Se hai familiarità con Bootstrap 3, le schede sostituiscono i vecchi pannelli, pozzi e miniature.
Intestazione e piè di pagina
La .card-headerclasse aggiunge un'intestazione alla scheda e la .card-footerclasse aggiunge un piè di pagina alla scheda:
Esempio
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Schede contestuali
Per aggiungere un colore di sfondo alla scheda, utilizzare le classi contestuali ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondarye ..bg-dark.bg-light
Esempio
Titoli, testo e collegamenti
Titolo della carta
Qualche testo di esempio. Qualche testo di esempio.
Collegamento scheda Un altro collegamentoUtilizzare .card-titleper aggiungere titoli di carte a qualsiasi elemento di intestazione. La .card-textclasse viene utilizzata per rimuovere i margini inferiori per un elemento <p> se è l'ultimo figlio (o l'unico) all'interno .card-body. La .card-linkclasse aggiunge un colore blu a qualsiasi collegamento e un effetto al passaggio del mouse.
Esempio
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Immagini delle carte
Giovanni Daina
Qualche testo di esempio qualche testo di esempio. John Doe è un architetto e ingegnere
Vedi Profilo
Aggiungi .card-img-topo .card-img-bottomad un
<img>per posizionare l'immagine in alto o in basso all'interno della scheda. Nota che abbiamo aggiunto l'immagine al di fuori di .card-bodyper coprire l'intera larghezza:
Esempio
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Collegamento allungato
Aggiungi la .stretched-linkclasse a un collegamento all'interno della scheda e renderà l'intera scheda cliccabile e passabile (la scheda fungerà da collegamento):
Giovanni Daina
Qualche testo di esempio qualche testo di esempio. John Doe è un architetto e ingegnere
Vedi ProfiloEsempio
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Sovrapposizioni di immagini delle carte
Trasforma un'immagine in uno sfondo di carta e usa .card-img-overlay
per aggiungere del testo sopra l'immagine:
Esempio
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Colonne di carte
Del testo all'interno della prima carta
Del testo all'interno della seconda carta
Del testo all'interno della terza carta
Del testo all'interno della quarta carta
Del testo all'interno della quinta carta
Qualche testo all'interno della sesta carta
La .card-columnsclasse crea una griglia di carte simile a una muratura (come Pinterest). Il layout si regolerà automaticamente man mano che inserirai più carte.
Nota: le schede vengono visualizzate verticalmente su schermi piccoli (meno di 576px):
Esempio
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
Mazzo di carte
Del testo all'interno della prima carta
Ancora un po' di testo per aumentare l'altezza
Ancora un po' di testo per aumentare l'altezza
Ancora un po' di testo per aumentare l'altezza
Del testo all'interno della seconda carta
Del testo all'interno della terza carta
Del testo all'interno della quarta carta
La .card-deckclasse crea una griglia di carte di uguale altezza e larghezza . Il layout si regolerà automaticamente man mano che inserirai più carte.
Nota: le schede vengono visualizzate verticalmente su schermi piccoli (meno di 576px):
Esempio
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
Gruppo di carte
Del testo all'interno della prima carta
Ancora un po' di testo per aumentare l'altezza
Ancora un po' di testo per aumentare l'altezza
Ancora un po' di testo per aumentare l'altezza
Del testo all'interno della seconda carta
Del testo all'interno della terza carta
Del testo all'interno della quarta carta
La .card-groupclasse è simile a .card-deck. L'unica differenza è che la .card-groupclasse rimuove i margini sinistro e destro tra ogni carta.
Nota: le schede vengono visualizzate verticalmente su schermi piccoli (meno di 576px), CON margine superiore e inferiore:
Esempio
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>