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 .
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
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.
Ü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>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>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.<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>
-
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. -
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. -
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>