Di halaman web, gambar ada di sebelah kiri dan konten diatur di sebelah kanan, yang merupakan efek yang sangat umum. Ini juga merupakan objek media. Ini adalah gaya abstrak yang dapat digunakan untuk membangun berbagai jenis komponen. File versi yang sesuai dalam kerangka bootstrap adalah sebagai berikut:
Kurang: Media.Less
Sass: _media.scss
Objek media umumnya muncul dalam kelompok, dan sekelompok objek media umumnya mencakup bagian -bagian berikut:
1. Wadah Objek Media: Digunakan untuk mengakomodasi semua isi objek media. Nama kelas harus digunakan pada wadah. media
2. Objek objek media: Umumnya gambar, dan class.media-objek diperlukan.
3. Subjek objek media: Ini adalah konten subjek dari objek media. Itu bisa berupa elemen apa pun dan membutuhkan penggunaan kelas.
4. Judul Objek Media: Judul yang digunakan untuk menggambarkan objek media, diperlukan class.media-heading.
Selain itu, kelas .Pull-left dan .Pull-right sering digunakan dalam kerangka bootstrap untuk mengontrol metode mengambang objek dalam objek media.
Berikut adalah kode sumber CSS mereka:
.media, .media-body {overflow: tersembunyi; zoom: 1;}. media, .media .media {margin-top: 15px;} media: anak pertama {margin-top: 0;}. media-objek {display: block;}. Media-heading {margin: 0 5px; 10px;}. Media> .pull-right {margin-left: 10px;}Gaya media relatif sederhana, cukup atur jarak di antara mereka;
Mari kita lihat penggunaan objek media:
<h1> Objek Media Default </h1> <div> <a href = "#"> <mmg src = "img/1.jpg"> </a> <viv> <h4> sinar bulan di kolam lotus </h4> <viv> Saya cukup tidak nyaman hari ini. Saya sedang duduk di halaman malam ini untuk menikmati udara yang sejuk, dan tiba -tiba saya ingat kolam teratai yang saya lewati setiap hari. Pada malam bulan purnama ini, saya harus selalu terlihat berbeda. Bulan secara bertahap bangkit, dan tawa anak -anak di jalan di luar tembok ... </div> </div> </div>
Bersarang objek media
Bootstrap Media Objects Nest, cukup tempatkan struktur objek media lain di tubuh objek media (.Media-Body). Mari kita lihat aplikasi objek media bersarang
<h1> bersarang dari objek media default </h1> <div> <a href = "#"> <mmg src = "img/3.jpg"> </a> <div> <h4> cahaya bulan di kolam lotus </h4> <v> Moonlight diam -diam melamar daun dan bunga ini seperti air yang mengalir. Kabut biru tipis melayang di kolam teratai. Daun dan bunga tampaknya telah dicuci dalam susu; Mereka juga seperti mimpi yang ditutupi dengan tabir. Meskipun bulan purnama, ada awan samar di langit, jadi tidak bisa bersinar terang; Tapi saya pikir ini hanya keuntungan - tidur nyenyak sangat diperlukan, dan tidur siang memiliki rasa yang unik. </div><div><a href="#"><img src="img/4.jpg"></a><div><h4> Here are the nested content1111</h4><div>Four sides of the lotus pond, far, near, high and low, trees, and willows are the most. Pohon -pohon ini mengelilingi kolam teratai; Mereka hanya berada di sisi jalan, dengan beberapa celah bocor, seolah -olah mereka dibiarkan khusus untuk cahaya bulan. </div> <div> <a href = "#"> <img src = "img/5.jpg"> </a> <div> <h4> Berikut ini adalah konten bersarang 2222 </h4> <div> ada gunung yang jauh di pohon, dan hanya sedikit ceroboh. Ada juga satu atau dua lampu jalan yang bocor dari retakan di pohon. Apa yang lesu adalah mata orang -orang yang haus. Hal yang paling hidup saat ini adalah suara jangkrik di pohon dan suara katak di dalam air; Tapi kegembiraan adalah milik mereka, dan saya tidak punya apa -apa </div> </div> </div> </div> </div> </div> </div>
Efeknya adalah sebagai berikut:
Daftar Objek Media
Kerangka Bootstrap menyediakan efek tampilan daftar objek media. Saat menulis struktur, Anda dapat menggunakan tag ul dan menambahkan nama kelas pada tag ul.media-list, dan menggunakan kelas pada tag ul.media.
Misalnya:
<h1> Daftar Obyek Media </h1> <ul> <li> <a href = "#"> <mimg src = "img/1.jpg"> </a> <div> <h4> Daftar objek media 111 </h4> <div> di sepanjang kolam lotus, ini adalah jalan chip batubara kecil yang berliku. Ini adalah jalan terpencil; Ada beberapa orang yang berjalan di siang hari, dan bahkan lebih kesepian di malam hari. Ada banyak pohon yang tumbuh di sekitar kolam teratai, dan mereka mengalami depresi (2). Di sisi jalan ada pohon willow dan beberapa pohon dengan nama yang tidak diketahui. Pada malam tanpa sinar bulan, jalannya suram dan sedikit takut pada orang. Itu sangat bagus malam ini, meskipun cahaya bulan masih pingsan. </div> </div> </li> <li> <a href = "#"> <mmg src = "img/2.jpg"> </a> <div> <h4> Daftar objek media 222 </h4> <div> Saya adalah satu -satunya di jalan, berjalan dengan tangan saya di belakang saya. Dunia ini tampaknya menjadi milik saya; Saya juga merasa seperti di luar diri saya yang biasa dan telah memasuki dunia lain. Saya suka kegembiraan dan ketenangan; Saya suka hidup dalam kelompok dan sendirian. Seperti malam ini, di bawah bulan yang luas ini, Anda dapat memikirkan apa pun dan tidak memikirkan apa pun, dan Anda akan merasa bahwa Anda adalah orang yang bebas. </div> </div> </li> <li> <a href = "#"> <mmg src = "img/3.jpg"> </a> <div> <h4> Daftar objek media 333 </h4> <div> Apa yang harus Anda lakukan dan katakan pada siang hari dapat diabaikan sekarang. Ini adalah keindahan sendirian, dan saya akan menikmati wewangian dan cahaya bulan yang tak ada habisnya. Di atas kolam teratai yang berliku, daun ladang (4) ada di mana -mana. Daunnya sangat tinggi, seperti rok penari tinggi. Di antara lapisan daun, beberapa bunga putih bertitik secara sporadis, beberapa mekar dengan anggun, dan beberapa dengan malu -malu bermain dengan bunga; Sama seperti mutiara, bintang di langit biru, dan kecantikan hanya keluar dari bak mandi. Angin sepoi -sepoi membawa sinar wewangian, seolah -olah keheningan bernyanyi di gedung -gedung tinggi di kejauhan. </div> </div> </li> <li> <a href = "#"> <mmg src = "img/4.jpg"> </a> <div> <h4> Daftar Objek Media 444 </h4> <dv> Tiba -tiba saya ingat kisah memetik teratai. Pilihan Terbungkir adalah kebiasaan lama di Jiangnan. Tampaknya sudah ada sangat awal, tetapi makmur selama enam dinasti; Kita dapat mengetahuinya secara kasar dari puisi. Orang -orang yang memilih Lotus adalah wanita muda, yang pergi ke sana dengan perahu kecil dan menyanyikan lagu -lagu erotis (14). Tak perlu dikatakan, ada banyak orang yang memilih Lotus. Ada juga orang yang memilih Lotus. Itu adalah musim yang hidup dan romantis (15). Kaisar Yuan dari Liang (16) mengatakannya dengan baik di "The Lotus Picking Fu":. </div> </div> </li> </ul>
Efeknya adalah sebagai berikut: