in English

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 .mediave .media-bodyiçeriğinizin etrafı. İsteğe bağlı dolgu ve kenar boşluğu, boşluk yardımcı programları aracılığıyla kontrol edilebilir .

Placeholder 64x64
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

::beforeInternet Explorer 10-11, bağlantılar veya görüntüler ( veya ::aftersözde öğeler) gibi satır içi öğeleri esnek öğeler olarak işlemez . Tek geçici çözüm, satır içi olmayan bir displaydeğer (örneğin, block, inline-blockveya 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 .mediaiçine yuvalanmış olarak yerleştirin..media-body

Placeholder 64x64
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.

Placeholder 64x64
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.

Placeholder 64x64
Ü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>
Placeholder 64x64
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>
Placeholder 64x64
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

orderHTML'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.

Placeholder 64x64
<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>

  • Placeholder 64x64
    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.

  • Placeholder 64x64
    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.

  • Placeholder 64x64
    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>