TP les cards Bootstrap

TP les cards Bootstrap

  1. Objectifs

    • Etre capable de mettre les cards dans les grilles en Bootstrap 4
  2. Rappels

    • Utilisez l’élément ".card-deck" Si vous vouler avoir un ensemble de carte qui a la même largeur et la hauteur et est séparé. Cet élément fonctionne similairement à l’élément .card-group. La seule différence est que ses éléments enfants (.card) seront collés l’un et l’autre.
    • Si on souhaite que nos cartes soient alignées en colonne, c’est-à-dire de haut en bas d’abord et de gauche à droite ensuite, on peut également utiliser la classe .card-columns.



  3. Exercice 01

    1. Énoncé
      • Créer une carte ou "cards" Bootstrap 4 en utilisant la classe .card
      • Utilisez la classe Bootstrap 4 .card-title pour ajouter des titres de cartes à n’importe quel élément de titre.
      • Ajoutez une classe .card-text pour supprimer les marges inférieures d’un élément <p> s’il est le dernier enfant (ou le seul) à l’intérieur .card-body.
      • Ajoutez une classe .card-link pour ajouter une couleur bleue à n’importe quel lien et un effet de survol.
      • Ajoutez les classes .card-img-top ou .card-img-bottom à un <img> pour placer un image en haut ou en bas à l’intérieur de la carte.
      • Placez l’image en dehors de .card-body pour couvrir toute la largeur.
      • Ajoutez la classe .stretched-link à un lien à l’intérieur de la carte, et cela rendra la carte entière cliquable et planable (la carte agira comme un lien).
      • Transformez l’image en arrière-plan de carte (utilisez la classe .card-img-overlay pour ajouter du texte au-dessus de l’image.
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !
  4. Exercice 02

    1. Énoncé
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !
  5. Exercice 03

    1. Énoncé
      • Utiliser les classes Bootstrap pour représenter les cartes suivants:
      • Les cartes seront représentés dans une seule ligne en cas d’un petit écran et sur deux lignes en cas des moyens écran et sur quatre lignes dans les autres cas.
      • Aligner les textes des Cartes comme le montre le schéma.
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !
  6. Exercice 04

    1. Énoncé
      • Soit les modèles des cartes Bootstrap suivants:
      • Modèle 01
        • Dans ce modèle, utilisez le balisage de la grille pour créer trois cartes avec des classes d’arrière-plan et de couleur.
        • Utilisez la classe .card-header dans un <div> pour créer l’en-tête avec .bg-primary background et text-warning
          pour spécifier le texte dans l’en-tête.
        • Utilisez la classe .card-footer pour créer un pied de page dans la carte.
        • Utilisez deux liens dans les styles de bouton qui sont alignés à droite.
      • Modèle 02
        • Dans ce modèle, utilisez d’autres classes pour l’arrière-plan et les couleurs des textes utilisés.
        • Utilisez une bordure de l’ensemble des éléments de la carte.
        • Changez les classes des liens des boutons pour obtenir celles de l’image ci-dessous.
      • Modèle 03
        • Reprenez le modèle 01 en ajoutant des images et en éliminant les entêtes.
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !
  7. Exercice 05

    1. Énoncé
      • Utiliser les classes Bootstrap pour représenter les cartes suivants:
      • Les cartes seront représentés dans une seule ligne en cas d’un petit écran et sur trois lignes pour les autres cas.
      • TP les cards Bootstrap

    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !



Abonnez vous à notre chaîne YouTube gratuitement