Objek media
Dokumentasi dan contoh untuk objek media Bootstrap untuk membangun komponen yang sangat berulang seperti komentar blog, tweet, dan sejenisnya.
Contoh
Objek media membantu membangun komponen yang kompleks dan berulang di mana beberapa media diposisikan di samping konten yang tidak membungkus media tersebut. Plus, ia melakukan ini hanya dengan dua kelas yang diperlukan berkat flexbox.
Di bawah ini adalah contoh objek media tunggal. Hanya dua kelas yang diperlukan—pembungkusan .media
dan .media-body
sekeliling konten Anda. Padding dan margin opsional dapat dikontrol melalui utilitas spasi .
Judul media
Apakah Anda akan melakukan hal yang sama untuk saya? Saatnya menghadapi musik, aku bukan lagi inspirasimu. Mendengar itu indah, jadilah hakim dan gadis-gadisku akan mengambil suara. Aku bisa merasakan phoenix di dalam diriku. Surga cemburu dengan cinta kita, malaikat menangis dari atas. Ya, Anda membawa saya ke utopia.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
</div>
</div>
Flexbug #12: Elemen sebaris tidak diperlakukan sebagai item fleksibel
Internet Explorer 10-11 tidak merender elemen sebaris seperti tautan atau gambar (atau ::before
dan ::after
elemen semu) sebagai item fleksibel. Satu-satunya solusi adalah dengan menetapkan nilai non-inline display
(misalnya, block
, inline-block
, atau flex
). Kami menyarankan untuk menggunakan .d-flex
, salah satu utilitas tampilan kami , sebagai perbaikan yang mudah.
Sumber: Flexbugs di GitHub
Bersarang
Objek media dapat bersarang tanpa batas, meskipun kami menyarankan Anda berhenti di beberapa titik. Tempatkan bersarang .media
di dalam .media-body
objek media induk.
Judul media
Berdiri di garis depan saat bom mulai berjatuhan. Surga cemburu dengan cinta kita, malaikat menangis dari atas. Tidak bisa menggantikanmu dengan sejuta cincin. Wah, saat kau bersamaku, aku akan memberimu rasa. Tidak ada jalan kembali. Sebelum Anda bertemu dengan saya, saya baik-baik saja tetapi semuanya agak berat. Berat adalah kepala yang memakai mahkota.
Judul media
Salam orang-orang terkasih mari kita jalan-jalan. Ya, kami membuat malaikat menangis, menghujani bumi dari atas. Memberi Anda sesuatu yang baik untuk dirayakan. Saya sering menggigit lidah dan menahan napas. Aku akan membuat jantungmu berdebar kencang dengan jeans ketatku. Saat aku berbaris sendirian dengan irama yang berbeda. Musim panas setelah sekolah menengah ketika kami pertama kali bertemu. Anda sangat menghipnotis, bisakah Anda menjadi iblis? Bisakah kamu menjadi malaikat? Saatnya untuk mengeluarkan balon besar. Berpikir bahwa aku adalah pengecualian. Bikini, zucchini, Martini, bukan gadis kecil.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Standing on the frontline when the bombs start to fall. Heaven is jealous of our love, angels are crying from up above. Can't replace you with a million rings. Boy, when you're with me I'll give you a taste. There’s no going back. Before you met me I was alright but things were kinda heavy. Heavy is the head that wears the crown.</p>
<div class="media mt-3">
<a class="mr-3" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Greetings loved ones let's take a journey. Yes, we make angels cry, raining down on earth from up above. Give you something good to celebrate. I used to bite my tongue and hold my breath. I'm ma get your heart racing in my skin-tight jeans. As I march alone to a different beat. Summer after high school when we first met. You're so hypnotizing, could you be the devil? Could you be an angel? It's time to bring out the big balloons. Thought that I was the exception. Bikinis, zucchinis, Martinis, no weenies.</p>
</div>
</div>
</div>
</div>
Penyelarasan
Media dalam objek media dapat disejajarkan dengan utilitas flexbox ke atas (default), tengah, atau akhir .media-body
konten Anda.
Media selaras teratas
Aku akan membuatnya koma. Anda memberikan seratus alasan mengapa, dan Anda mengatakan Anda benar-benar akan mencoba. Jadi saya duduk dengan tenang, setuju dengan sopan. Bersiap untuk pertempuran penobatan saya. Dan pada ulang tahunku yang ke-18, kami mendapat tato yang serasi. Sangat chic, ya, dia klasik. Saya siap untuk jalan yang jarang dilalui.
Saya berjalan di udara (malam ini). Tapi turun ke bumi. Kamu asli, tidak bisa tergantikan. Tapi di kehidupan lain aku akan menjadi gadismu. Kami berkendara ke Cali dan mabuk di pantai. Kita bisa menari, sampai kita mati, kau dan aku, akan muda selamanya. Melihatmu di pusat kota menyanyikan The Blues.
<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>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So I sat quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching tattoos. So très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
<p>I'm walking on air (tonight). But down to earth. You're original, cannot be replaced. But in another life I would be your girl. We drove to Cali and got drunk on the beach. We can dance, until we die, you and I, will be young forever. Saw you downtown singing the Blues.</p>
</div>
</div>
Media rata tengah
Dia akan menjadi dingin seperti freezer. Di akhir semuanya. Menyengat seperti lebah saya mendapatkan garis-garis saya. Bikini, zucchini, Martini, bukan gadis kecil. Saya harap Anda memiliki nafsu makan yang sehat. Kita bisa menari, sampai kita mati, kau dan aku, akan muda selamanya. Kita menjalani hidup. Kami melakukannya dengan benar. Kata-kata di jalan, Anda punya sesuatu untuk ditunjukkan kepada saya, saya.
Ingin melihat pertunjukan dalam 3D, sebuah film. Kata orang, takutlah kamu tidak seperti yang lain, pecinta futuristik. Buka hatimu. Jadi saya duduk dengan tenang, setuju dengan sopan. Malam Jum'at kemarin. Ya, Anda beruntung jika Anda berada di pesawatnya. Aku akan menjadi hadiahmu, memberimu sesuatu yang bagus untuk dirayakan.
<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>She'll turn cold as a freezer. At the eh-end of it all. Stinging like a bee I earned my stripes. Bikinis, zucchinis, Martinis, no weenies. I hope you got a healthy appetite. We can dance, until we die, you and I, will be young forever. We're living the life. We're doing it right. Word on the street, you got somethin' to show me, me.</p>
<p class="mb-0">Wanna see the show in 3D, a movie. They say, be afraid you're not like the others, futuristic lover. Open up your heart. So I sat quietly, agreed politely. Last Friday night. Yeah, you're lucky if you're on her plane. I'll be your gift, give you something good to celebrate.</p>
</div>
</div>
Media rata bawah
Ayo, biarkan warnamu meledak. Saya bisa merasakan cahaya yang ada di dalam diri saya ini. Sepanjang malam mereka bermain, lagumu. Dari Tokyo ke Meksiko, ke Rio. Tidak ada jalan kembali. Tapi turun ke bumi. Ajaib, penuh warna, Tuan Misteri, ee. DNA yang berbeda, mereka tidak mengerti Anda.
Tapi turun ke bumi. Dia punya itu, je ne sais quoi, Anda tahu itu. Aku bisa melihat tulisan di dinding. Anak laki-laki mematahkan leher mereka mencoba untuk menyelinap mengintip sedikit. Bawa aku, ta-ta-bawa aku. Buka hatimu. Berpikir bahwa aku adalah pengecualian. Bum, bum, bum. Pantai Venesia dan Palm Springs, musim panas adalah segalanya. Kembalikan iramanya. (Inilah cara kami melakukannya)
<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>Come on, let your colours burst. I can feel this light that's inside of me. All night they're playing, your song. From Tokyo to Mexico, to Rio. There’s no going back. But down to earth. Magical, colorful, Mr. Mystery, ee. Different DNA, they don't understand you.</p>
<p class="mb-0">But down to earth. She's got that, je ne sais quoi, you know it. I can see the writing on the wall. The boys break their necks try'na to creep a little sneak peek. Take me, ta-ta-take me. Open up your heart. Thought that I was the exception. Boom, boom, boom. Venice beach and Palm Springs, summertime is everything. Bring the beat back. (This is how we do)</p>
</div>
</div>
Memesan
Ubah urutan konten di objek media dengan memodifikasi HTML itu sendiri, atau dengan menambahkan beberapa CSS flexbox khusus untuk mengatur order
properti (ke bilangan bulat yang Anda pilih).
Objek media
Saya tahu akan ada pengorbanan tetapi itulah harganya. Apakah Anda cukup berani untuk membiarkan saya melihat burung merak Anda? Jadilah impian remaja Anda malam ini. Uh-huh, aku melihatmu. Tidak ada jalan kembali. Ya, kami memaksimalkan kartu kredit kami dan dikeluarkan dari bar. Jadi biarkan aku membawakanmu setelan ulang tahunmu. Anda mungkin jatuh cinta saat bertemu dengannya. Memiliki dunia di telapak tangan Anda. Jangan biarkan kehebatan membuat Anda kecewa, oh, oh yeah. Sekarang kita berbicara astrologi, mendapatkan kuku kita, semua Jepang-y. Jadikan aku Aphrodite-mu.
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
<p>I know there will be sacrifice but that's the price. Are you brave enough to let me see your peacock? Be your teenage dream tonight. Uh-huh, I see you. There’s no going back. Yeah, we maxed our credit cards and got kicked out of the bar. So let me get you in your birthday suit. You may fall in love when you meet her. Had the world in the palm of your hands. Don't let the greatness get you down, oh, oh yeah. Now we talking astrology, getting our nails did, all Japanese-y. Make me your Aphrodite.</p>
</div>
<img src="..." class="ml-3" alt="...">
</div>
Daftar media
Karena objek media memiliki sedikit persyaratan struktural, Anda juga dapat menggunakan kelas ini pada elemen HTML daftar. Di <ul>
atau <ol>
, tambahkan .list-unstyled
untuk menghapus gaya daftar default browser apa pun, lalu terapkan .media
ke <li>
s. Seperti biasa, gunakan utilitas spasi di mana pun diperlukan untuk menyempurnakan.
-
Objek media berbasis daftar
Semua gadisku sayang Chanel vintage. Jadi Anda bisa mendapatkan kue Anda. Malam ini, malam ini, malam ini, aku berjalan di udara. Perlahan menelan ketakutanku, ya ya. Tumbuh cepat menjadi sambaran petir. Begitu panas dan berat, sampai subuh. Dongeng itu berakhir dengan seorang ksatria berbaju zirah. Berat adalah kepala yang memakai mahkota.
-
Objek media berbasis daftar
Mungkin alasan mengapa semua pintu ditutup. Karena begitu kau milikku, begitu kau jadi milikku. Jadilah impian remaja Anda malam ini. Berat adalah kepala yang memakai mahkota. Ini bahkan bukan hari libur, tidak ada yang perlu dirayakan. Badai yang sempurna, badai yang sempurna.
-
Objek media berbasis daftar
Apakah Anda cukup berani untuk membiarkan saya melihat burung merak Anda? Tidak ada jalan kembali. Ini adalah terakhir kalinya Anda mengatakan, setelah baris terakhir Anda putus. Di akhir semuanya.
<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>
<p>All my girls vintage Chanel baby. So you can have your cake. Tonight, tonight, tonight, I'm walking on air. Slowly swallowing down my fear, yeah yeah. Growing fast into a bolt of lightning. So hot and heavy, 'Til dawn. That fairy tale ending with a knight in shining armor. Heavy is the head that wears the crown.</p>
</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>
<p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your teenage dream tonight. Heavy is the head that wears the crown. It's not even a holiday, nothing to celebrate. A perfect storm, perfect storm.</p>
</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>
<p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you say, after the last line you break. At the eh-end of it all.</p>
</div>
</li>
</ul>