Obiekt medialny
Dokumentacja i przykłady obiektu multimedialnego Bootstrap do konstruowania wysoce powtarzalnych komponentów, takich jak komentarze na blogu, tweety i tym podobne.
Przykład
Obiekt multimedialny pomaga budować złożone i powtarzalne komponenty, w których niektóre multimedia są umieszczane obok treści, które nie otaczają tych multimediów. Dodatkowo robi to z tylko dwoma wymaganymi klasami dzięki flexboxowi.
Poniżej znajduje się przykład pojedynczego obiektu multimedialnego. Wymagane są tylko dwie klasy — zawijanie .mediai otaczanie .media-bodytreści. Opcjonalne dopełnienie i margines można kontrolować za pomocą narzędzi do odstępów .
Nagłówek mediów
Czy zrobisz to samo dla mnie? Czas zmierzyć się z muzyką Nie jestem już twoją muzą. Słyszałem, że to piękne, zostań sędzią, a moje dziewczyny wezmą głos. Czuję w sobie feniksa. Niebo zazdrości naszej miłości, anioły płaczą z góry. Tak, zabierasz mnie do utopii.
<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: Elementy wbudowane nie są traktowane jako elementy elastyczne
Internet Explorer 10-11 nie renderuje elementów wbudowanych, takich jak łącza lub obrazy (lub ::beforepseudoelementy ::after) jako elementy elastyczne. Jedynym obejściem jest ustawienie displaywartości niewbudowanej (np. block, inline-blocklub flex). Sugerujemy użycie .d-flexjednego z naszych narzędzi wyświetlania , jako łatwego rozwiązania.
Źródło: Flexbugs na GitHub
Zagnieżdżanie
Obiekty multimedialne mogą być zagnieżdżane w nieskończoność, chociaż sugerujemy, abyś w pewnym momencie przestał. Miejsce zagnieżdżone .mediaw .media-bodynadrzędnym obiekcie multimedialnym.
Nagłówek mediów
Stojąc na linii frontu, gdy bomby zaczną spadać. Niebo jest zazdrosne o naszą miłość, anioły płaczą z góry. Nie mogę cię zastąpić milionem pierścieni. Chłopcze, kiedy będziesz ze mną, dam ci posmakować. Nie ma odwrotu. Zanim mnie poznałeś, wszystko było w porządku, ale było trochę ciężko. Ciężka jest głowa, która nosi koronę.
Nagłówek mediów
Pozdrawiamy bliskich ruszamy w podróż. Tak, sprawiamy, że anioły płaczą, spuszczając deszcz na ziemię z góry. Daj ci coś dobrego do świętowania. Gryzałem się w język i wstrzymywałem oddech. Mogę sprawić, że twoje serce zacznie bić szybciej w moich obcisłych dżinsach. Gdy maszeruję sam do innego rytmu. Lato po liceum, kiedy się poznaliśmy. Jesteś taki hipnotyzujący, czy mógłbyś być diabłem? Czy możesz być aniołem? Czas wydobyć duże balony. Myślałem, że jestem wyjątkiem. Bikini, cukinia, martini, żadnych cukierków.
<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>Wyrównanie
Multimedia w obiekcie multimedialnym można wyrównać za pomocą narzędzi Flexbox do góry (domyślnie), środka lub końca .media-bodytreści.
Media wyrównane do góry
Wsadzę ją w śpiączkę. Podajesz sto powodów dlaczego i mówisz, że naprawdę spróbujesz. Usiadłem więc cicho, grzecznie się zgodziłem. Szykuję się do mojej koronnej bitwy. A na moje 18 urodziny dostaliśmy pasujące tatuaże. Więc très chic, tak, to klasyka. Jestem gotowy na mniej uczęszczaną drogę.
Chodzę w powietrzu (dziś wieczorem). Ale na ziemię. Jesteś oryginalny, nie można go zastąpić. Ale w innym życiu byłabym twoją dziewczyną. Pojechaliśmy do Cali i upiliśmy się na plaży. Możemy tańczyć, dopóki nie umrzemy, ty i ja, na zawsze będziemy młodzi. Widziałem cię w centrum śpiewającego Bluesa.
<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>Media wyrównane do środka
Będzie zimna jak zamrażarka. Na samym końcu tego wszystkiego. Żądła jak pszczoła, zasłużyłem na swoje pręgi. Bikini, cukinia, martini, żadnych cukierków. Mam nadzieję, że masz zdrowy apetyt. Możemy tańczyć, dopóki nie umrzemy, ty i ja, na zawsze będziemy młodzi. Żyjemy życiem. Robimy to dobrze. Słowo na ulicy, masz mi coś do pokazania.
Chcesz obejrzeć film w 3D. Mówią, bój się, że nie jesteś taki jak inni, futurystyczny kochanku. Otwórz swoje serce. Usiadłem więc cicho, grzecznie się zgodziłem. Ostatnia piątkowa noc. Tak, masz szczęście, jeśli lecisz jej samolotem. Będę twoim prezentem, dam ci coś dobrego do świętowania.
<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>Media wyrównane do dołu
Chodź, niech twoje kolory pękną. Czuję to światło, które jest we mnie. Całą noc grają twoją piosenkę. Od Tokio po Meksyk, po Rio. Nie ma odwrotu. Ale na ziemię. Magiczny, kolorowy, Panie Tajemnicy, ee. Inne DNA, oni cię nie rozumieją.
Ale na ziemię. Ona to ma, je ne sais quoi, wiesz o tym. Widzę napis na ścianie. Chłopcy skręcają sobie karki, próbując zakraść się na mały rzut oka. Weź mnie, weź mnie. Otwórz swoje serce. Myślałem, że jestem wyjątkiem. Boom boom boom. Plaża w Wenecji i Palm Springs, lato jest wszystkim. Przywróć rytm. (To jest jak to robimy)
<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>Zamówienie
Zmień kolejność treści w obiektach multimedialnych, modyfikując sam kod HTML lub dodając niestandardowy CSS Flexbox, aby ustawić orderwłaściwość (na wybraną liczbę całkowitą).
Obiekt medialny
Wiem, że będzie poświęcenie, ale taka jest cena. Czy jesteś na tyle odważny, by pozwolić mi zobaczyć swojego pawia? Bądź dziś swoim nastoletnim marzeniem. Aha, widzę cię. Nie ma odwrotu. Tak, przekroczyliśmy limit naszych kart kredytowych i zostaliśmy wyrzuceni z baru. Więc pozwól, że założę ci strój urodzinowy. Możesz się zakochać, kiedy ją spotkasz. Mieć świat w dłoniach. Nie pozwól, by wielkość cię przygnębiła, och, o tak. Teraz rozmawiamy o astrologii, robimy sobie paznokcie, wszystko po japońsku. Uczyń mnie swoją Afrodytą.
<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 mediów
Ponieważ obiekt multimedialny ma tak mało wymagań strukturalnych, możesz również użyć tych klas na elementach listy HTML. Na swoim <ul>lub <ol>dodaj , .list-unstyledaby usunąć wszystkie domyślne style listy przeglądarki, a następnie zastosuj .mediado swoich <li>s. Jak zawsze, używaj narzędzi do rozmieszczania wszędzie tam, gdzie jest to potrzebne, aby dostroić.
-
Obiekt multimedialny oparty na liście
Wszystkie moje dziewczyny w stylu vintage Chanel baby. Więc możesz mieć swoje ciasto. Dziś wieczorem, dziś wieczorem, dziś wieczorem chodzę w powietrzu. Powoli przełykam mój strach, tak, tak. Szybko rośnie w błyskawicę. Tak gorąco i ciężko, aż do świtu. Ta bajka kończy się rycerzem w lśniącej zbroi. Ciężka jest głowa, która nosi koronę.
-
Obiekt multimedialny oparty na liście
Może powód, dla którego wszystkie drzwi są zamknięte. Bo raz jesteś moja, raz jesteś moja. Bądź dziś swoim nastoletnim marzeniem. Ciężka jest głowa, która nosi koronę. To nawet nie święto, nic do świętowania. Doskonała burza, doskonała burza.
-
Obiekt multimedialny oparty na liście
Czy jesteś na tyle odważny, by pozwolić mi zobaczyć swojego pawia? Nie ma odwrotu. To ostatni raz, kiedy mówisz, po ostatniej łamanej linii. Na samym końcu tego wszystkiego.
<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>