Come modellare le carte in bootstrap 5 | Spiegato

Una scheda in bootstrap 5 viene definita un contenitore o una scatola che avvolge il contenuto al suo interno. Può consistere in un'intestazione, dei contenuti e di un piè di pagina. Può essere disegnato aggiungendo colori o immagini ad esso. Queste carte bootstrap sono considerate in sostituzione di vecchi pannelli, miniature o pozzi. In questo articolo sono state discusse e disegnate queste carte in vari modi.

Come creare una scheda usando bootstrap 5

Allo scopo di creare una scheda semplice, crea un contenitore di div e assegnarlo il .carta classe e nidificare un div all'interno del primo div e assegnarlo il .Body di carta classe e posizionare il contenuto della scheda all'interno di questo div.

Html

Questa è una carta semplice

Il codice sopra indicato creerà una scheda molto semplice.

Produzione

L'output visualizza una scheda di base.

Come aggiungere un'intestazione e un piè di pagina in una carta

Come menzionato già, una carta può consistere in un'intestazione e un piè di pagina. Pertanto, per far usare a queste entità il .Terra di carta e il .Footer di carta classi.

Html

Questa è intestazione della carta
Questo è il corpo della carta
Questo è un piè di pagina

Nel codice sopra, per creare l'intestazione della carta stiamo assegnando un contenitore di div .Classe di Card-Header, quindi per posizionare alcuni contenuti che stiamo realizzando il corpo della carta usando il .Classe di cornici per schede, e infine per generare un piè di pagina .Viene utilizzata la classe del footer di carta.

Produzione

La carta mostrata sopra ha un'intestazione, un corpo e un piè di pagina.

Come creare carte colorate

Per fornire i colori di sfondo alle carte, utilizzare semplicemente una qualsiasi delle classi di colore di sfondo che sono .BG-PRIMARY, .BG-Secondary, .BG-Danger, .BG-Warning, .BG-SUCCESS, .BG-Info, .bg-mutata, .BG-Light, .bg-dark.

Html

Carta 1


Carta 2


Carta 3


Carta 4


Carta 5

Ci sono un totale di 5 carte generate nel codice sopra e a ciascuno è stato dato un colore diverso. Si noti che le classi di colore di sfondo sono assegnate al div che ha il .classe di carte.

Produzione

Le carte colorate sono state generate con successo.

Come aggiungere titolo, testo e collegamenti a una scheda

Se stai generando schede che trasmettono determinate informazioni e desideri aggiungere qualche titolo, testo e collegamenti a quella scheda, segui il codice fornito di seguito.

Html

Titolo

Un po 'di testo.

Collegamento

Per aggiungere un titolo il .Classe di carta per schede è stato assegnato a un elemento di intestazione (è possibile utilizzare qualsiasi elemento di intestazione H1-H6), per includere un po 'di testo il .Classe di text di scheda è stato assegnato a un

è stato anche aggiunto elemento e un link ed è stato reso hoverabile insieme a un colore blu usando il .Classe di card-link.

Produzione

Una carta informativa è stata generata con successo.

Come aggiungere immagini a una scheda

Se desideri aggiungere immagini alle tue schede insieme ad un po 'di testo e collegamenti, segui l'esempio seguente.

Html

Mike Jason

CIAO. Dai un'occhiata al mio profilo.

Visita il profilo

Per posizionare l'immagine all'interno della scheda usa il .Classe di scheda-img-top All'interno del tag e poi proprio come nella sezione precedente stiamo realizzando un corpo della carta e mettiamo un titolo, un testo e un collegamento all'interno del corpo della carta. Si noti che l'immagine è stata posizionata al di fuori del corpo della carta per renderla tutta la larghezza che è stata fornita al contenitore Div con la classe .carta.

Produzione

Tuttavia, se si desidera posizionare il titolo, il testo e il collegamento sopra l'immagine, usa il .Classe di carta-img-img-bottom. Come abbiamo mostrato nello snippet di codice di seguito.

Html

Mike Jason

CIAO. Dai un'occhiata al mio profilo.

Visita il profilo

Il codice sopra genererà una scheda con l'immagine posizionata in basso e il titolo, il testo e il collegamento posizionato sopra quell'immagine.

Produzione

IL .La classe Card-IMG-Bottom funziona correttamente.

Come creare sovrapposizioni immagine della carta

Oltre a posizionare i contenuti sopra e sotto l'immagine, puoi anche posizionarlo sull'immagine e questa procedura viene definita sovrapposizione dell'immagine della scheda.

Html

Mike Jason

CIAO. Dai un'occhiata al mio profilo.

Visita il profilo

Il codice è lo stesso delle sezioni precedenti con una leggera differenza da posizionare il contenuto sull'immagine che stiamo usando .Card-IMG-Overlay classe invece di .Classe di card-body.

Produzione

Un'overlay di immagini della carta è stata creata correttamente.

Conclusione

Ai fini della styling di una carta puoi aggiungere un'intestazione e un piè di pagina usando il .Candata di carta, e .Footer di carta classe, mentre tutte le classi di colore di sfondo disponibili possono essere utilizzate per creare carte colorate. Inoltre, usa il file .Title delle carte, .Testo di carta, .Classi di card-link Per aggiungere un titolo, un testo e un collegamento a una scheda. Per rendere ulteriormente interessanti le tue carte puoi aggiungere immagini usando il .scheda-img-top, o .Classi di scheda-img-bottom. Infine, puoi anche creare un'overlay di immagini della scheda usando il .Classe Card-IMG-Overlay.