Ughjettu media
Documentazione è esempi per l'ughjettu media di Bootstrap per custruisce cumpunenti altamente ripetitivi cum'è cumenti di blog, tweets, è simili.
Esempiu
L' ughjettu media aiuta à custruisce cumpunenti cumplessi è ripetitivi induve certi media sò posizionati à fiancu à u cuntenutu chì ùn si mette micca intornu à tali media. In più, face questu cù solu duie classi richieste grazia à flexbox.
Quì sottu hè un esempiu di un oggettu media unicu. Solu duie classi sò richieste - l'imballaggio .media
è u .media-body
circondu di u vostru cuntenutu. L'imbottitura opzionale è u margine ponu esse cuntrullati attraversu l' utilità di spaziatura .
Titulu media
Farai u listessu per mè ? Hè ora di affruntà a musica ùn sò più a to musa. Sentu chì hè bella, sia u ghjudice è e mo ragazze anu da piglià un votu. Sentu un fenice in mè. U celu hè ghjilosu di u nostru amore, l'anghjuli pienghjenu da sopra. Iè, mi porta à l'utopia.
<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: L'elementi in linea ùn sò micca trattati cum'è elementi flex
Internet Explorer 10-11 ùn rende micca elementi inline cum'è ligami o imagine (o ::before
è ::after
pseudo-elementi) cum'è elementi flessibili. L'unica soluzione hè di stabilisce un valore micca in linea display
(per esempiu, block
, inline-block
, o flex
). Suggeremu di utilizà .d-flex
, una di e nostre utilità di visualizazione , cum'è una correzione faciule.
Fonte: Flexbugs nantu à GitHub
Nidificazione
L'oggetti di media ponu esse annidati infinitamente, ancu s'ellu vi suggerisce di firmà in un certu puntu. Mettite nidificatu .media
ind'è .media-body
un oggettu media parent.
Titulu media
Standing in prima linea quandu e bombe cumincianu à cascà. U celu hè ghjilosu di u nostru amore, l'anghjuli pienghjenu da sopra. Ùn pò micca rimpiazzà cun un milione di anelli. Ragazzo, quandu site cun mè vi daraghju un gustu. Ùn ci hè micca ritornu. Prima di scuntrà mi stava bè, ma e cose eranu un pocu pesanti. Pesante hè a testa chì porta a corona.
Titulu media
Saluti cari, facemu un viaghju. Iè, facemu pianghje l'anghjuli, piovendu nantu à a terra da sopra. Dà qualcosa di bonu per celebrà. Mi mordava a lingua è tene u fiatu. Aghju da fà u vostru core in corsa in i mo jeans attillati. Mentre marchjendu solu à un ritmu diversu. L'estiu dopu à u liceu quandu avemu scontru prima. Sò cusì ipnotizzante, puderebbe esse u diavulu? Pudete esse un anghjulu? Hè u tempu di caccià i grandi palloncini. Pensu chì eru l'eccezzioni. Bikinis, zucchini, Martinis, senza 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>
Allineamentu
I media in un oggettu media pò esse allinati cù l'utilità di flexbox à a cima (predeterminata), à mezu, o à a fine di u vostru .media-body
cuntenutu.
Media allineati in cima
L'aghju da mette in coma. Dai un centu di motivi perchè, è dici chì pruverai veramente. Allora aghju pusatu tranquillamente, accunsentutu educatamente. Adupratu per a mo battaglia di corona. È u mo 18 anniversariu avemu avutu tatuaggi currispondenti. So très chic, sì, hè un classicu. Sò prontu per a strada menu viaghjata.
Camminu in aria (sta sera). Ma in terra. Sì uriginale, ùn pò micca esse rimpiazzatu. Ma in un'altra vita saria a to zitella. Avemu guidatu à Cali è ci sbuchjamu nantu à a spiaggia. Pudemu ballà, finu à a morte, tu è eiu, seremu ghjovani per sempre. Vi hà vistu in u centru di cantà u 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>
Media allineati à u centru
Ella diventerà fredda cum'è un congelatore. À a fine di tuttu. Punghjendu cum'è un'ape aghju guadagnatu i mo strisce. Bikinis, zucchini, Martinis, senza weenies. Spergu chì avete un appetite sanu. Pudemu ballà, finu à a morte, tu è eiu, seremu ghjovani per sempre. Vivemu a vita. Facemu bè. Parola nantu à a strada, avete qualcosa da mustrà, mè.
Vulete vede u spettaculu in 3D, un filmu. Dicenu, a paura chì ùn site micca cum'è l'altri, amante futuristicu. Aprite u vostru core. Allora aghju pusatu tranquillamente, accunsentutu educatamente. L'ultimu venneri sera. Iè, site furtunatu sè site in u so aviò. Seraghju u vostru rigalu, vi daraghju qualcosa di bonu per celebrà.
<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 allineati in fondu
Andate, lasciate chì i vostri culori scoppianu. Sentu sta luce chì hè in mè. Tutta a notte sunanu, a to canzone. Da Tokyo à Messicu, à Rio. Ùn ci hè micca ritornu. Ma in terra. Màgicu, culuritu, sgiò misteru, ee. Diversi DNA, ùn vi capiscenu micca.
Ma in terra. Ella l'hà, je ne sais quoi, sapete. Possu vede a scrittura nantu à u muru. I picciotti si rompenu u collu pruvate à fà un pocu di sneak peek. Pigliami, ta-ta-portami. Aprite u vostru core. Pensu chì eru l'eccezzioni. Boom, bum, bum. A spiaggia di Venezia è Palm Springs, l'estiu hè tuttu. Riporta u ritmu. (Hè cumu facemu)
<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>
Ordine
Cambia l'ordine di u cuntenutu in l'uggetti media mudificà l'HTML stessu, o aghjustendu qualchì CSS flexbox customizatu per stabilisce a order
pruprietà (à un interu di a vostra scelta).
Ughjettu media
Sò chì ci sarà u sacrifiziu, ma hè u prezzu. Sì abbastanza curaggiu per fà vede u to pavone ? Siate u vostru sognu d'adulescente sta sera. Uh-huh, ti vecu. Ùn ci hè micca ritornu. Iè, avemu maxisatu e nostre carte di creditu è sò stati cacciati da u bar. Allora lasciami mette in u vostru vestitu di anniversariu. Pudete innamurà quandu a scuntrà. Avia u mondu in u palmu di e vostre mani. Ùn lasciate micca chì a grandezza ti abbatti, oh, oh yeah. Avà parlemu d'astrologia, ottenendu i nostri unghie, tutti i Japanese-y. Fate di mè a vostra 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 di media
Perchè l'ughjettu di media hà cusì pochi requisiti strutturali, pudete ancu aduprà sti classi nantu à l'elementi HTML di lista. Nant'à u vostru <ul>
o <ol>
, aghjunghje u .list-unstyled
per sguassà qualsiasi stili di lista predeterminati di u navigatore, è dopu appiicà .media
à u vostru <li>
s. Cum'è sempre, aduprate l'utilità di spaziatura induve hè necessariu per sintonizà.
-
Ughjettu media basatu in lista
Tutte e mo ragazze vintage Chanel baby. Allora pudete avè u vostru pane. Stasera, stasera, stasera, camminu in aria. Lentamente inghiottì a mo paura, sì, sì. Cresce rapidamente in un fulmine. Cusì caldu è pisanti, finu à l'alba. Ddu conte di fata chì finisci cù un cavaliere in armatura brillanti. Pesante hè a testa chì porta a corona.
-
Ughjettu media basatu in lista
Forse un mutivu perchè tutte e porte sò chjuse. Perchè una volta chì site mio, quandu site mio. Siate u vostru sognu d'adulescente sta sera. Pesante hè a testa chì porta a corona. Ùn hè mancu una festa, nunda di celebrà. Una tempesta perfetta, tempesta perfetta.
-
Ughjettu media basatu in lista
Sì abbastanza curaggiu per fà vede u to pavone ? Ùn ci hè micca ritornu. Questa hè l'ultima volta chì dite, dopu l'ultima linea chì rompe. À a fine di tuttu.
<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>