Source

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ığı
Cras, amet nibh libero, gravida nulla'da oturuyor. Sıfır vel metus scelerisque ante sollicitudin. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </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ığı
Cras, amet nibh libero, gravida nulla'da oturuyor. Sıfır vel metus scelerisque ante sollicitudin. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
Placeholder 64x64
Medya başlığı
Cras, amet nibh libero, gravida nulla'da oturuyor. Sıfır vel metus scelerisque ante sollicitudin. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." class="mr-3" alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </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

Cras, amet nibh libero, gravida nulla'da oturuyor. Sıfır vel metus scelerisque ante sollicitudin. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus.

<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>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
Ortaya hizalanmış medya

Cras, amet nibh libero, gravida nulla'da oturuyor. Sıfır vel metus scelerisque ante sollicitudin. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus.

<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>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
Alttan hizalanmış medya

Cras, amet nibh libero, gravida nulla'da oturuyor. Sıfır vel metus scelerisque ante sollicitudin. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus.

<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>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</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
Cras, amet nibh libero, gravida nulla'da oturuyor. Sıfır vel metus scelerisque ante sollicitudin. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
Placeholder 64x64
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </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
    Cras, amet nibh libero, gravida nulla'da oturuyor. Sıfır vel metus scelerisque ante sollicitudin. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
  • Placeholder 64x64
    Liste tabanlı medya nesnesi
    Cras, amet nibh libero, gravida nulla'da oturuyor. Sıfır vel metus scelerisque ante sollicitudin. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
  • Placeholder 64x64
    Liste tabanlı medya nesnesi
    Cras, amet nibh libero, gravida nulla'da oturuyor. Sıfır vel metus scelerisque ante sollicitudin. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.
<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>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </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>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </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>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>