Objek media
Dokumentasi dan contoh untuk objek media Bootstrap untuk membina komponen yang sangat berulang seperti komen blog, tweet dan seumpamanya.
Contoh
Objek media membantu membina komponen yang kompleks dan berulang di mana sesetengah media diletakkan di samping kandungan yang tidak membungkus media tersebut. Selain itu, ia melakukan ini dengan hanya dua kelas yang diperlukan terima kasih kepada flexbox.
Di bawah ialah contoh objek media tunggal. Hanya dua kelas diperlukan—pembungkusan .media
dan .media-body
kandungan anda. Pelapik dan margin pilihan boleh dikawal melalui utiliti jarak .
Tajuk media
Adakah anda akan melakukan perkara yang sama untuk saya? Sudah tiba masanya untuk menghadapi muzik saya bukan lagi muse anda. Dengarnya cantik, jadilah hakim dan anak perempuan saya akan mengundi. Saya dapat merasakan burung phoenix dalam diri saya. Syurga cemburu dengan cinta kita, malaikat menangis dari atas. Ya, awak bawa 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 dianggap sebagai item fleksibel
Internet Explorer 10-11 tidak menjadikan elemen sebaris seperti pautan atau imej (atau ::before
dan ::after
elemen pseudo) sebagai item fleksibel. Satu-satunya penyelesaian ialah menetapkan nilai bukan sebaris display
(cth, block
, inline-block
, atau flex
). Kami cadangkan menggunakan .d-flex
, salah satu utiliti paparan kami , sebagai penyelesaian mudah.
Sumber: Flexbugs pada GitHub
Bersarang
Objek media boleh bersarang tanpa had, walaupun kami mencadangkan anda berhenti pada satu ketika. Letakkan bersarang .media
dalam .media-body
objek media induk.
Tajuk media
Berdiri di barisan hadapan apabila bom mula jatuh. Syurga cemburu dengan cinta kita, malaikat menangis dari atas. Tidak boleh menggantikan anda dengan sejuta cincin. Nak, bila awak bersama saya, saya akan rasa. Tidak ada jalan untuk kembali. Sebelum awak jumpa saya, saya baik-baik saja tetapi keadaan agak berat. Berat adalah kepala yang memakai mahkota.
Tajuk media
Salam insan tersayang mari kita melancong. Ya, kami membuat malaikat menangis, menghujani bumi dari atas. Berikan anda sesuatu yang baik untuk diraikan. Saya pernah menggigit lidah dan menahan nafas. Saya akan membuat jantung anda berlumba-lumba dengan seluar jeans ketat kulit saya. Semasa saya berarak seorang diri mengikut rentak yang berbeza. Musim panas selepas sekolah menengah ketika pertama kali kita bertemu. Anda sangat menghipnotis, bolehkah anda menjadi syaitan? Bolehkah anda menjadi malaikat? Sudah tiba masanya untuk mengeluarkan belon besar. Berfikir bahawa saya adalah pengecualian. Bikini, zucchini, Martinis, tiada weenies.
<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>
Penjajaran
Media dalam objek media boleh diselaraskan dengan utiliti flexbox ke bahagian atas (lalai), tengah atau hujung .media-body
kandungan anda.
Media penjajaran atas
Saya akan buat dia koma. Anda memberikan seratus sebab mengapa, dan anda berkata anda benar-benar akan mencuba. Jadi saya duduk diam, bersetuju dengan sopan. Sesuai untuk pertarungan mahkota saya. Dan pada Hari Lahir saya yang ke-18, kami mendapat tatu yang sepadan. Sangat bergaya, ya, dia seorang yang klasik. Saya bersedia untuk jalan yang kurang dilalui.
Saya berjalan di udara (malam ini). Tetapi turun ke bumi. Anda asli, tidak boleh diganti. Tetapi dalam kehidupan lain saya akan menjadi gadis awak. Kami memandu ke Cali dan mabuk di pantai. Kita boleh menari, sehingga kita mati, awak dan saya, akan muda selamanya. Melihat anda di pusat bandar menyanyikan lagu 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 sejajar tengah
Dia akan menjadi sejuk seperti penyejuk beku. Di penghujung semuanya. Sengatan seperti lebah saya mendapat belang saya. Bikini, zucchini, Martinis, tiada weenies. Saya harap anda mendapat selera makan yang sihat. Kita boleh menari, sehingga kita mati, awak dan saya, akan muda selamanya. Kami menjalani kehidupan. Kami melakukannya dengan betul. Kata di jalan, anda ada sesuatu untuk ditunjukkan kepada saya, saya.
Mahu melihat rancangan dalam 3D, sebuah filem. Mereka berkata, takut anda tidak seperti yang lain, kekasih futuristik. Buka hati anda. Jadi saya duduk diam, bersetuju dengan sopan. Malam Jumaat lepas. Ya, anda bertuah jika anda berada di dalam kapal terbangnya. Saya akan menjadi hadiah anda, memberi anda sesuatu yang baik untuk diraikan.
<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 sejajar bawah
Ayuh, biarkan warna anda pecah. Saya dapat merasakan cahaya ini dalam diri saya. Sepanjang malam mereka bermain, lagu awak. Dari Tokyo ke Mexico, ke Rio. Tidak ada jalan untuk kembali. Tetapi turun ke bumi. Ajaib, berwarna-warni, Encik Misteri, ee. DNA yang berbeza, mereka tidak memahami anda.
Tetapi turun ke bumi. Dia mempunyai itu, je ne sais quoi, anda tahu itu. Saya dapat melihat tulisan di dinding. Budak-budak patah leher try'na merayap sikit curi-curi pandang. Bawa saya, ta-ta-bawa saya. Buka hati anda. Berfikir bahawa saya adalah pengecualian. Boom, boom, boom. Pantai Venice dan Palm Springs, musim panas adalah segala-galanya. Kembalikan rentak. (Ini adalah bagaimana kita lakukan)
<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>
Pesanan
Tukar susunan kandungan dalam objek media dengan mengubah suai HTML itu sendiri atau dengan menambahkan beberapa CSS kotak flex tersuai untuk menetapkan order
sifat (kepada integer pilihan anda).
Objek media
Saya tahu akan ada pengorbanan tetapi itulah harganya. Adakah anda cukup berani untuk membiarkan saya melihat burung merak anda? Jadilah impian remaja anda malam ini. Uh-huh, saya nampak awak. Tidak ada jalan untuk kembali. Ya, kami memaksimumkan kad kredit kami dan ditendang keluar dari bar. Jadi izinkan saya membawakan awak dalam sut hari jadi awak. Anda mungkin jatuh cinta apabila anda bertemu dengannya. Mempunyai dunia di telapak tangan anda. Jangan biarkan kehebatan itu menjatuhkan anda, oh, oh yeah. Sekarang kita bercakap astrologi, membuat kuku kita lakukan, semua Jepun-y. Jadikan saya Aphrodite awak.
<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>
Senarai media
Oleh kerana objek media mempunyai sedikit keperluan struktur, anda juga boleh menggunakan kelas ini pada senarai elemen HTML. Pada anda <ul>
atau <ol>
, tambahkan .list-unstyled
untuk mengalih keluar sebarang gaya senarai lalai penyemak imbas, dan kemudian gunakan .media
pada <li>
s anda. Seperti biasa, gunakan utiliti jarak di mana sahaja yang diperlukan untuk memperhalusi.
-
Objek media berasaskan senarai
Semua perempuan saya Chanel vintaj sayang. Jadi anda boleh mendapatkan kek anda. Malam ini, malam ini, malam ini, saya berjalan di udara. Perlahan-lahan menelan ketakutan saya, yeah yeah. Berkembang pantas menjadi sambaran petir. Sangat panas dan berat, 'Sehingga subuh. Kisah dongeng itu berakhir dengan seorang kesatria dalam perisai bersinar. Berat adalah kepala yang memakai mahkota.
-
Objek media berasaskan senarai
Mungkin sebab semua pintu ditutup. Sebab sekali awak milik saya, sekali awak jadi milik saya. Jadilah impian remaja anda malam ini. Berat adalah kepala yang memakai mahkota. Bukan hari raya pun, tak ada apa yang nak diraikan. Ribut yang sempurna, ribut yang sempurna.
-
Objek media berasaskan senarai
Adakah anda cukup berani untuk membiarkan saya melihat burung merak anda? Tidak ada jalan untuk kembali. Ini adalah kali terakhir anda berkata, selepas baris terakhir anda putus. Di penghujung 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>