une introduction complète –

Dans cet article, je vais vous présenter le composant de la carte Bootstrap et vous présenter ses nombreuses fonctionnalités et utilisations. À la fin de ce tutoriel, vous pourrez incorporer des cartes Bootstrap dans vos projets web pour de superbes mises en page et l'organisation du contenu des pages.

Bootstrap est le framework HTML, CSS et JavaScript le plus populaire pour créer rapidement des applications mobiles et mobiles. L'utilisation de Bootstrap offre de nombreux avantages aux développeurs, notamment:

• vous pouvez facilement et rapidement créer une mise en page réactive en ayant seulement une certaine connaissance de HTML et CSS
• la bibliothèque a été conçue pour être mobile
• il est compatible avec tous les navigateurs modernes.
• il utilise Flexbox pour son système de grille
• il fournit des tonnes de fonctionnalités et de composants.

La dernière version de Bootstrap offre de nombreux nouveaux, modernes des fonctionnalités telles que le support de Flexbox et le nouveau composant de carte qui remplace les panneaux, les miniatures et les puits des versions antérieures de la bibliothèque

Qu'est-ce que le composant de la carte Bootstrap? ootstrap introduit un nouveau composant d'interface utilisateur pour créer des cartes qui fournit un conteneur souple et élégant pour afficher le contenu. Les cartes ont un style minimal, mais vous pouvez facilement les étendre avec des options de style supplémentaires.

Ce composant est construit sur Flexbox, et vous pouvez utiliser les classes d'utilitaire d'espacement Bootstrap pour les marges et le remplissage. 19659003] Les cartes peuvent facilement accueillir différents types de contenu tels que le titre, le sous-titre, la copie de corps et les images, etc., ainsi que les sections facultatives d'en-tête et de pied de page. Vous pouvez également inclure différentes sections (blocs de cartes) pour construire différents types de cartes en fonction de votre utilisation.

Incluant Bootstrap dans votre projet

Vous pouvez très facilement commencer à utiliser Bootstrap dans votre site Web en l'incluant à partir d'un CDN ou en le téléchargeant à partir de getbootstrap.com .

Par souci d'introduction le nouveau composant de la carte Bootstrap, vous allez créer une page HTML simple avec le style Bootstrap pour montrer les éléments de base du composant de la carte. Allez-y et créez le fichier index.html dans votre dossier de projet, puis ajoutez le contenu suivant du modèle de démarrage docs :

Nous avons inclus Bootstrap fichiers et leurs dépendances (jQuery et popper.js) à partir de différents CDN, puis créé une division de conteneur.

Minimal Styling pour les cartes

Afin de créer une carte de base, nous devons –

• utiliser ] .card avec une balise div pour créer le conteneur externe
• ajouter la balise .card-body à une balise interne div pour créer le corps de la carte
• utilise les classes .card-title et card-subtitle avec les en-têtes pour ajouter le titre et le sous-titre
• classe avec

  tags pour ajouter du contenu textuel

• utiliser la classe card-img-top avec le tag pour ajouter une image t o Le haut de la carte

Voici les éléments de base qui constituent une disposition de carte complète mais de base, comme on peut le voir dans l'exemple suivant:

  
  

    
 Titre de carte 
    
 Sous-titre de carte [19659032] Ceci est un exemple de carte simple 

  
    

Ceci est une capture d'écran du résultat:

Comme on peut le voir, la carte prend toute la largeur de son conteneur div .

En changeant simplement la classe du corps de la carte avec la classe card-img-overlay on peut utiliser l'image comme une superposition :

On peut aussi utiliser la classe .card-img-bottom avec la balise pour ajouter image en bas de la carte:

  

       Ceci est un header
  
  
  

      
 Une carte avec des images du haut et du bas 

  
  

  

           Ceci est un pied de page
  

Les images du haut et du bas de la carte sont appelées images majuscules .

Contrôle de la largeur et de la hauteur du composant Bootstrap 19659011] Par défaut, les cartes prennent toute la largeur disponible dans leur conteneur parent, mais vous pouvez utiliser les classes width et max-width pour contrôler les dimensions de la carte. Donc, changeons l'exemple précédent en réduisant la largeur de la carte:

  
  

    
 Titre de la carte 
    
 Sous-titre de la carte 
    
 Exemple de carte simple 
  
    

Normalement, la hauteur de la carte sera ajustée pour s'adapter verticalement au contenu de la carte, mais nous pouvons également la contrôler en utilisant CSS personnalisé (par exemple, style = "height: 10rem ; ) ou les utilitaires de dimensionnement de Bootstrap (par exemple,

).

Veuillez noter que la dernière version de Bootstrap est passée à rem au lieu de px ] unités parce que rem est une unité de mesure évolutive – donc cela fonctionne mieux avec les paramètres de l'utilisateur, ce qui rend le texte beaucoup plus accessible . Le résultat est que tous les éléments de la page seront mis à l'échelle avec la taille de l'écran. (Vous pouvez en savoir plus sur les nouvelles fonctionnalités de Bootstrap dans l'article " Bootstrap: Super fonctionnalités intelligentes à gagner sur " de SitePoint.

Une autre option pour contrôler la largeur du composant carte Bootstrap est d'utiliser la grille de Bootstrap (lignes et colonnes):

    

        

            
            

                
 Titre de carte 
                
 Sous-titre de carte 
                
 Exemple de carte simple 
            
        
    
    

Un composant de carte Bootstrap peut éventuellement avoir un en-tête et un pied de page en ajoutant des balises heading () et div avec .card-header et . Classes de cartes-footer respectivement.

Poursuivant notre exemple, ajoutons un en-tête et un pied de page à notre composant de carte Bootstrap:

    

        

            

                 Ceci est une entête
            
            
            

                
 Titre de la carte 
                
 Sous-titre de la carte 
                
 Ceci est un exemple de Carte simple 
            
            

                     Vous êtes arrivé à la page suivante
            
        
    
  

Voici la capture d'écran du résultat:

Ajout de la navigation

Une autre caractéristique intéressante de la carte Bootstrap à la section d'en-tête comme les onglets et les pastilles de navigation.

Changeons donc notre exemple simple en ajoutant un élément de navigation à onglets à la section d'en-tête de la carte avec les .nav-tabs et . Onglet card-header-tabs sur l'étiquette

:

  

    

         Onglet 1 
    
    

         Onglet 2 
    
  
        



De la même manière, nous il est possible d'ajouter des pilules de navigation en remplaçant simplement .nav-tabs par somnifères et .imprimantes avec card-header-pill sur le tag de liste

:

  

    

         Tab 1 
    
    

         Tab 2 
    
  
        



Vous trouverez plus d'informations à ce sujet dans la documentation Bootstrap navigation components

Ajout de liens au composant de la carte Bootstrap

Nous pouvons rapidement ajouter des liens dans les cartes en utilisant le balise avec un .card-link classe:

  
 Ajout de liens 
  
 Ce sont des liens simples 
   Lien 1 
   Lien 2 


       Ceci est un footer



Alignement et transformation de texte dans des composants carte Bootstrap

Nous pouvons utiliser différentes classes Bootstrap ( utilitaires de texte ) pour aligner du texte dans un composant de carte .text-left (aligner le texte à gauche), .text-right (aligner le texte à droite), .text-center (texte au centre), .text-justify (texte de justification) et .text-nowrap (empêcher l'empaquetage du texte).

Nous pouvons également appliquer la transformation de texte avec .text-minuscule (transformer le texte en minuscules), .text-majuscule (transformer le texte en majuscules) et .text-capitaliser (transformer la première lettre de chaque mot en majuscule).

Personnalisation des couleurs d'arrière-plan, de premier plan et de bordure des composants de la carte Bootstrap

Les couleurs d'arrière-plan et de premier plan d'un composant de la carte Bootstrap peuvent être entièrement personnalisées en utilisant le texte Bootstrap et l'arrière-plan utilitaires de couleur – text-primary, text-white, bg-primary et ainsi de suite

Utilisation des utilitaires de bordure de Bootstrap (par exemple, border-primary ) nous pouvons rapidement définir la couleur de la bordure d'une carte.

La démo CodePen ci-dessous montre tous les différents types de cartes que nous pouvons créer avec Bootstrap. N'hésitez pas à l'expérimenter par vous-même:

Voir le Pen Bootstrap 4 Exemples de cartes par SitePoint ( @SitePoint ) le CodePen .

Création de mises en page avancées avec le composant de carte Bootstrap

La carte est un composant d'interface utilisateur moderne utilisé sur de nombreux sites Web pour afficher des éléments de types de contenu mixtes et différents (texte et images, etc.) en tant qu'entité unique / groupée , mais plus communément comme une collection d'articles similaires avec une largeur ou une hauteur différente ou identique. Une disposition populaire où les cartes peuvent être utilisées est la Maçonnerie mise en page également appelée la disposition Pinterest-like



Les cartes peuvent être utilisées pour créer des mises en page pour Les grandes entreprises comme Google et Facebook utilisent des cartes pour leurs différentes plates-formes Web.

Normalement, si nous voulons créer des mises en page complexes basées sur des cartes, nous aurions besoin d'avoir des cartes profondes. connaissance de CSS et HTML. Cependant, grâce aux dernières fonctionnalités de Bootstrap, nous pouvons rapidement construire de telles mises en page en enveloppant notre jeu de cartes à l'intérieur de div s avec des classes spéciales telles que .card-group ] .card-deck et .card-columns .

Grouping / Nesting Cards

Les groupes sont utilisés pour afficher plusieurs composants de carte Bootstrap comme éléments simples et attachés avec un dimensionnement uniforme – c'est-à-dire que les cartes ont la même largeur et la même hauteur. Ceci est réalisé en utilisant la propriété display: flex; .

Nous pouvons créer un groupe de cartes en utilisant la classe .card-group avec un wrapper div

Ajoutons le code suivant pour créer un groupe avec trois cartes:

  

      
      

          
 Titre de la carte 
          
 Sous-titre de la carte 
          
 Ceci est un exemple de carte simple 
      
  
  

       Titre de la carte