Comment utiliser Bootstrap 5 cartes
Cet article illustrera l'utilisation des cartes bootstrap en couvrant les aspects suivants:
- Comment créer une carte simple?
- Comment créer un en-tête de carte et un pied de page?
- Comment créer une carte avec du contenu?
- Comment créer une carte avec une image?
- Comment créer un bouton sur une carte?
- Comment coiffer la carte?
- Comment créer une carte avec des superpositions d'image?
- Comment créer des groupes de liste sur la carte?
- Comment créer une barre de navigation sur la carte?
Comment créer une carte simple?
Le "carte"Classe avec le"carte-corps"Est utilisé pour créer une carte simple.
Passons l'exemple pour mieux comprendre.
Exemple
Dans le fichier HTML, suivez les étapes pour créer une carte simple:
- Ajouter un "" élément et attribuez-lui une classe "récipient". Il s'agit d'un bloc de construction de base qui contient un rembourrage et un alignement sur le contenu dans un appareil spécifique.
- Ensuite, attribuez-lui une classe "carte”Utilisé pour créer une carte de base.
- Pour spécifier le contenu dans la carte, créez un div avec la classe "carte-corps«Cela contient les données nécessaires de la carte:
Carte Linuxhint
Une carte dans Bootstrap 5 est une boîte avec un rembourrage autour de son texte et une bordure.
Sortir
Comment créer un en-tête de carte et un pied de page?
Le "cadré" et le "fineur de carte«Les classes sont utilisées pour définir l'en-tête de la carte et le pied de page. Faire cela:
- Définissez l'élément avec la classe "récipient" et "m-4".
- Ajustez la div avec la classe "carte".
- Définissez la carte de la carte en utilisant la classe "cadré".
- Les informations sur la carte sont placées à l'aide du «fineur de carte«Classe sur le pied de page de la carte:
Bootstrap 5 Carte
École Linuxhint
Une carte dans Bootstrap 5 est une boîte avec une bordure et un rembourrage autour du texte.
Contact: xxx-xxx-xxxx
Sortir
Comment créer une carte avec du contenu?
Vous pouvez ajouter du contenu à la carte en utilisant le "carte-corps»Conteneur de contenu extensible. Les classes mentionnées ci-dessous doivent être incluses dans cette classe:
- "card»Ajuste le titre sur la carte.
- "texte de carte»Décrit le texte avec les propriétés de style sur la page.
- "liaison de carte»Associa un lien d'une autre source sur la page:
Carte Linuxhint
Linuxhint est un excellent site Web de tutoriel.
Leçon d'introduction
Visitez notre site Internet
Sortir
Comment créer une carte avec une image?
La façon la plus populaire de concevoir une carte est d'ajouter une image à la carte. Pour ce faire, le bootstrap "carte-IMG«La classe est utilisée comme suit:
École Linuxhint
Pour obtenir plus d'informations, visitez notre site officiel.
Cliquez ici
Contact: xxx-xxx-xxxx
Sortir
Comment créer un bouton sur une carte?
L'élément bouton peut être ajouté à la carte. À cette fin, implémentez le «btn”Classe dans l'élément. Le "btn-primaire»Indique l'action principale dans un groupe de boutons et y ajoute un poids visuel supplémentaire:
École Linuxhint
Pour obtenir plus d'informations, visitez notre site officiel.
Cliquez ici
Contact: xxx-xxx-xxxx
Sortir
Comment coiffer la carte?
Pour styliser le conteneur des cartes bootstrap, de nombreuses classes peuvent être utilisées comme ceci:
Linuxhint
Titre de la carte primaire
Nous fournissons des articles et des conférences vidéo au monde.
Linuxhint
Titre de la carte primaire
Nous fournissons des articles et des conférences vidéo au monde.
Sortir
Comment créer une carte avec des superpositions d'image?
Le "card-iMg-Orlay”La classe ajuste l'image en arrière-plan. Pour l'utiliser, tout d'abord, définissez l'image de la carte en utilisant le «" étiqueter. De plus, la largeur de l'image est définie comme «100%»:
Département de vidéo
Nous fournissons des vidéos de haute qualité sur des sujets informatiques.
Plus d'informations
Sortir
Comment créer des groupes de liste sur la carte?
Pour identifier les éléments de groupe sur une carte, implémentez le div "récipient" classe. Ensuite, ajoutez un conteneur "div" avec la classe "carte".
Pour créer une liste, appliquez le «" et "»Tags avec des classes appropriées:
- Html
- Amorcer
- Javascrip
Voici la description des classes de bootstrap ci-dessus:
- Pour créer des groupes de liste, le bootstrap "groupe de liste"La classe peut être appliquée. Il aide à spécifier une liste de contenu pour la carte.
- En ajoutant le «lister-group-flush», Vous pouvez afficher les éléments de groupe de liste de bords à bord dans un conteneur parent, je.e., cartes. Pour ce faire, il supprime les coins et les frontières arrondies.
- Le "lister-group-items»Définit les éléments de la liste.
Sortir
Comment créer une barre de navigation sur la carte?
Vous pouvez également ajouter une barre de navigation aux cartes. Plus précisément, une barre de navigation appropriée et bien alignée est créée à l'aide de plusieurs classes:
Carte de santé
Suivez le guide de votre inscription
Inscription
Ici:
- "Nav Nav-tabs»La classe est utilisée pour créer des onglets de navigation.
- "card-tabs-tabs"La classe aide à coiffer les onglets dans l'en-tête de la carte.
- "Naval-Item»Fournit un style aux articles de navigation.
- "liaison de navigation»Est utilisé pour établir le lien des autres blocs de navigation.
Sortir
Il s'agissait d'utiliser les classes bootstrap pour créer des cartes bien formulées.
Conclusion
Bootstrap 5 utilise de nombreuses classes pour styliser et créer les cartes. Ces classes aident à ajuster les informations dans un format structuré. Certaines classes sont «card","texte de carte","cadré","fineur de carte", et beaucoup plus. Ces classes offrent des fonctionnalités, telles que la spécification du titre, du texte, de l'en-tête et du pied de page de carte. Cet article a démontré comment utiliser Bootstrap 5 cartes avec différentes fonctionnalités.