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.