Bootstrap objek multimedia
Dalam bab ini kita akan menjelaskan obyek multimedia Bootstrap (Media Object). gaya objek ini abstrak yang digunakan untuk membuat berbagai jenis komponen (misalnya: blog komentar), kita dapat menggunakan foto-teks dalam komponen, gambar dapat dibiarkan dibenarkan atau kanan dibenarkan. objek media dapat dicapai dengan kode kurang dan media teks objek berebut.
Ringan objek media ditandai karakteristik mudah untuk memperpanjang melalui kelas aplikasi tag sederhana untuk mencapai. Anda dapat menambahkan dua bentuk berikut dalam tag HTML untuk mengatur objek media:
- .media: Kelas ini memungkinkan objek media dalam multimedia (gambar, video, audio) melayang ke blok konten ke kiri atau kanan.
- .media-list: Jika Anda membutuhkan daftar berbagai elemen adalah bagian dari daftar unordered, Anda dapat menggunakan kelas.Komentar dapat digunakan untuk daftar dan daftar artikel.
Mari kita lihat informasi berikut tentang media standar objek misalnya .media:
contoh
<Div class = "media">
<A class = "pull-kiri" href = "#">
<Img class = "Media-objek" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "objek media">
</ A>
<Div class = "Media-body">
<H4 class = "Media-pos"> title Media </ h4> Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. </ Div>
</ Div>
<Div class = "media">
<A class = "pull-kiri" href = "#">
<Img class = "Media-objek" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "objek media">
</ A>
<Div class = "Media-body">
<H4 class = "Media-pos"> title Media </ h4> Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. <Div class = "media">
<A class = "pull-kiri" href = "#">
<Img class = "Media-objek" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "objek media">
</ A>
<Div class = "Media-body">
<H4 class = "Media-pos"> title Media </ h4> Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. </ Div>
</ Div>
</ Div>
</ Div>
Coba »
Hasilnya adalah sebagai berikut:
Mari kita lihat contoh berikut daftar media benda .media-daftar:
contoh
<Ul class = "Media-daftar">
<Li class = "media">
<A class = "pull-kiri" href = "#">
<Img class = "Media-objek" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generik placeholder gambar">
</ A>
<Div class = "Media-body">
<H4 class = "Media-pos"> title Media </ h4>
<P> Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. </ P>
<! - Objek media Bersarang ->
<Div class = "media">
<A class = "pull-kiri" href = "#">
<Img class = "Media-objek" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generik placeholder gambar">
</ A>
<Div class = "Media-body">
<H4 class = "Media-pos"> Media bersarang menuju </ h4> Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. <! - Objek media Bersarang ->
<Div class = "media">
<A class = "pull-kiri" href = "#">
<Img class = "Media-objek" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generik placeholder gambar">
</ A>
<Div class = "Media-body">
<H4 class = "Media-pos"> Media bersarang menuju </ h4> Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. </ Div>
</ Div>
</ Div>
</ Div>
<! - Objek media Bersarang ->
<Div class = "media">
<A class = "pull-kiri" href = "#">
<Img class = "Media-objek" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generik placeholder gambar">
</ A>
<Div class = "Media-body">
<H4 class = "Media-pos"> Media bersarang menuju </ h4> Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. </ Div>
</ Div>
</ Div>
</ Li>
<Li class = "media">
<A class = "pull-benar" href = "#">
<Img class = "Media-objek" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "generik placeholder gambar">
</ A>
<Div class = "Media-body">
<H4 class = "Media-pos"> title Media </ h4> Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. Ini adalah beberapa contoh teks. </ Div>
</ Li>
</ Ul>
Coba »
Hasilnya adalah sebagai berikut:
