Comment coiffer les cartes dans Bootstrap 5 | Expliqué
Une carte dans Bootstrap 5 est appelée un conteneur ou une boîte qui enveloppe le contenu à l'intérieur. Il peut être composé d'un en-tête, d'un contenu et d'un pied de page. Il peut être stylé en y ajoutant des couleurs ou des images. Ces cartes bootstrap sont considérées comme un remplacement des anciens panneaux, miniatures ou puits. Comment ces cartes sont créées et stylisées de diverses manières ont été discutées dans cet article.
Comment créer une carte à l'aide de bootstrap 5
Afin de créer une carte simple, faites un conteneur div et affectez-le .carte classe et nid un div à l'intérieur du premier div et attribuez-le .carte-corps classe et placez le contenu de la carte à l'intérieur de cette div.
Html
Ceci est une carte simple
Le code indiqué ci-dessus créera une carte très simple.
Sortir
La sortie affiche une carte de base.
Comment ajouter un en-tête et un pied de page dans une carte
Comme mentionné déjà, une carte peut être composée d'une en-tête et d'un pied de page. Par conséquent, pour faire en sorte que ces entités utilisent le .lecteur de carte et le .fineur de carte Des classes.
Html
C'est en-tête de carte
C'est le corps de la carte
C'est le pied de page de carte
Dans le code ci-dessus, pour faire l'en-tête de la carte, nous attribuons un conteneur div le .Classe de barre de carte, puis pour placer du contenu, nous faisons le corps de la carte en utilisant le .classe de cartes-corps, et enfin pour générer un pied de page .La classe de foot de carte est utilisée.
Sortir
La carte indiquée ci-dessus a un en-tête, un corps et un pied de page.
Comment créer des cartes colorées
Pour fournir des couleurs d'arrière-plan aux cartes, utilisez simplement toutes les classes de couleurs d'arrière-plan qui sont .bg-primaire, .bg-secondaire, .bg-danger, .bg, .bg-succès, .bg-info, .bg, .Bg-Light, .Bg-Dark.
Html
Carte 1
Carte 2
Carte 3
Carte 4
Carte 5
Il y a un total de 5 cartes générées dans le code ci-dessus et chacune a reçu une couleur différente. Notez que les classes de couleur d'arrière-plan sont affectées à la div qui a le .classe de cartes.
Sortir
Des cartes colorées ont été générées avec succès.
Comment ajouter le titre, le texte et les liens vers une carte
Si vous gérez des cartes qui transmettent certaines informations et que vous souhaitez ajouter un titre, un texte et des liens vers cette carte, suivez le code fourni ci-dessous.
Html
Titre
Du texte.
Lien
Pour ajouter un titre le .classe de card a été affecté à un élément de cap (tout élément de cap H1-H6 peut être utilisé), pour inclure un texte le .Classe de texte de carte a été affecté à un
un élément et un lien ont également été ajoutés et ont été renvoyés avec une couleur bleue en utilisant le .classe de liaison de cartes.
Sortir
Une carte informative a été générée avec succès.
Comment ajouter des images à une carte
Si vous souhaitez ajouter des images à vos cartes avec du texte et des liens, suivez l'exemple ci-dessous.
Html
Mike Jason
Salut. Découvrez mon profil.
Visiter le profil
Pour placer l'image à l'intérieur de la carte, utilisez le .Classe Card-IMG-TOP À l'intérieur de la balise et puis dans la section précédente, nous faisons un corps de carte et plaçons un titre, un texte et un lien à l'intérieur du corps de la carte. Notez que l'image a été placée à l'extérieur du corps de la carte pour le faire s'étendre sur toute la largeur qui a été fournie au conteneur div ayant le cours .carte.
Sortir
Cependant, si vous souhaitez placer votre titre, texte et lien au-dessus de l'image, utilisez le .Cours de carte-IMG. Comme nous l'avons montré dans l'extrait de code ci-dessous.
Html
Mike Jason
Salut. Découvrez mon profil.
Visiter le profil
Le code ci-dessus générera une carte avec l'image placée en bas et le titre, le texte et le lien placé au-dessus de cette image.
Sortir
Le .La classe Card-IMG-Bottom fonctionne correctement.
Comment créer une superposition d'image de la carte
En plus de placer votre contenu au-dessus et en dessous de l'image, vous pouvez également le placer sur l'image et cette procédure est appelée superposition d'image de carte.
Html
Mike Jason
Salut. Découvrez mon profil.
Visiter le profil
Le code est le même que dans les sections précédentes avec une légère différence qui placer le contenu sur l'image que nous utilisons .card-iMg-Orlay classe au lieu du .classe de cartes-corps.
Sortir
Une superposition d'image de carte a été créée avec succès.
Conclusion
Dans le but de coiffer une carte, vous pouvez ajouter un en-tête et un pied de page .lecteur de carte, et .fineur de carte classe, tandis que toutes les classes de couleurs d'arrière-plan disponibles peuvent être utilisées pour créer des cartes colorées. De plus, utilisez le .card, .texte de carte, .Cours de liaison de cartes Pour ajouter un titre, un texte et des liens vers une carte. Pour rendre davantage vos cartes intéressantes, vous pouvez ajouter des images en utilisant le .card-img-top, ou .Cours de cartes-IMG-Bottom. Enfin, vous pouvez également créer une superposition d'image de carte en utilisant le .Classe Card-IMG-Orlay.