วัตถุสื่อ
เอกสารประกอบและตัวอย่างสำหรับอ็อบเจ็กต์สื่อของ Bootstrap เพื่อสร้างองค์ประกอบที่ซ้ำซากจำเจ เช่น ความคิดเห็นในบล็อก ทวีต และอื่นๆ
ตัวอย่าง
ออบเจ็กต์สื่อช่วยสร้างองค์ประกอบที่ซับซ้อนและซ้ำซาก โดยวางสื่อบางตัวไว้ข้างๆ เนื้อหาที่ไม่ได้ล้อมรอบสื่อดังกล่าว นอกจากนี้ยังทำสิ่งนี้ได้ด้วยคลาสที่จำเป็นเพียงสองคลาสด้วย flexbox
ด้านล่างนี้เป็นตัวอย่างของวัตถุสื่อเดียว ต้องใช้เพียงสองคลาสเท่านั้น—การห่อ.media
และ.media-body
รอบๆ เนื้อหาของคุณ ช่องว่างภายในและระยะขอบเสริมสามารถควบคุมได้ผ่าน ยูทิลิตี้ การเว้นวรรค
หัวเรื่องสื่อ
คุณจะทำแบบเดียวกันกับฉันไหม ถึงเวลาเผชิญหน้ากับเสียงเพลง ฉันไม่ใช่ท่วงทำนองของคุณอีกต่อไป ได้ยินว่าสวย มาเป็นกรรมการ แล้วสาวๆ จะไปเลือกตั้ง ฉันรู้สึกได้ถึงนกฟีนิกซ์ในตัวฉัน สวรรค์อิจฉาความรักของเรา นางฟ้ากำลังร้องไห้จากเบื้องบน ใช่ คุณพาฉันไปยูโทเปีย
<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: องค์ประกอบแบบอินไลน์ไม่ถือว่าเป็นรายการแบบยืดหยุ่น
Internet Explorer 10-11 ไม่แสดงองค์ประกอบแบบอินไลน์ เช่น ลิงก์หรือรูปภาพ (หรือ::before
องค์ประกอบ::after
หลอก) เป็นรายการแบบยืดหยุ่น วิธีแก้ปัญหาเพียงอย่างเดียวคือตั้งค่าที่ไม่ใช่แบบอินไลน์display
(เช่น , block
, inline-block
หรือflex
) เราขอแนะนำให้ใช้.d-flex
หนึ่งในเครื่องมือแสดงผล ของเรา เป็นวิธีแก้ไขที่ง่าย
ที่มา: Flexbugs บน GitHub
การทำรัง
ออบเจ็กต์สื่อสามารถซ้อนกันได้ไม่จำกัด แต่เราแนะนำให้คุณหยุดในบางจุด วาง ซ้อน.media
ภายใน.media-body
ของวัตถุสื่อหลัก
หัวเรื่องสื่อ
ยืนอยู่แนวหน้าเมื่อระเบิดเริ่มตกลงมา สวรรค์อิจฉาความรักของเรา นางฟ้ากำลังร้องไห้จากเบื้องบน ไม่อาจแทนที่เธอด้วยแหวนล้านวง ที่รัก เมื่อคุณอยู่กับฉัน ฉันจะให้คุณชิม ไม่มีทางกลับไป ก่อนที่คุณจะพบฉัน ฉันสบายดี แต่เรื่องค่อนข้างหนัก หนักคือศีรษะที่สวมมงกุฎ
หัวเรื่องสื่อ
ทักทายคนที่รัก ไปเที่ยวกัน ใช่ เราทำให้ทูตสวรรค์ร้องไห้ ฝนตกลงมาบนโลกจากเบื้องบน มอบสิ่งดีๆให้กับคุณ ฉันเคยกัดลิ้นและกลั้นหายใจ ฉันจะทำให้หัวใจคุณเต้นแรงในกางเกงยีนส์รัดรูปของฉัน ขณะที่เดินคนเดียวไปตามจังหวะที่ต่างออกไป ฤดูร้อนหลังมัธยมเมื่อเราพบกันครั้งแรก คุณสะกดจิตมาก คุณสามารถเป็นปีศาจได้หรือไม่? คุณสามารถเป็นนางฟ้าได้หรือไม่? ได้เวลานำลูกโป่งขนาดใหญ่ออกมาแล้ว คิดว่าฉันเป็นข้อยกเว้น บิกินี่ ซูกินี มาร์ตินี่ ไม่มีวีนี่
<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>
การจัดตำแหน่ง
สื่อในวัตถุสื่อสามารถจัดแนวด้วยยูทิลิตี้ flexbox ที่ด้านบน (ค่าเริ่มต้น) ตรงกลางหรือจุดสิ้นสุดของ.media-body
เนื้อหา ของคุณ
สื่อจัดตำแหน่งบนสุด
ฉันจะทำให้เธออยู่ในอาการโคม่า คุณให้เหตุผลหลายร้อยข้อ และคุณบอกว่าคุณจะพยายามจริงๆ ข้าพเจ้าจึงนั่งเงียบตกลงอย่างสุภาพ เตรียมพร้อมสำหรับการต่อสู้อันยอดเยี่ยมของฉัน และในวันเกิดปีที่ 18 ของฉัน เรามีรอยสักที่เข้าคู่กัน ดูเก๋ไก๋มาก เธอคลาสสิก ฉันพร้อมสำหรับถนนที่เดินทางน้อย
ฉันกำลังเดินอยู่บนอากาศ (คืนนี้) แต่ติดดิน. คุณเป็นคนเดิมไม่สามารถแทนที่ได้ แต่ในอีกชาติหนึ่ง ฉันจะเป็นผู้หญิงของคุณ เราขับรถไปที่กาลีและเมาบนชายหาด เราสามารถเต้นได้จนกว่าเราจะตาย คุณและฉันจะยังเด็กตลอดไป เห็นคุณอยู่กลางเมืองร้องเพลงบลูส์
<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>
สื่อจัดกึ่งกลาง
เธอจะเย็นชาเหมือนช่องแช่แข็ง ในตอนท้ายของทั้งหมด แสบเหมือนผึ้ง ฉันได้รับลายทางของฉัน บิกินี่ ซูกินี มาร์ตินี่ ไม่มีวีนี่ ฉันหวังว่าคุณจะมีความอยากอาหารเพื่อสุขภาพ เราสามารถเต้นได้จนกว่าเราจะตาย คุณและฉันจะยังเด็กตลอดไป เรากำลังใช้ชีวิต เรากำลังทำมันถูกต้อง คำพูดบนท้องถนน คุณมีบางอย่างจะให้ฉันดู
อยากดูการแสดงแบบ 3D หนัง เขาว่ากันว่า กลัวเธอไม่เหมือนคนอื่น คนรักแห่งอนาคต เปิดหัวใจของคุณ ข้าพเจ้าจึงนั่งเงียบตกลงอย่างสุภาพ คืนวันศุกร์ที่ผ่านมา. ใช่ คุณโชคดีถ้าคุณอยู่บนเครื่องบินของเธอ ฉันจะเป็นของขวัญให้คุณ มอบสิ่งดีๆ ให้คุณเฉลิมฉลอง
<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>
สื่อที่อยู่ด้านล่าง
มาเลย ปล่อยให้สีของคุณระเบิด ฉันรู้สึกได้ถึงแสงสว่างที่อยู่ภายในตัวฉัน พวกเขากำลังเล่นอยู่ทั้งคืน เพลงของคุณ จากโตเกียวถึงเม็กซิโกถึงริโอ ไม่มีทางกลับไป แต่ติดดิน. เวทย์มนต์ สีสัน นายลึกลับ เอ๋ย DNA ต่างกัน พวกเขาไม่เข้าใจคุณ
แต่ติดดิน. เธอเข้าใจแล้ว je ne sais quoi คุณก็รู้ ฉันสามารถเห็นการเขียนบนผนัง พวกหนุ่มๆ คอหักพยายามจะแอบดูสักหน่อย พาฉันไปที เปิดหัวใจของคุณ คิดว่าฉันเป็นข้อยกเว้น บูม บูม บูม. ชายหาดเวนิสและปาล์มสปริงส์ ฤดูร้อนคือทุกสิ่ง เอาจังหวะกลับมา (นี่คือวิธีที่เราทำ)
<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>
คำสั่ง
เปลี่ยนลำดับของเนื้อหาในออบเจ็กต์สื่อโดยแก้ไข HTML เอง หรือโดยการเพิ่ม flexbox CSS ที่กำหนดเองเพื่อตั้งค่าorder
คุณสมบัติ (เป็นจำนวนเต็มที่คุณเลือก)
วัตถุสื่อ
ฉันรู้ว่าจะมีการเสียสละ แต่นั่นเป็นราคา คุณกล้าพอที่จะให้ฉันดูนกยูงของคุณไหม เป็นความฝันของวัยรุ่นในคืนนี้ เอ่อ ฉันเห็นคุณ ไม่มีทางกลับไป ใช่ เราอัดบัตรเครดิตจนเต็ม แล้วโดนไล่ออกจากบาร์ ให้ฉันพาคุณไปในชุดวันเกิดของคุณ คุณอาจตกหลุมรักเมื่อพบเธอ มีโลกอยู่ในฝ่ามือของคุณ อย่าปล่อยให้ความยิ่งใหญ่ทำให้คุณผิดหวัง ตอนนี้เรากำลังพูดถึงโหราศาสตร์ ทำเล็บ ชาวญี่ปุ่นทั้งหมด ทำให้ฉันเป็นอโฟรไดท์
<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>
รายการสื่อ
เนื่องจากวัตถุสื่อมีข้อกำหนดโครงสร้างเพียงเล็กน้อย คุณจึงสามารถใช้คลาสเหล่านี้ในรายการองค์ประกอบ HTML ได้ บน ของคุณ<ul>
หรือ<ol>
เพิ่ม.list-unstyled
เพื่อลบลักษณะรายการเริ่มต้นของเบราว์เซอร์ แล้วนำ.media
ไปใช้กับ<li>
s ของคุณ เช่นเคย ใช้ยูทิลิตี้การเว้นวรรคทุกที่ที่จำเป็นในการปรับแต่ง
-
วัตถุสื่อตามรายการ
ทั้งหมดของฉันสาววินเทจ Chanel เบบี้. เพื่อให้คุณสามารถมีเค้กของคุณ คืนนี้ คืนนี้ คืนนี้ ฉันกำลังเดินอยู่บนอากาศ ค่อยๆ กลืนความกลัวลงไป ใช่แล้ว เติบโตอย่างรวดเร็วเป็นสายฟ้า ร้อนและหนักมากจนรุ่งสาง เทพนิยายที่จบลงด้วยอัศวินในชุดเกราะส่องแสง หนักคือศีรษะที่สวมมงกุฎ
-
วัตถุสื่อตามรายการ
อาจเป็นเหตุผลที่ประตูทุกบานปิดลง เพราะเมื่อคุณเป็นของฉัน เมื่อคุณเป็นของฉัน เป็นความฝันของวัยรุ่นในคืนนี้ หนักคือศีรษะที่สวมมงกุฎ มันไม่ใช่แม้แต่วันหยุด ไม่มีอะไรจะฉลอง พายุที่สมบูรณ์แบบ พายุที่สมบูรณ์แบบ
-
วัตถุสื่อตามรายการ
คุณกล้าพอที่จะให้ฉันดูนกยูงของคุณไหม ไม่มีทางกลับไป นี่เป็นครั้งสุดท้ายที่คุณพูด หลังจากประโยคสุดท้ายที่คุณหยุด ในตอนท้ายของทั้งหมด
<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>