Fjölmiðlahlutur
Skjöl og dæmi fyrir fjölmiðlahlut Bootstrap til að búa til mjög endurtekna hluti eins og blogg athugasemdir, kvak og þess háttar.
Dæmi
Fjölmiðlahluturinn hjálpar til við að byggja upp flókna og endurtekna íhluti þar sem sumir miðlar eru staðsettir við hlið efnis sem umlykur ekki umræddan miðil. Auk þess gerir það þetta með aðeins tveimur nauðsynlegum flokkum þökk sé flexbox.
Hér að neðan er dæmi um einn miðlunarhlut. Aðeins þarf tvo flokka - umbúðirnar .mediaog innihaldið í .media-bodykringum þig. Hægt er að stjórna valfrjálsu bólstrun og spássíu í gegnum bilabúnað .
Fyrirsögn fjölmiðla
Ætlarðu að gera það sama fyrir mig? Það er kominn tími til að horfast í augu við tónlistina. Ég er ekki lengur músin þín. Heyrði að það er fallegt, vertu dómarinn og stelpurnar mínar ætla að kjósa. Ég finn fyrir fönix inni í mér. Himnaríki öfundar ást okkar, englar gráta að ofan. Já, þú ferð með mig í útópíuna.
<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: Innbyggðir þættir eru ekki meðhöndlaðir sem sveigjanlegir hlutir
Internet Explorer 10-11 birtir ekki innbyggða þætti eins og tengla eða myndir (eða ::beforeog ::aftergerviþætti) sem sveigjanlega hluti. Eina lausnin er að stilla displaygildi sem ekki er innbyggt (td , block, inline-blockeða flex). Við mælum með að nota .d-flex, eitt af skjátólunum okkar , sem auðveld leið.
Heimild: Flexbugs á GitHub
Hreiður
Margmiðlunarhlutir geta verið óendanlega hreiður, þó við mælum með að þú hættir á einhverjum tímapunkti. Settu hreiðrað .mediainn í .media-bodymóðurmiðilshlut.
Fyrirsögn fjölmiðla
Stendur í fremstu víglínu þegar sprengjurnar byrja að falla. Himnaríki öfundar ást okkar, englar gráta að ofan. Ekki hægt að skipta þér út fyrir milljón hringa. Strákur, þegar þú ert hjá mér skal ég gefa þér smakk. Það er ekki aftur snúið. Áður en þú hittir mig var ég í lagi en hlutirnir voru frekar þungir. Þungt er höfuðið sem ber kórónu.
Fyrirsögn fjölmiðla
Sælir ástvinir skulum fara í ferðalag. Já, við fáum engla til að gráta, rigna yfir jörðina ofan frá. Gefðu þér eitthvað gott til að fagna. Ég beit í tunguna á mér og hélt niðri í mér andanum. Ég ætla að fá hjarta þitt til að slá í gegn í húðþröngum gallabuxunum mínum. Þar sem ég geng einn í annan takt. Sumar eftir menntaskóla þegar við hittumst fyrst. Þú ert svo dáleiðandi, gætirðu verið djöfullinn? Gætirðu verið engill? Það er kominn tími til að draga fram stóru blöðrurnar. Hélt að ég væri undantekningin. Bikiní, kúrbít, martíní, engin vín.
<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>Jöfnun
Hægt er að stilla miðlum í miðlunarhlut með flexbox tólum efst (sjálfgefið), miðja eða enda .media-bodyefnisins þíns.
Fjölmiðlar í efstu röð
Ég ætla að setja hana í dá. Þú gefur hundrað ástæður fyrir því og segir að þú ætlar virkilega að reyna. Svo ég sat rólegur, samþykkti það kurteislega. Passa upp fyrir krúnubaráttuna mína. Og á 18 ára afmælinu mínu fengum við samsvarandi húðflúr. Svo très flott, já, hún er klassísk. Ég er tilbúinn fyrir minna ferðalag.
Ég geng á lofti (í kvöld). En niður á jörðina. Þú ert upprunalegur, ekki hægt að skipta um það. En í öðru lífi myndi ég vera stelpan þín. Við keyrðum til Cali og urðum fullir á ströndinni. Við getum dansað, þar til við deyjum, þú og ég verðum ung að eilífu. Sá þig í miðbænum syngja 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>Miðjumiðlar
Hún verður köld eins og frystir. Í eh-enda alls. Stingandi eins og býfluga vann ég mér inn rendurnar mínar. Bikiní, kúrbít, martíní, engin vín. Ég vona að þú hafir fengið heilbrigða matarlyst. Við getum dansað, þar til við deyjum, þú og ég verðum ung að eilífu. Við lifum lífinu. Við erum að gera það rétt. Orð á götunni, þú hefur eitthvað að sýna mér, mér.
Langar að sjá þáttinn í þrívídd, kvikmynd. Þeir segja, vertu hræddur um að þú sért ekki eins og hinir, framúrstefnulegur elskhugi. Opnaðu hjarta þitt. Svo ég sat rólegur, samþykkti það kurteislega. Síðasta föstudagskvöld. Já, þú ert heppinn ef þú ert í flugvélinni hennar. Ég skal vera gjöfin þín, gefa þér eitthvað gott til að fagna.
<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>Miðlar sem eru í botni
Komdu, láttu litina springa. Ég finn þetta ljós sem er innra með mér. Alla nóttina eru þeir að spila, lagið þitt. Frá Tókýó til Mexíkó, til Rio. Það er ekki aftur snúið. En niður á jörðina. Töfrandi, litrík, Mr Mystery, ee. Mismunandi DNA, þeir skilja þig ekki.
En niður á jörðina. Hún hefur það, je ne sais quoi, þú veist það. Ég sé skriftina á veggnum. Strákarnir hálsbrjóta try'na til að læðast smá smekksýni. Taktu mig, ta-ta-taktu mig. Opnaðu hjarta þitt. Hélt að ég væri undantekningin. Búmm, búmm, búmm. Feneyjarströnd og Palm Springs, sumarið er allt. Komdu taktinum aftur. (Svona gerum við þetta)
<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>Panta
Breyttu röð efnis í miðlunarhlutum með því að breyta HTML sjálfum, eða með því að bæta við sérsniðnum flexbox CSS til að stilla ordereignina (í heiltölu að eigin vali).
Fjölmiðlahlutur
Ég veit að það verður fórn en það er verðið. Ertu nógu hugrakkur til að leyfa mér að sjá páfuglinn þinn? Vertu unglingadraumurinn þinn í nótt. Uh-ha, ég sé þig. Það er ekki aftur snúið. Já, við náðum að hámarka kreditkortin okkar og vorum reknir út af barnum. Svo leyfðu mér að koma þér í afmælisfötin. Þú gætir orðið ástfanginn þegar þú hittir hana. Hafði heiminn í lófa þínum. Ekki láta mikilleikinn draga þig niður, ó, ó já. Nú erum við að tala um stjörnuspeki, fá neglurnar okkar, allt japanskt. Gerðu mig að Afródítu þinni.
<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>Fjölmiðlalisti
Vegna þess að margmiðlunarhluturinn hefur svo fáar byggingarkröfur geturðu líka notað þessa flokka á HTML-einingum á lista. Á <ul>eða <ol>, bættu við .list-unstyledtil að fjarlægja sjálfgefna listastíl vafrans og notaðu síðan .mediatil þín <li>. Eins og alltaf, notaðu biltól hvar sem þú þarft til að fínstilla.
-
Fjölmiðlahlutur sem byggir á lista
Allar stelpurnar mínar vintage Chanel elskan. Svo þú getur fengið kökuna þína. Í kvöld, í kvöld, í kvöld geng ég á lofti. Gleypa hægt niður óttann, já já. Vex hratt í eldingu. Svo heitt og þungt, 'Til dögun. Þetta ævintýri endar með riddara í skínandi herklæðum. Þungt er höfuðið sem ber kórónu.
-
Fjölmiðlahlutur sem byggir á lista
Kannski ástæðan fyrir því að allar dyr eru lokaðar. Því þegar þú ert minn, einu sinni ertu minn. Vertu unglingadraumurinn þinn í nótt. Þungt er höfuðið sem ber kórónu. Það er ekki einu sinni frí, ekkert að fagna. Fullkominn stormur, fullkominn stormur.
-
Fjölmiðlahlutur sem byggir á lista
Ertu nógu hugrakkur til að leyfa mér að sjá páfuglinn þinn? Það er ekki aftur snúið. Þetta er í síðasta skiptið sem þú segir, eftir síðustu línuna brýtur þú. Í eh-enda alls.
<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>