Ohun elo media
Iwe ati awọn apẹẹrẹ fun ohun elo media Bootstrap lati ṣe agbero awọn ohun elo atunwi giga bii awọn asọye bulọọgi, awọn tweets, ati bii.
Apeere
Ohun media n ṣe iranlọwọ lati kọ idiju ati awọn paati atunwi nibiti diẹ ninu awọn media wa ni ipo lẹgbẹẹ akoonu ti ko yika ni ayika media wi. Pẹlupẹlu, o ṣe eyi pẹlu awọn kilasi meji nikan ti o nilo ọpẹ si flexbox.
Ni isalẹ jẹ apẹẹrẹ ti ohun elo media kan. Awọn kilasi meji nikan ni o nilo — murasilẹ .mediaati agbegbe .media-bodyakoonu rẹ. Padding iyan ati ala le jẹ iṣakoso nipasẹ awọn ohun elo aye .
Media akori
Ṣe iwọ yoo ṣe kanna fun mi? O to akoko lati koju orin naa Emi kii ṣe muse rẹ mọ. Gbọ pe o lẹwa, jẹ onidajọ ati awọn ọmọbirin mi yoo gba ibo kan. Mo le rilara phoenix kan ninu mi. Orun njowu ife wa, Angeli nsokun lat‘oke wa. Bẹẹni, o mu mi lọ si 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: Awọn eroja inline ko ṣe itọju bi awọn ohun kan rọ
Internet Explorer 10-11 ko ṣe awọn eroja inline gẹgẹbi awọn ọna asopọ tabi awọn aworan (tabi ::beforeati ::afterawọn eroja-ara-ara) bi awọn ohun kan rọ. Iṣeduro nikan ni lati ṣeto iye ti kii ṣe inline display(fun apẹẹrẹ, block, inline-block, tabi flex). A daba lilo .d-flex, ọkan ninu awọn ohun elo ifihan wa , bi atunṣe irọrun.
Orisun: Flexbugs lori GitHub
Itẹle
Awọn nkan media le jẹ itẹ-ẹiyẹ ailopin, botilẹjẹpe a daba pe o duro ni aaye kan. Gbe iteeye .medialaarin awọn .media-bodyti a obi ohun media.
Media akori
Duro ni iwaju iwaju nigbati awọn bombu bẹrẹ lati ṣubu. Orun njowu ife wa, Angeli nsokun lat‘oke wa. Ko le ropo o pẹlu a million oruka. Ọmọkunrin, nigbati o ba wa pẹlu mi Emi yoo fun ọ ni itọwo. Ko si lilọ pada. Ṣaaju ki o to pade mi Mo wa dara ṣugbọn awọn nkan wuwo pupọ. Eru ni ori ti o gbe ade.
Media akori
Ẹ kí àwọn olólùfẹ́ ẹ jẹ́ kí a rìnrìn àjò. Bẹ́ẹ̀ ni, àwa ń mú kí àwọn áńgẹ́lì kígbe, tí òjò rọ̀ sórí ilẹ̀ ayé láti òkè wá. Fun ọ ni nkan ti o dara lati ṣe ayẹyẹ. Mo máa ń bu ahọ́n mi jẹ, tí mo sì máa ń pa mí mọ́. Emi ni ma gba okan re ije ninu ara mi sokoto-ju. Bi mo ti rin nikan si lilu ti o yatọ. Ooru lẹhin ile-iwe giga nigba ti a akọkọ pade. O n ṣe apanirun, ṣe o le jẹ eṣu? Ṣe o le jẹ angẹli? O to akoko lati mu awọn fọndugbẹ nla jade. Ro wipe mo ti wà awọn sile. Bikinis, zucchini, Martinis, ko si awọn ẹiyẹ.
<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>Titete
Media ni ohun media kan le ni ibamu pẹlu awọn ohun elo flexbox si oke (aiyipada), aarin, tabi opin .media-bodyakoonu rẹ.
Top-aligned media
Emi yoo fi i sinu coma. O fun ọgọrun idi idi, ati pe o sọ pe iwọ yoo gbiyanju gaan. Nitorina ni mo ṣe joko ni idakẹjẹ, gba pẹlu ọwọ. Ti o baamu fun ogun ade mi. Ati ni ojo ibi 18th mi a ni awọn tatuu ti o baamu. Nitorina très yara, bẹẹni, o jẹ Ayebaye kan. Mo ṣetan fun ọna ti o kere si irin-ajo.
Mo n rin lori afefe (alẹ oni). Sugbon si isalẹ lati ilẹ ayé. O jẹ atilẹba, ko le paarọ rẹ. Ṣugbọn ni igbesi aye miiran Emi yoo jẹ ọmọbirin rẹ. A wakọ lọ si Cali o si mu yó lori eti okun. A le jo, titi a o fi ku, iwọ ati emi, yoo jẹ ọdọ lailai. Ri o aarin ilu orin awọn 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 ti o ni ibamu si aarin
Yoo di tutu bi firisa. Ni eh-opin gbogbo rẹ. Tita bi oyin Mo gba awọn ila mi. Bikinis, zucchini, Martinis, ko si awọn ẹiyẹ. Mo nireti pe o ni ounjẹ to ni ilera. A le jo, titi a o fi ku, iwọ ati emi, yoo jẹ ọdọ lailai. A n gbe aye. A n ṣe o tọ. Ọrọ ni opopona, o ni nkankan lati fihan mi, mi.
Fẹ lati wo ifihan ni 3D, fiimu kan. Wọn sọ pe, bẹru pe iwọ ko dabi awọn miiran, ololufẹ ọjọ iwaju. Ṣii ọkan rẹ silẹ. Nitorina ni mo ṣe joko ni idakẹjẹ, gba pẹlu ọwọ. Ale ojo Jimo ti o koja. Bẹẹni, o ni orire ti o ba wa lori ọkọ ofurufu rẹ. Emi yoo jẹ ẹbun rẹ, fun ọ ni nkan ti o dara lati ṣe ayẹyẹ.
<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>Awọn media ibamu-isalẹ
Wa, jẹ ki awọn awọ rẹ ti nwaye. Mo le ri imole yi ti o wa ninu mi. Ni gbogbo oru ni wọn nṣere, orin rẹ. Lati Tokyo si Mexico, si Rio. Ko si lilọ pada. Sugbon si isalẹ lati ilẹ ayé. Magical, lo ri, Ogbeni Mystery, ee. DNA ti o yatọ, wọn ko loye rẹ.
Sugbon si isalẹ lati ilẹ ayé. O ni iyẹn, je ko si wi, o mọ o. Mo ti le ri awọn kikọ lori ogiri. Awọn ọmọkunrin fọ ọrùn wọn try'na lati rarako kekere kan ajiwo yoju. Gba mi, ta-ta-gba mi. Ṣii ọkan rẹ silẹ. Ro wipe mo ti wà awọn sile. Ariwo, ariwo, ariwo. Okun Venice ati Palm Springs, igba ooru jẹ ohun gbogbo. Mu lilu naa pada. (Eyi ni bi a ṣe ṣe)
<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>Bere fun
Yi aṣẹ akoonu pada ninu awọn nkan media nipa yiyipada HTML funrararẹ, tabi nipa fifi diẹ ninu apoti flexbox CSS lati ṣeto ohun- orderini naa (si odidi ti yiyan rẹ).
Ohun elo media
Mo mo pe ebo yoo wa sugbon iye owo niyen. Ṣe o ni igboya to lati jẹ ki n rii peacock rẹ? Jẹ rẹ odomobirin ala lalẹ. Uh-huh, Mo ri ẹ. Ko si lilọ pada. Bẹẹni, a ti pọ si awọn kaadi kirẹditi wa ati pe a gba jade kuro ninu igi. Nitorinaa jẹ ki n gba ọ ni aṣọ ọjọ-ibi rẹ. O le ṣubu ni ifẹ nigbati o ba pade rẹ. Ní aye ni ọpẹ ti ọwọ rẹ. Maṣe jẹ ki titobi nla rẹ silẹ, oh, Bẹẹni. Bayi a sọrọ Afirawọ, gbigba wa eekanna ṣe, gbogbo Japanese-y. Ṣe mi ni Aphrodite rẹ.
<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>Media akojọ
Nitoripe ohun elo media ni awọn ibeere igbekalẹ diẹ, o tun le lo awọn kilasi wọnyi lori atokọ awọn eroja HTML. Lori rẹ <ul>tabi <ol>, ṣafikun .list-unstyledlati yọ eyikeyi awọn aṣa atokọ aiyipada aṣawakiri kuro, lẹhinna kan .mediasi awọn <li>s rẹ. Gẹgẹbi nigbagbogbo, lo awọn ohun elo aye nibikibi ti o nilo lati tune.
-
Atokọ-orisun media nkan
Gbogbo mi odomobirin ojoun Chanel omo. Nitorina o le ni akara oyinbo rẹ. Lalẹ oni, lalẹ oni, lalẹ oni, Mo n rin lori afẹfẹ. Nrọra gbe ibẹru mi mì, bẹẹni bẹẹni. Ti ndagba ni iyara sinu boluti monomono. Gbona ati eru, 'Titi di aro. Ti o iwin itan ipari pẹlu kan knight ni didan ihamọra. Eru ni ori ti o gbe ade.
-
Atokọ-orisun media nkan
Boya idi kan ti gbogbo awọn ilẹkun ti wa ni pipade. Nitori ni kete ti o ba jẹ temi, ni kete ti o ba jẹ temi. Jẹ rẹ odomobirin ala lalẹ. Eru ni ori ti o gbe ade. Kii ṣe isinmi paapaa, ko si nkankan lati ṣe ayẹyẹ. Iji pipe, iji pipe.
-
Atokọ-orisun media nkan
Ṣe o ni igboya to lati jẹ ki n rii peacock rẹ? Ko si lilọ pada. Eyi ni akoko ikẹhin ti o sọ, lẹhin ila ti o kẹhin ti o fọ. Ni eh-opin gbogbo rẹ.
<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>