objeto multimedia
Documentación y ejemplos del objeto de medios de Bootstrap para construir componentes altamente repetitivos como comentarios de blog, tweets y similares.
Ejemplo
El objeto de medios ayuda a crear componentes complejos y repetitivos en los que algunos medios se colocan junto con contenido que no los envuelve. Además, hace esto con solo dos clases requeridas gracias a flexbox.
A continuación se muestra un ejemplo de un único objeto multimedia. Solo se requieren dos clases: el envoltorio .mediay el .media-bodyalrededor de su contenido. El relleno y el margen opcionales se pueden controlar a través de las utilidades de espaciado .
Encabezado de medios
¿Harías lo mismo por mi? Es hora de enfrentar la música Ya no soy tu musa. Escuché que es hermoso, sé el juez y mis chicas votarán. Puedo sentir un fénix dentro de mí. El cielo está celoso de nuestro amor, los ángeles lloran desde lo alto. Sí, me llevas a la utopía.
<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: los elementos en línea no se tratan como elementos flexibles
Internet Explorer 10-11 no representa elementos en línea como enlaces o imágenes (o ::beforepseudoelementos ::after) como elementos flexibles. La única solución es establecer un displayvalor que no esté en línea (p. ej. block, inline-block, o flex). Sugerimos usar .d-flex, una de nuestras utilidades de visualización , como una solución fácil.
Fuente: Flexbugs en GitHub
Anidamiento
Los objetos multimedia se pueden anidar infinitamente, aunque le sugerimos que se detenga en algún punto. Lugar anidado .mediadentro .media-bodyde un objeto multimedia principal.
Encabezado de medios
De pie en primera línea cuando las bombas empiezan a caer. El cielo está celoso de nuestro amor, los ángeles lloran desde lo alto. No puedo reemplazarte con un millón de anillos. Chico, cuando estés conmigo te daré un gustito. No hay vuelta atrás. Antes de que me conocieras, estaba bien, pero las cosas eran un poco pesadas. Pesada es la cabeza que lleva la corona.
Encabezado de medios
Saludos amados, hagamos un viaje. Sí, hacemos llorar a los ángeles, lloviendo sobre la tierra desde arriba. Darte algo bueno para celebrar. Solía morderme la lengua y contener la respiración. Voy a hacer que tu corazón se acelere en mis jeans ceñidos. Mientras marcho solo a un ritmo diferente. Verano después de la escuela secundaria cuando nos conocimos. Eres tan hipnotizante, ¿podrías ser el diablo? ¿Podrías ser un ángel? Es hora de sacar los globos grandes. Pensé que yo era la excepción. Bikinis, calabacines, martinis, nada de salchichas.
<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>Alineación
Los medios en un objeto de medios se pueden alinear con las utilidades de flexbox en la parte superior (predeterminado), en el medio o al final de su .media-bodycontenido.
Medios alineados en la parte superior
Voy a ponerla en coma. Das cien razones por las cuales, y dices que realmente lo vas a intentar. Así que me senté en silencio, aceptó cortésmente. Preparándome para mi batalla final. Y en mi cumpleaños número 18 nos hicimos tatuajes a juego. Así que très chic, sí, es un clásico. Estoy listo para el camino menos transitado.
Estoy caminando en el aire (esta noche). Pero abajo a la tierra. Eres original, no se puede reemplazar. Pero en otra vida sería tu chica. Condujimos hasta Cali y nos emborrachamos en la playa. Podemos bailar, hasta que muramos, tú y yo, seremos jóvenes para siempre. Te vi en el centro cantando Blues.
<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>Medios alineados al centro
Se volverá fría como un congelador. Al final de todo. Picando como una abeja me gané las rayas. Bikinis, calabacines, martinis, nada de salchichas. Espero que tengas un apetito saludable. Podemos bailar, hasta que muramos, tú y yo, seremos jóvenes para siempre. Estamos viviendo la vida. Lo estamos haciendo bien. Se dice en la calle que tienes algo que mostrarme, a mí.
¿Quieres ver el espectáculo en 3D, una película. Dicen, ten miedo de no ser como los demás, amante futurista. Abre tu corazón. Así que me senté en silencio, aceptó cortésmente. El pasado viernes por la noche. Sí, tienes suerte si estás en su avión. Seré tu regalo, darte algo bueno para celebrar.
<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>Medios alineados en la parte inferior
Vamos, deja que tus colores estallen. Puedo sentir esta luz que está dentro de mí. Toda la noche están tocando, tu canción. De Tokio a México, a Río. No hay vuelta atrás. Pero abajo a la tierra. Mágico, colorido, Mr. Mystery, ee. ADN diferente, no te entienden.
Pero abajo a la tierra. Ella tiene eso, je ne sais quoi, lo sabes. Puedo ver la escritura en la pared. Los chicos se rompen el cuello tratando de dar un pequeño adelanto. Llévame, ta-ta-llévame. Abre tu corazón. Pensé que yo era la excepción. Bum, bum, bum. Venice Beach y Palm Springs, el verano lo es todo. Llevar el ritmo. (Así es como lo hacemos)
<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>Ordenar
Cambie el orden del contenido en los objetos de medios modificando el propio HTML o agregando algún CSS de flexbox personalizado para establecer la orderpropiedad (en un número entero de su elección).
objeto multimedia
Sé que habrá sacrificio, pero ese es el precio. ¿Eres lo suficientemente valiente como para dejarme ver tu pavo real? Ser tu sueño adolescente de esta noche. Ajá, te veo. No hay vuelta atrás. Sí, llegamos al límite de nuestras tarjetas de crédito y nos echaron del bar. Así que déjame ponerte tu traje de cumpleaños. Puede que te enamores cuando la conozcas. Tenía el mundo en la palma de sus manos. No dejes que la grandeza te deprima, oh, oh sí. Ahora estamos hablando de astrología, arreglándonos las uñas, todo japonés. Hazme tu Afrodita.
<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>Lista de medios
Debido a que el objeto multimedia tiene muy pocos requisitos estructurales, también puede usar estas clases en elementos HTML de lista. En su <ul>o <ol>, agregue el .list-unstyledpara eliminar cualquier estilo de lista predeterminado del navegador y luego aplíquelo .mediaa su <li>s. Como siempre, use las utilidades de espaciado donde sea necesario para ajustar.
-
Objeto multimedia basado en lista
Todas mis chicas vintage Chanel baby. Para que puedas tener tu pastel. Esta noche, esta noche, esta noche, estoy caminando en el aire. Lentamente tragando mi miedo, sí, sí. Creciendo rápidamente en un relámpago. Tan caliente y pesado, hasta el amanecer. Ese cuento de hadas que termina con un caballero de brillante armadura. Pesada es la cabeza que lleva la corona.
-
Objeto multimedia basado en lista
Tal vez una razón por la que todas las puertas están cerradas. Porque una vez que seas mía, una vez que seas mía. Ser tu sueño adolescente de esta noche. Pesada es la cabeza que lleva la corona. Ni siquiera es un día de fiesta, nada que celebrar. Una tormenta perfecta, tormenta perfecta.
-
Objeto multimedia basado en lista
¿Eres lo suficientemente valiente como para dejarme ver tu pavo real? No hay vuelta atrás. Esta es la última vez que dices, después de la última línea que rompes. Al final de todo.
<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>