Objet multimédia
Documentation et exemples pour l'objet multimédia de Bootstrap pour construire des composants hautement répétitifs tels que des commentaires de blog, des tweets, etc.
Exemple
L' objet multimédia aide à créer des composants complexes et répétitifs dans lesquels certains médias sont positionnés à côté d'un contenu qui ne s'enroule pas autour dudit média. De plus, il le fait avec seulement deux classes requises grâce à flexbox.
Vous trouverez ci-dessous un exemple d'objet multimédia unique. Seules deux classes sont requises : l'habillage .mediaet l' .media-bodyentourage de votre contenu. Le rembourrage et la marge facultatifs peuvent être contrôlés à l'aide d' utilitaires d'espacement .
Rubrique média
Ferez-vous la même chose pour moi? Il est temps d'affronter la musique Je ne suis plus ta muse. J'ai entendu dire que c'est beau, soyez le juge et mes filles voteront. Je peux sentir un phénix à l'intérieur de moi. Le ciel est jaloux de notre amour, les anges pleurent d'en haut. Ouais, tu m'emmènes à l'utopie.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
</div>
</div>Flexbug #12 : les éléments en ligne ne sont pas traités comme des éléments flexibles
Internet Explorer 10-11 ne restitue pas les éléments en ligne tels que les liens ou les images (ou ::beforeles ::afterpseudo-éléments) en tant qu'éléments flexibles. La seule solution consiste à définir une displayvaleur non intégrée (par exemple, block, inline-blockou flex). Nous vous suggérons d'utiliser .d-flex, l'un de nos utilitaires d'affichage , comme solution simple.
Source : Flexbugs sur GitHub
Nidification
Les objets multimédias peuvent être imbriqués à l'infini, bien que nous vous suggérions de vous arrêter à un moment donné. Lieu imbriqué .mediadans le .media-bodyd'un objet multimédia parent.
Rubrique média
Debout en première ligne quand les bombes commencent à tomber. Le ciel est jaloux de notre amour, les anges pleurent d'en haut. Je ne peux pas te remplacer par un million de bagues. Garçon, quand tu seras avec moi, je te donnerai un avant-goût. Il n'y pas de retour en arriere. Avant de me rencontrer, j'allais bien, mais les choses étaient un peu lourdes. Lourde est la tête qui porte la couronne.
Rubrique média
Salutations proches, partons en voyage. Oui, nous faisons pleurer des anges, pleuvant sur terre d'en haut. Donnez-vous quelque chose de bon à célébrer. J'avais l'habitude de me mordre la langue et de retenir mon souffle. Je vais faire battre ton cœur dans mon jean moulant. Alors que je marche seul sur un rythme différent. L'été après le lycée quand nous nous sommes rencontrés pour la première fois. Tu es tellement hypnotisant, pourrais-tu être le diable ? Pourriez-vous être un ange ? Il est temps de sortir les gros ballons. Je pensais que j'étais l'exception. Bikinis, courgettes, Martinis, pas de bites.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Standing on the frontline when the bombs start to fall. Heaven is jealous of our love, angels are crying from up above. Can't replace you with a million rings. Boy, when you're with me I'll give you a taste. There’s no going back. Before you met me I was alright but things were kinda heavy. Heavy is the head that wears the crown.</p>
<div class="media mt-3">
<a class="mr-3" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Greetings loved ones let's take a journey. Yes, we make angels cry, raining down on earth from up above. Give you something good to celebrate. I used to bite my tongue and hold my breath. I'm ma get your heart racing in my skin-tight jeans. As I march alone to a different beat. Summer after high school when we first met. You're so hypnotizing, could you be the devil? Could you be an angel? It's time to bring out the big balloons. Thought that I was the exception. Bikinis, zucchinis, Martinis, no weenies.</p>
</div>
</div>
</div>
</div>Alignement
Les médias dans un objet média peuvent être alignés avec les utilitaires flexbox en haut (par défaut), au milieu ou à la fin de votre .media-bodycontenu.
Médias alignés en haut
Je vais la mettre dans le coma. Tu donnes cent raisons et tu dis que tu vas vraiment essayer. Alors je me suis assis sans aucun mot et accepté poliment. Se préparer pour ma bataille de couronnement. Et le jour de mon 18e anniversaire, nous avons eu des tatouages assortis. So très chic, ouais, c'est un classique. Je suis prêt pour la route la moins fréquentée.
Je marche sur l'air (ce soir). Mais terre à terre. Vous êtes original, ne peut pas être remplacé. Mais dans une autre vie je serais ta copine. Nous sommes allés à Cali et nous sommes saoulés sur la plage. Nous pouvons danser, jusqu'à notre mort, toi et moi, nous serons jeunes pour toujours. Je t'ai vu chanter du blues au centre-ville.
<div class="media">
<img src="..." class="align-self-start mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So I sat quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching tattoos. So très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
<p>I'm walking on air (tonight). But down to earth. You're original, cannot be replaced. But in another life I would be your girl. We drove to Cali and got drunk on the beach. We can dance, until we die, you and I, will be young forever. Saw you downtown singing the Blues.</p>
</div>
</div>Médias alignés au centre
Elle deviendra froide comme un congélateur. À la fin de tout. Piquant comme une abeille, j'ai gagné mes galons. Bikinis, courgettes, Martinis, pas de bites. J'espère que vous avez un bon appétit. Nous pouvons danser, jusqu'à notre mort, toi et moi, nous serons jeunes pour toujours. Nous vivons la vie. Nous le faisons bien. On dit dans la rue que tu as quelque chose à me montrer, moi.
Vous voulez voir le spectacle en 3D, un film. Ils disent, ayez peur de ne pas être comme les autres, amant futuriste. Ouvre ton coeur. Alors je me suis assis sans aucun mot et accepté poliment. Vendredi soir dernier. Ouais, tu as de la chance si tu es dans son avion. Je serai ton cadeau, je te donnerai quelque chose de bien à fêter.
<div class="media">
<img src="..." class="align-self-center mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>She'll turn cold as a freezer. At the eh-end of it all. Stinging like a bee I earned my stripes. Bikinis, zucchinis, Martinis, no weenies. I hope you got a healthy appetite. We can dance, until we die, you and I, will be young forever. We're living the life. We're doing it right. Word on the street, you got somethin' to show me, me.</p>
<p class="mb-0">Wanna see the show in 3D, a movie. They say, be afraid you're not like the others, futuristic lover. Open up your heart. So I sat quietly, agreed politely. Last Friday night. Yeah, you're lucky if you're on her plane. I'll be your gift, give you something good to celebrate.</p>
</div>
</div>Médias alignés en bas
Allez, laissez éclater vos couleurs. Je peux sentir cette lumière qui est à l'intérieur de moi. Toute la nuit, ils jouent, ta chanson. De Tokyo à Mexico, à Rio. Il n'y pas de retour en arriere. Mais terre à terre. Magique, coloré, Mr. Mystery, ee. ADN différent, ils ne te comprennent pas.
Mais terre à terre. Elle a ça, je ne sais quoi, tu le sais. Je peux voir l'écriture sur le mur. Les garçons se cassent le cou en essayant de jeter un petit coup d'œil. Prends-moi, ta-ta-prends-moi. Ouvre ton coeur. Je pensais que j'étais l'exception. Boum boum boum. Plage de Venise et Palm Springs, l'été est tout. Ramenez le rythme. (C'est comme ça qu'on fait)
<div class="media">
<img src="..." class="align-self-end mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Come on, let your colours burst. I can feel this light that's inside of me. All night they're playing, your song. From Tokyo to Mexico, to Rio. There’s no going back. But down to earth. Magical, colorful, Mr. Mystery, ee. Different DNA, they don't understand you.</p>
<p class="mb-0">But down to earth. She's got that, je ne sais quoi, you know it. I can see the writing on the wall. The boys break their necks try'na to creep a little sneak peek. Take me, ta-ta-take me. Open up your heart. Thought that I was the exception. Boom, boom, boom. Venice beach and Palm Springs, summertime is everything. Bring the beat back. (This is how we do)</p>
</div>
</div>Ordre
Modifiez l'ordre du contenu dans les objets multimédias en modifiant le code HTML lui-même ou en ajoutant un CSS flexbox personnalisé pour définir la orderpropriété (sur un entier de votre choix).
Objet multimédia
Je sais qu'il y aura des sacrifices mais c'est le prix. Es-tu assez courageux pour me laisser voir ton paon ? Soyez votre rêve d'adolescent ce soir. Euh, je te vois. Il n'y pas de retour en arriere. Ouais, on a maximisé nos cartes de crédit et on s'est fait virer du bar. Alors laisse-moi te mettre dans ton costume d'anniversaire. Vous pouvez tomber amoureux quand vous la rencontrez. Vous aviez le monde dans la paume de vos mains. Ne laissez pas la grandeur vous abattre, oh, oh ouais. Maintenant, on parle d'astrologie, on se fait les ongles, tout en japonais. Fais de moi ton Aphrodite.
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
<p>I know there will be sacrifice but that's the price. Are you brave enough to let me see your peacock? Be your teenage dream tonight. Uh-huh, I see you. There’s no going back. Yeah, we maxed our credit cards and got kicked out of the bar. So let me get you in your birthday suit. You may fall in love when you meet her. Had the world in the palm of your hands. Don't let the greatness get you down, oh, oh yeah. Now we talking astrology, getting our nails did, all Japanese-y. Make me your Aphrodite.</p>
</div>
<img src="..." class="ml-3" alt="...">
</div>Liste des médias
Étant donné que l'objet multimédia a si peu d'exigences structurelles, vous pouvez également utiliser ces classes sur des éléments HTML de liste. Sur votre <ul>ou <ol>, ajoutez le .list-unstyledpour supprimer tous les styles de liste par défaut du navigateur, puis appliquez .media-le à votre <li>s. Comme toujours, utilisez les utilitaires d'espacement chaque fois que nécessaire pour affiner.
-
Objet multimédia basé sur une liste
Toutes mes filles bébé Chanel vintage. Ainsi, vous pouvez avoir votre gâteau. Ce soir, ce soir, ce soir, je marche dans les airs. Ravalant lentement ma peur, ouais ouais. Se transformant rapidement en un éclair. Si chaud et lourd, jusqu'à l'aube. Ce conte de fées se termine par un chevalier en armure étincelante. Lourde est la tête qui porte la couronne.
-
Objet multimédia basé sur une liste
Peut-être une raison pour laquelle toutes les portes sont fermées. Parce qu'une fois que tu es à moi, une fois que tu es à moi. Soyez votre rêve d'adolescent ce soir. Lourde est la tête qui porte la couronne. Ce n'est même pas un jour férié, rien à fêter. Une tempête parfaite, une tempête parfaite.
-
Objet multimédia basé sur une liste
Es-tu assez courageux pour me laisser voir ton paon ? Il n'y pas de retour en arriere. C'est la dernière fois que vous dites, après la dernière ligne que vous cassez. À la fin de tout.
<ul class="list-unstyled">
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>All my girls vintage Chanel baby. So you can have your cake. Tonight, tonight, tonight, I'm walking on air. Slowly swallowing down my fear, yeah yeah. Growing fast into a bolt of lightning. So hot and heavy, 'Til dawn. That fairy tale ending with a knight in shining armor. Heavy is the head that wears the crown.</p>
</div>
</li>
<li class="media my-4">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your teenage dream tonight. Heavy is the head that wears the crown. It's not even a holiday, nothing to celebrate. A perfect storm, perfect storm.</p>
</div>
</li>
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you say, after the last line you break. At the eh-end of it all.</p>
</div>
</li>
</ul>