Le composant media Bootstrap

Le composant media Bootstrap

  1. Objectifs

    • Etre capable de travailler avec les spinners Bootstrap 4



  2. Présentation

    • Les médias sont des vidéos, des fichiers audio ou des informations sensibles similaires.
    • L’ objet multimédia vous aide à créer des composants répétitifs où certains médias sont positionnés à côté de contenu qui ne s’enroule pas autour des dits médias. De plus, il le fait avec seulement deux classes requises .media et .media-body.
    • Le composant d’objet multimédia de Bootstrap offre un moyen simple d’aligner du texte et des objets multimédias lors de leur présentation côte à côte.
    • Le composant d’objet multimédia de Bootstrap vous permet de faire flotter rapidement et facilement des médias à gauche et / ou à droite d’un bloc de contenu.
    • Pour utiliser ce composant, vous devez appliquer une classe pour le conteneur externe, ainsi que des classes distinctes au média et au texte.
    • Conteneur extérieur
      • Enveloppez le tout dans un <div> et donnez-lui la classe .media.
    • Objet multimédia
      • Aucune classe spéciale est nécessaire pour l’objet multimédia (par exemple <img>, <video>etc.). Insérez-le simplement dans le code HTML là où vous en avez besoin.
    • Corps des médias
      • Appliquez la classe .media-body au parent du texte <div>ou à un autre élément. Appliquez également le .media-heading à toutes les en-têtes à l’intérieur du corps du média.
    • Marges
      • Utilisez un utilitaire d’espacement Booststrap pour appliquer des marges à l’objet multimédia (par exemple, mr-3).

    • Exemple
      • Le composant media Bootstrap

        Le composant media Bootstrap

  3. Gérer plusieurs objets multimédias

    1. Objets multimédias imbriqués
      • Vous pouvez imbriquer des objets multimédias les uns dans les autres (c’est-à-dire l’ensemble du bloc multimédia). Le bloc de média imbriqué sera indenté par défaut.
      • Le composant media Bootstrap

      • Ce qui nous donne:
      • Le composant media Bootstrap

    2. Plusieurs images dans un bloc multimédia
    3. Deux objets multimédias
      • Vous pouvez faire apparaître deux objets multimédias dans un bloc multimédia – un à gauche et un à droite. Le corps du média devra être inséré entre eux dans le balisage.
  4. Alignement des medias

    1. Alignement horizontal
      • Vous pouvez permuter la position de l’objet multimédia et du corps multimédia dans votre balisage, de sorte que l’en-tête et le texte précèdent l’image.
      • Le composant media Bootstrap

        Le composant media Bootstrap

    2. Alignement vertical:Milieu
      • Pour aligner le media au centre utiliser la classe Bootstrap d-flex align-self-center
      • <img class="mr-3 d-flex align-self-center" src="images/01.jpg">
    3. Alignement vertical:Bas
      • Pour aligner le media en bas utiliser la classe Bootstrap d-flex align-self-end
      • <img class="mr-3 d-flex align-self-end" src="images/01.jpg">



Abonnez vous à notre chaîne YouTube gratuitement