Auteur Auteur

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

  • 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.
    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.

  • 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.
    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">
    Précédent
    Suivant