Medya nesnesi
Bootstrap'in medya nesnesinin blog yorumları, tweet'ler ve benzerleri gibi yüksek oranda tekrar eden bileşenler oluşturması için belgeler ve örnekler.
Örnek
Medya nesnesi , söz konusu medyayı sarmayan içeriğin yanında bazı medyaların konumlandırıldığı karmaşık ve tekrarlayan bileşenler oluşturmaya yardımcı olur. Artı, bunu flexbox sayesinde sadece iki gerekli sınıfla yapıyor.
Aşağıda tek bir medya nesnesi örneği verilmiştir. Yalnızca iki sınıf gereklidir: sarma .media
ve .media-body
içeriğinizin etrafı. İsteğe bağlı dolgu ve kenar boşluğu, boşluk yardımcı programları aracılığıyla kontrol edilebilir .
Medya başlığı
Aynısını benim için de yapar mısın? Müzikle yüzleşme zamanı, artık senin ilham perin değilim. Güzel olduğunu duydum, yargıç ol ve kızlarım oy kullanacak. İçimde bir anka kuşu hissedebiliyorum. Cennet aşkımızı kıskanıyor, yukarıdan melekler ağlıyor. Evet, beni ütopyaya götürüyorsun.
<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: Satır içi öğeler esnek öğeler olarak ele alınmaz
::before
Internet Explorer 10-11, bağlantılar veya görüntüler ( veya ::after
sözde öğeler) gibi satır içi öğeleri esnek öğeler olarak işlemez . Tek geçici çözüm, satır içi olmayan bir display
değer (örneğin, block
, inline-block
veya flex
) ayarlamaktır. Kolay bir düzeltme olarak görüntüleme yardımcı programlarımızdan.d-flex
birini kullanmanızı öneririz .
Kaynak: GitHub'daki Flexbugs
yuvalama
Medya nesneleri sonsuz sayıda iç içe olabilir, ancak bir noktada durmanızı öneririz. Bir üst medya nesnesinin .media
içine yuvalanmış olarak yerleştirin..media-body
Medya başlığı
Bombalar düşmeye başladığında cephede durmak. Cennet aşkımızı kıskanıyor, yukarıdan melekler ağlıyor. Seni bir milyon yüzükle değiştiremem. Oğlum, benimle olduğun zaman sana bir tat vereceğim. Geri dönüş yok. Benimle tanışmadan önce iyiydim ama işler biraz ağırdı. Ağır, tacı giyen kafadır.
Medya başlığı
Selamlar sevdiklerim hadi bir yolculuğa çıkalım. Evet, gökten yeryüzüne yağdıran melekleri ağlatıyoruz. Sana kutlamak için iyi bir şey ver. Dilimi ısırır, nefesimi tutardım. Dar kot pantolonumla kalbini hızlandıracağım. Farklı bir ritme tek başıma yürürken. Liseden sonra ilk tanıştığımız yaz. Çok hipnotize edicisin, şeytan olabilir misin? Bir melek olabilir misin? Büyük balonları çıkarmanın zamanı geldi. İstisna olduğumu düşündüm. Bikiniler, kabaklar, Martiniler, sosis yok.
<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>
hizalama
Bir medya nesnesindeki medya, flexbox yardımcı programları ile içeriğinizin üstüne (varsayılan), ortasına veya sonuna hizalanabilir .media-body
.
Üst hizalanmış medya
Onu komaya sokacağım. Yüz tane neden veriyorsun ve gerçekten deneyeceğini söylüyorsun. Bu yüzden sessizce oturdum, kibarca kabul ettim. En büyük savaşım için hazırlanıyorum. Ve 18. Doğum günümde eşleşen dövmelerimiz oldu. Çok şık, evet, o bir klasik. Daha az seyahat edilen yol için hazırım.
Havada yürüyorum (bu gece). Ama yere kadar. Sen orijinalsin, değiştirilemez. Ama başka bir hayatta senin kızın olurdum. Cali'ye gittik ve sahilde sarhoş olduk. Ölene kadar dans edebiliriz, sen ve ben sonsuza kadar genç kalacağız. Seni şehir merkezinde Blues söylerken gördüm.
<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>
Ortaya hizalanmış medya
Dondurucu gibi soğuyacak. Her şeyin sonunda. Arı gibi sokarak çizgimi kazandım. Bikiniler, kabaklar, Martiniler, sosis yok. Umarım sağlıklı bir iştahınız vardır. Ölene kadar dans edebiliriz, sen ve ben sonsuza kadar genç kalacağız. Hayatı yaşıyoruz. Doğru yapıyoruz. Sokakta haber var, bana gösterecek bir şeyin var.
Gösteriyi bir film olan 3D olarak görmek istiyorum. Korkma diğerleri gibi değilsin derler, fütürist aşık. Kalbini aç. Bu yüzden sessizce oturdum, kibarca kabul ettim. Geçen Cuma gecesi. Evet, onun uçağındaysanız şanslısınız. Hediyen olacağım, sana kutlayacak güzel bir şey vereceğim.
<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>
Alttan hizalanmış medya
Haydi, renklerin patlamasına izin ver. İçimdeki bu ışığı hissedebiliyorum. Bütün gece çalıyorlar, senin şarkın. Tokyo'dan Meksika'ya, Rio'ya. Geri dönüş yok. Ama yere kadar. Büyülü, renkli, Bay Gizem, ee. Farklı DNA, seni anlamıyorlar.
Ama yere kadar. Ona sahip, je ne sais quoi, biliyorsun. Duvardaki yazıyı görebiliyorum. Oğlanlar boyunlarını kırarlar, küçük bir göz atmaya çalışırlar. Al beni, al beni. Kalbini aç. İstisna olduğumu düşündüm. Bum, bum, bum. Venedik sahili ve Palm Springs, yaz her şeydir. Tempoyu geri getir. (Biz böyle yaparız)
<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
order
HTML'nin kendisini değiştirerek veya özelliği ayarlamak için (seçtiğiniz bir tamsayıya) bazı özel esnek kutu CSS ekleyerek medya nesnelerindeki içeriğin sırasını değiştirin .
Medya nesnesi
Biliyorum fedakarlık olacak ama bedeli bu. Tavus kuşunu görmeme izin verecek kadar cesur musun? Bu gece rüyanda ol. Seni görüyorum. Geri dönüş yok. Evet, kredi kartlarımızı doldurduk ve bardan atıldık. O zaman sana doğum günü kıyafetini giydirmeme izin ver. Onunla tanıştığında aşık olabilirsin. Dünya avucunuzun içindeydi. Büyüklüğün seni hayal kırıklığına uğratmasına izin verme, oh, oh evet. Şimdi astroloji konuşuyoruz, tırnaklarımızı yaptırıyoruz, hepsi Japonca. Beni Afrodit'in yap.
<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>
Medya listesi
Medya nesnesinin çok az yapısal gereksinimi olduğundan, bu sınıfları liste HTML öğelerinde de kullanabilirsiniz. <ul>
veya üzerinde , tarayıcı varsayılan liste stillerini kaldırmak için öğesini <ol>
ekleyin ve ardından s'nize uygulayın . Her zaman olduğu gibi, ince ayar yapmak için gereken her yerde boşluk bırakma yardımcı programlarını kullanın..list-unstyled
.media
<li>
-
Liste tabanlı medya nesnesi
Bütün kızlarım eski Chanel bebeğim. Böylece pastanızı yiyebilirsiniz. Bu gece, bu gece, bu gece, havada yürüyorum. Korkumu yavaşça yutuyorum, evet evet. Hızla büyüyen bir şimşek gibi. Çok sıcak ve ağır, Şafağa kadar. Parlayan zırhlı bir şövalyeyle biten o peri masalı. Ağır, tacı giyen kafadır.
-
Liste tabanlı medya nesnesi
Belki de tüm kapıların kapalı olmasının bir nedeni. Çünkü bir kere benimsin, bir kere benimsin. Bu gece rüyanda ol. Ağır, tacı giyen kafadır. Bayram bile değil, kutlanacak bir şey yok. Kusursuz fırtına, kusursuz fırtına.
-
Liste tabanlı medya nesnesi
Tavus kuşunu görmeme izin verecek kadar cesur musun? Geri dönüş yok. Bu son söylediğin son satırdan sonra. Her şeyin sonunda.
<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>