媒體對象
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
我們的顯示實用程序之一,作為一種簡單的解決方法。
資料來源: GitHub 上的 Flexbugs
嵌套
媒體對象可以無限嵌套,但我們建議您在某個時候停下來。嵌套.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,你知道的。我可以看到牆上的文字。男孩們扭斷脖子試圖偷偷偷看。帶我,ta-ta-帶我。敞開心扉。以為我是個例外。轟,轟,轟。威尼斯海灘和棕櫚泉,夏天就是一切。把節拍帶回來。(這是我們如何做到)
<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>
or<ol>
上,添加.list-unstyled
以刪除任何瀏覽器默認列表樣式,然後應用於.media
您<li>
的 s. 與往常一樣,在需要微調的地方使用間距實用程序。
-
基於列表的媒體對象
我所有的女孩都是複古香奈兒寶貝。這樣你就可以吃蛋糕了。今晚,今晚,今晚,我在空中行走。慢慢吞下我的恐懼,是的,是的。快速成長為一道閃電。如此炎熱和沈重,直到黎明。那個以穿著閃亮盔甲的騎士結尾的童話。重是戴冠的頭。
-
基於列表的媒體對象
也許是所有門都關閉的原因。因為一旦你是我的,一旦你是我的。今晚成為你的少年夢想。重是戴冠的頭。這甚至不是一個節日,沒有什麼可慶祝的。完美風暴,完美風暴。
-
基於列表的媒體對象
你有勇氣讓我看到你的孔雀嗎?回不去了。這是你最後一次說,在你打破最後一行之後。在這一切的最後。
<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>