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 .

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 class="mr-3" src="..." alt="Generic placeholder image">
  <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

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.
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 class="mr-3" src="..." alt="Generic placeholder image">
  <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="pr-3" href="#">
        <img src="..." alt="Generic placeholder image">
      </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.

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 class="align-self-start mr-3" src="..." alt="Generic placeholder image">
  <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>
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 class="align-self-center mr-3" src="..." alt="Generic placeholder image">
  <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>
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 class="align-self-end mr-3" src="..." alt="Generic placeholder image">
  <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.
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 class="ml-3" src="..." alt="Generic placeholder image">
</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>

  • 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.
  • 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.
  • 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 class="mr-3" src="..." alt="Generic placeholder image">
    <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 class="mr-3" src="..." alt="Generic placeholder image">
    <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 class="mr-3" src="..." alt="Generic placeholder image">
    <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>