Objek Media Bootstrap
Objek Media
Bootstrap menyediakan cara mudah untuk menyelaraskan objek media (seperti gambar atau video) ke kiri atau ke kanan beberapa konten. Ini dapat digunakan untuk menampilkan komentar blog, tweet, dan sebagainya:
John Doe Diposting pada 19 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Jane Doe Diposting pada 20 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Alicia Keyes Diposting pada 25 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat. Tidak ada rasa takut akan kejahatan atau kenyamanan sebelum pertunjukan.
Objek Media Dasar
John Doe
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
John Doe
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Contoh
<!-- 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>
Contoh dijelaskan
Gunakan elemen <div> dengan .mediakelas untuk membuat wadah untuk objek media.
Gunakan .media-leftkelas untuk meratakan objek media (gambar) ke kiri, atau .media-rightkelas untuk meratakannya ke kanan.
Teks yang seharusnya muncul di sebelah gambar, ditempatkan di dalam wadah dengan class=" media-body".
Selain itu, Anda dapat menggunakan .media-headinguntuk heading.
Penjajaran Atas, Tengah atau Bawah
Objek media juga dapat disejajarkan atas, tengah, atau bawah dengan media-top, media-middleatau media-bottomkelas:
Atas Media
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Media Tengah
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Bawah Media
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Contoh
<!-- 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>
Objek Media Bersarang
Objek media juga dapat disarangkan (objek media di dalam objek media):
Contoh
John Doe Diposting pada 19 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
John Doe Diposting pada 20 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
John Doe Diposting pada 21 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Contoh lain dari Bersarang
Contoh
John Doe Diposting pada 19 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
John Doe Diposting pada 20 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
John Doe Diposting pada 21 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Jane Doe Diposting pada 20 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Jane Doe Diposting pada 19 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.