Objekt Media
Belgekirin û mînakên ji bo objeya medyayê ya Bootstrap ji bo avakirina hêmanên pir dubarekirî yên mîna şîroveyên blogê, tweet û yên wekî wan.
Mînak
Tişta medyayê arîkariya avakirina pêkhateyên tevlihev û dubare dike ku li wir hin medya li kêleka naverokê ku li dora naverokê ya navborî napêçe cih digire. Zêdeyî, ew bi saya flexbox-ê tenê bi du dersên pêwîst re vê yekê dike.
Li jêr mînakek yek tiştek medyayê ye. Tenê du ders hewce ne - pêçandî .media
û .media-body
dora naveroka we. Pevçûn û marjînalê vebijarkî dikare bi navgînên cîhê ve were kontrol kirin .
Sernavê medyayê
Ma hûn ê ji bo min jî heman tiştî bikin? Dem dema rûbirûbûna muzîkê ye ez êdî ne muza te me. Bihistiye ew xweş e, dadger bin û keçên min dê deng bidin. Ez dikarim fenîkek di hundurê xwe de hîs bikim. Bihuşt ji evîna me hesûd e, milyaket ji jor digirîn. Erê, tu min bibî utopyayê.
<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: Hêmanên hundurîn wekî hêmanên nerm nayên hesibandin
Internet Explorer 10-11 hêmanên hundurîn ên mîna girêdan an wêne (an ::before
û ::after
pseudo-hêman) wekî hêmanên nerm nade. Yekane çareserî ev e ku meriv display
nirxek ne-navxweyî saz bike (mînak, block
, inline-block
, an flex
). Em pêşniyar dikin ku .d-flex
yek ji karûbarên xweya pêşandana xwe wekî çareseriyek hêsan bikar bînin.
Çavkanî: Flexbugs li ser GitHub
Nesting
Tiştên medyayê dikarin bêsînor hêlîn bibin, her çend em ji we re pêşniyar dikin ku hûn li hin xalan rawestin. Cihê ku di .media
hundurê .media-body
objeyek medyayê ya dêûbav de ye.
Sernavê medyayê
Dema ku bombe dest pê dikin li eniya pêş radiwestin. Bihuşt ji evîna me hesûd e, milyaket ji jor digirîn. Nikarim li şûna we bi mîlyon zengilan. Kuro, dema tu bi min re bî ezê tama te bidim. Veger tune. Berî ku hûn min nas bikin ez baş bûm lê tişt hinekî giran bûn. Giran serê ku tacê li xwe dike.
Sernavê medyayê
Silav hezkirîno em seferê bikin. Belê, em milyaketan digirîn, ji jor ve baran dibarin. Ji bo pîrozkirinê tiştek baş bide we. Min zimanê xwe dixist û bêhna xwe digirt. Ez ê dilê te di jeansên min ên çermê teng de bihejînim. Gava ku ez bi tena serê xwe berbi lêdanek cûda ve dimeşim. Havînê piştî lîseyê gava ku me cara yekem hev dît. Hûn ewqas hîpnotîze dikin, ma hûn dikarin bibin şeytan? Ma hûn dikarin bibin milyaketek? Dem dema derxistina balonên mezin e. Difikirî ku ez îstîsna bûm. Bikinis, zucchinis, Martinis, 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>
Alignment
Medya di objeyek medyayê de dikare bi karûbarên flexbox-ê re li jor (xweserî), navîn, an dawiya .media-body
naveroka we were rêz kirin.
Çapemeniya top-aligned
Ez ê wê têxim komayê. Hûn sed sedeman didin, û hûn dibêjin hûn ê bi rastî biceribînin. Ji ber vê yekê ez bêdeng rûniştim, ez bi nermî razî bûm. Ji bo şerê taca min guncan e. Û di rojbûna min a 18emîn de me deqên lihevhatî girtin. Ji ber vê yekê très chic, erê, ew klasîkek e. Ez ji bo riya ku hindik çûyî amade me.
Ez li ser hewayê dimeşim (îşev). Lê li ser erdê. Tu orjînal î, nayê guhertin. Lê di jiyaneke din de ez ê bibûma keça te. Me ajot ber bi Cali ve û li peravê serxweş bûn. Em dikarin dansê bikin, heta ku em bimirin, ez û tu em ê her û her ciwan bin. We dît ku hûn li navenda bajêr strana Blues dibêjin.
<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>
Medyaya navendê
Ew ê wekî cemidankê sar bibe. Di dawiya her tiştî de. Mîna hingiv diteqiyam, min xetên xwe qezenc kir. Bikinis, zucchinis, Martinis, no weenies. Hêvîdarim ku we xwarinek saxlem girtiye. Em dikarin dansê bikin, heta ku em bimirin, ez û tu em ê her û her ciwan bin. Em jiyanê dijîn. Em rast dikin. Gotina li kolanê, te tiştek heye ku nîşanî min bide, min.
Dixwazin pêşandanê bi 3D, fîlimek bibînin. Dibêjin, bitirsin ku hûn ne wekî yên din in, evîndarê futurîst. Dilê xwe veke. Ji ber vê yekê ez bêdeng rûniştim, ez bi nermî razî bûm. Roja Înê şeva borî. Erê, ger hûn li balafira wê bin hûn bextewar in. Ez ê bibim diyariya te, ji bo pîrozkirinê tiştekî xweş bidim te.
<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>
Çapemeniya jêrîn-lihevkirî
Werin, bila rengên we biteqin. Ez dikarim vê ronahiya ku di hundurê min de ye hîs bikim. Tevahiya şevê ew dilîzin, strana te. Ji Tokyo heta Meksîkayê, heta Rio. Veger tune. Lê li ser erdê. Sêrbaz, rengîn, Birêz Sir, ee. DNA yên cûda, ew we fêm nakin.
Lê li ser erdê. Wê ew heye, je ne sais quoi, hûn pê dizanin. Ez nivîsên li ser dîwêr dibînim. Xort stûyê xwe dişkînin hewl didin ku piçekî bi dizî mêze bikin. Min bigire, min bigire. Dilê xwe veke. Difikirî ku ez îstîsna bûm. Boom, bum, bum. Deryaya Venice û Palm Springs, havîn her tişt e. Lêdanê paşde bînin. (Em çawa dikin)
<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>
Emir
Rêza naverokê di tiştên medyayê de bi guheztina HTML-ê bi xwe, an bi lê zêdekirina hin flexbox CSS-ya xwerû ya ku order
taybetmendiyê (ji jimareyek bijare ya we) destnîşan bikin, biguhezînin.
Objekt Media
Ez dizanim dê fedakarî hebe lê berdêla wê ev e. Ma tu têra xwe wêrek î ku ez tawusê xwe bibînim? Îşev xewna xweya ciwaniyê be. Uh-huh, ez te dibînim. Veger tune. Erê, me qertên xwe yên krediyê zêde kirin û ji bar hatin avêtin. Ji ber vê yekê bila ez te bi cilên rojbûna te bigirim. Dema ku hûn wê nas bikin dibe ku hûn evîndar bibin. Dinya di kefa destên te de bû. Nehêle mezinatî te bişkîne, oh, erê. Niha em bi stêrnasiyê re dipeyivin, neynûkên xwe digirin, hemî Japonî-y. Min bike Aphrodîta xwe.
<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>
Lîsteya medyayê
Ji ber ku objeya medyayê ewqas hindik hewcedariyên avahîsaziyê hene, hûn dikarin van dersan li ser hêmanên HTML-ê jî bikar bînin. Li ser xwe <ul>
an jî <ol>
, ji .list-unstyled
bo rakirina şêwazên navnîşa xwerû ya gerokê lê zêde bikin, û dûv re li ser s-ya xwe bicîh .media
bikin <li>
. Mîna her gav, li cîhê ku hewce be ji bo ahenga xweş bikêrhatî bikar bînin.
-
Lîsteya-based object media
Hemî keçên min pitikê Chanel vintage. Ji ber vê yekê hûn dikarin kekê xwe bistînin. Îşev, îşev, îşev, ez li hewa dimeşim. Hêdî hêdî tirsa xwe daqurtand, erê erê. Bi lez û bez di nav birûskê de mezin dibe. Ewqas germ û giran, 'Heta sibê. Ew çîroka ku bi şovalyeyekî bi zirxên biriqandî bi dawî dibe. Giran serê ku tacê li xwe dike.
-
Lîsteya-based object media
Dibe ku sedemek ku hemî derî girtî ne. Ji ber ku carekê tu yê min î, carekê tu yê min î. Îşev xewna xweya ciwaniyê be. Giran serê ku tacê li xwe dike. Ne cejn e, ne tiştekî pîrozkirinê ye. Bahoza bêkêmasî, bahozek bêkêmasî.
-
Lîsteya-based object media
Ma tu têra xwe wêrek î ku ez tawusê xwe bibînim? Veger tune. Ev cara dawî ye ku tu dibêjî, piştî rêza dawîn tu dişkê. Di dawiya her tiştî de.
<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>