Meedia objekt
Bootstrapi meediumiobjekti dokumentatsioon ja näited, et luua väga korduvaid komponente, nagu ajaveebi kommentaarid, säutsud ja muu sarnane.
Näide
Meediumiobjekt aitab luua keerulisi ja korduvaid komponente, kus osa meediast on paigutatud kõrvuti sisuga, mis ei ümbritse seda meediat. Lisaks teeb see tänu flexboxile seda vaid kahe nõutava klassiga.
Allpool on näide üksikust meediumiobjektist. Nõutavad on ainult kaks klassi – pakkimine .media
ja .media-body
sisu ümbritsemine. Valikulist polsterdust ja veerist saab juhtida vaheutiliitide abil .
Meedia pealkiri
Kas teete sama minu jaoks? On aeg silmitsi seista muusikaga, et ma pole enam sinu muusa. Kuulsin, et see on ilus, ole kohtunik ja mu tüdrukud hääletavad. Ma tunnen enda sees fööniksit. Taevas on armukade meie armastuse peale, inglid nutavad ülevalt. Jah, sa viid mind utoopiasse.
<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: tekstisiseseid elemente ei käsitleta paindlike üksustena
Internet Explorer 10–11 ei renderda sisemisi elemente, nagu linke või pilte (või ::before
ja ::after
pseudoelemente) paindlike üksustena. Ainus lahendus on seada mitterealine display
väärtus (nt , block
, inline-block
või flex
). Soovitame lihtsa lahendusena kasutada .d-flex
üht meie kuvari utiliiti .
Allikas: Flexbugs GitHubis
Pesitsemine
Meediumiobjekte saab lõputult pesastada, kuigi soovitame mingil hetkel peatuda. Koht pesastatud emameediumiobjekti .media
sisse .media-body
.
Meedia pealkiri
Seistes eesliinil, kui pommid hakkavad langema. Taevas on armukade meie armastuse peale, inglid nutavad ülevalt. Ei saa sind asendada miljoni sõrmusega. Poiss, kui sa oled minuga, annan sulle maitsta. Tagasiteed pole. Enne kui sa minuga kohtusid, oli mul kõik korras, kuid asjad olid rasked. Raske on pea, mis krooni kannab.
Meedia pealkiri
Tervitused, kallid, lähme teele. Jah, me paneme inglid nutma, sajab ülevalt maa peale. Andke teile tähistamiseks midagi head. Hammustasin oma keelt ja hoidsin hinge kinni. Ma panen su südame põksuma mu liibuvates teksades. Kui ma marsin üksi teise takti järgi. Suvi pärast keskkooli, kui me esimest korda kohtusime. Sa oled nii hüpnotiseeriv, kas sa võiksid olla kurat? Kas sa võiksid olla ingel? On aeg suured õhupallid välja tuua. Arvasin, et mina olen erand. Bikiinid, suvikõrvitsad, Martinid, no weenies.
<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>
Joondamine
Meediumiobjekti meediumi saab flexboxi utiliitidega joondada sisu ülaossa (vaikimisi), keskele või lõppu .media-body
.
Ülevalt joondatud kandja
Ma viin ta koomasse. Sa annad sada põhjust, miks ja ütled, et proovid tõesti. Nii ma siis istusin vaikselt, nõustusin viisakalt. Sobib minu kroonivaks lahinguks. Ja minu 18. sünnipäeval saime sobivad tätoveeringud. Nii et väga šikk, jah, ta on klassika. Olen valmis vähem sõidetud teeks.
Ma kõnnin õhus (täna õhtul). Aga maa peale. Sa oled originaal, ei saa asendada. Aga teises elus oleksin sinu tüdruk. Sõitsime Calisse ja jõime rannas purju. Me saame tantsida, kuni sureme, sina ja mina, oleme igavesti noored. Nägin sind kesklinnas bluusi laulmas.
<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>
Keskele joondatud kandja
Ta muutub külmaks nagu sügavkülmik. Selle kõige lõpus. Nõelades nagu mesilane teenisin oma triibud. Bikiinid, suvikõrvitsad, Martinid, no weenies. Loodan, et teil on tervislik isu. Me saame tantsida, kuni sureme, sina ja mina, oleme igavesti noored. Me elame elu. Me teeme seda õigesti. Sõna tänaval, sul on mulle midagi näidata, mina.
Tahad näha saadet 3D-s, filmi. Nad ütlevad: karda, et sa pole nagu teised, futuristlik armastaja. Ava oma süda. Nii ma siis istusin vaikselt, nõustusin viisakalt. Eelmine reede õhtu. Jah, sa oled õnnelik, kui oled tema lennukis. Ma olen sulle kingitus, annan sulle midagi head tähistamiseks.
<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>
Alt joondatud kandja
Lase oma värvidel lõhkeda. Ma tunnen seda valgust, mis minu sees on. Terve öö mängivad nad sinu laulu. Tokyost Mehhikosse, Riosse. Tagasiteed pole. Aga maa peale. Maagiline, värviline, härra mõistatus, ee. Erinevad DNAd, nad ei mõista sind.
Aga maa peale. Tal on see, je ne sais quoi, sa tead seda. Näen kirjutist seinal. Poisid murravad kaela, proovivad veidi hiilida. Võta mind, ta-ta-võta mind. Ava oma süda. Arvasin, et mina olen erand. Buum, buum, buum. Veneetsia rand ja Palm Springs, suvi on kõik. Too biit tagasi. (Nii me teeme)
<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>
Telli
Muutke meediaobjektide sisu järjekorda, muutes HTML-i ennast või lisades atribuudi määramiseks kohandatud flexbox-CSS-i order
(teie valitud täisarvuni).
Meedia objekt
Ma tean, et ohverdatakse, kuid see on hind. Kas olete piisavalt julge, et lubada mul oma paabulindu näha? Olge täna õhtul teie teismelise unistus. Oeh, ma näen sind. Tagasiteed pole. Jah, me kasutasime krediitkaarte ja meid visati baarist välja. Nii et las ma panen sulle sünnipäevaülikonna selga. Võite temaga kohtudes armuda. Oli maailm teie peopesas. Ära lase ülevusel end alt vedada, oh, oh jah. Nüüd räägime astroloogiast, küünte saamisest, kõik Jaapani-y. Tee minust oma 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>
Meedia nimekiri
Kuna meediumiobjektil on nii vähe struktuurinõudeid, saate neid klasse kasutada ka loendi HTML-elementidel. Lisage oma brauseri vaikeloendi stiilide eemaldamiseks või valikule ja seejärel rakendage <ul>
oma s . Nagu alati, kasutage peenhäälestamiseks vajalikke utiliite.<ol>
.list-unstyled
.media
<li>
-
Loendipõhine meediaobjekt
Kõik mu tüdrukud vanaaegse Chaneli beebi. Nii et saate oma koogi süüa. Täna õhtul, täna õhtul, täna õhtul kõnnin eetris. Aeglaselt oma hirmu alla neelates, jah jah. Kasvab kiiresti pikselöögiks. Nii kuum ja raske, koiduni. See muinasjutt, mis lõppes säravates turvistes rüütliga. Raske on pea, mis krooni kannab.
-
Loendipõhine meediaobjekt
Võib-olla põhjus, miks kõik uksed on suletud. Sest kord oled sa minu, kord oled minu. Olge täna õhtul teie teismelise unistus. Raske on pea, mis krooni kannab. See pole isegi puhkus, pole midagi tähistada. Täiuslik torm, täiuslik torm.
-
Loendipõhine meediaobjekt
Kas olete piisavalt julge, et lubada mul oma paabulindu näha? Tagasiteed pole. See on viimane kord, kui ütlete pärast viimast rida, mille katkestate. Selle kõige lõpus.
<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>