Önyükleme Medya Nesneleri
Medya Nesneleri
Bootstrap, medya nesnelerini (görüntüler veya videolar gibi) bazı içeriklerin soluna veya sağına hizalamak için kolay bir yol sağlar. Bu, blog yorumlarını, tweet'leri vb. görüntülemek için kullanılabilir:
John Doe 19 Şubat 2016'da yayınlandı
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Jane Doe 20 Şubat 2016'da yayınlandı
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Alicia Keyes 25 Şubat 2016'da yayınlandı
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı. Gösteriden önce suç veya kolaylık korkusu yok.
Temel Medya Nesnesi
John Doe
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
John Doe
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Örnek
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
Örnek açıklama
.mediaMedya nesneleri için bir kap oluşturmak üzere sınıfla birlikte bir <div> öğesi kullanın .
.media-leftMedya nesnesini (görüntü) sola hizalamak için sınıfı veya sağa hizalamak için sınıfı kullanın .media-right.
Resmin yanında görünmesi gereken metin, class=" media-body" olan bir kap içine yerleştirilir.
.media-headingEk olarak, başlıklar için kullanabilirsiniz .
Üst, Orta veya Alt Hizalama
Medya nesnesi ayrıca media-top, media-middleveya media-bottomsınıfı ile üst, orta veya alt hizalı olabilir:
Medya Üstü
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Medya Orta
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Medya Alt
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Örnek
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Medya Nesnelerini Yerleştirme
Medya nesneleri de iç içe yerleştirilebilir (bir medya nesnesinin içindeki bir medya nesnesi):
Örnek
John Doe 19 Şubat 2016'da yayınlandı
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
John Doe 20 Şubat 2016'da yayınlandı
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
John Doe 21 Şubat 2016'da yayınlandı
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Yerleştirmenin Başka Bir Örneği
Örnek
John Doe 19 Şubat 2016'da yayınlandı
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
John Doe 20 Şubat 2016'da yayınlandı
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
John Doe 21 Şubat 2016'da yayınlandı
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Jane Doe 20 Şubat 2016'da yayınlandı
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.
Jane Doe 19 Şubat 2016'da yayınlandı
Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı.