在 GitHub 上檢視

媒體物件

Bootstrap 媒體物件的文件和範例,用於建構高度重複的元件,例如部落格留言、推文等。

範例

媒體物件有助於建構複雜且重複的元件,其中某些媒體與不會環繞該媒體的內容並排放置。此外,它僅透過彈性盒狀模型使用兩個必要的類別來執行此操作。

以下是單一媒體物件的範例。只需要兩個類別,包覆的 .media 和內容周圍的 .media-body。可選的填塞和邊界可透過 間距工具程式 控制。

Placeholder - Bootstrap 框架64x64
媒體標題

你會為我做同樣的事嗎?是時候面對音樂,我已不再是你的繆思。聽說很美,由法官和我女孩們投票決定。我感覺到內心有一隻鳳凰。天堂嫉妒我們的愛,天使們在上方哭泣。是的,你帶我到烏托邦。

<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 值(例如 blockinline-blockflex)。我們建議使用 .d-flex,這是我們的 顯示工具程式 之一,作為一個簡單的修正。

來源: GitHub 上的 Flexbugs

巢狀

媒體物件可以無限巢狀,但我們建議您在某個時候停止。將巢狀的 .media 放置在父媒體物件的 .media-body 內。

Placeholder - Bootstrap 框架64x64
媒體標題

當炸彈開始落下時,站在前線。天堂嫉妒我們的愛,天使們在上方哭泣。無法用一百萬個戒指取代你。男孩,當你和我在一起時,我會讓你嚐嚐。沒有回頭路。在你遇到我之前,我很好,但事情有點沉重。戴王冠的頭很沉重。

Placeholder - Bootstrap 框架64x64
媒體標題

親愛的,讓我們踏上旅程。是的,我們讓天使哭泣,從上方降雨到地球。給你一些值得慶祝的好東西。我曾經咬緊牙關,屏住呼吸。我穿著緊身牛仔褲,讓你的心怦怦跳。當我獨自走向不同的節奏。高中畢業後的夏天,我們第一次見面。你如此迷人,你會是惡魔嗎?你會是天使嗎?是時候拿出大氣球了。以為我是例外。比基尼、西葫蘆、馬丁尼,沒有小香腸。

<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 內容的頂部(預設)、中間或尾端對齊。

Placeholder - Bootstrap 框架64x64
頂部對齊媒體

我要讓她昏迷。你給了一百個理由,並且說你真的會嘗試。所以我安靜地坐著,有禮貌地同意。為我的加冕之戰做好準備。在我們 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>
Placeholder - Bootstrap 框架64x64
置中對齊媒體

她會像冷凍庫一樣冷。在最後。像蜜蜂一樣蜇人,我贏得了我的條紋。比基尼、小西葫蘆、馬丁尼酒,沒有小香腸。我希望你胃口很好。我們可以跳舞,直到我們死去,你和我,將永遠年輕。我們過著生活。我們做得很對。街頭傳聞,你有一些東西要展示給我,給我。

想在 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>
Placeholder - Bootstrap 框架64x64
底部對齊媒體

來吧,讓你的色彩爆發。我能感受到我內心的這束光。整晚他們都在播放你的歌。從東京到墨西哥,到里約。沒有回頭路。但腳踏實地。神奇、多彩、神秘先生,ee。不同的 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 屬性(到你選擇的整數),來變更媒體物件中內容的順序。

媒體物件

我知道會有犧牲,但這是代價。你有足夠的勇氣讓我看到你的孔雀嗎?今晚成為你的青少年夢想。呃,我看到你了。沒有回頭路。是的,我們刷爆了信用卡,被趕出了酒吧。所以讓我讓你穿上你的生日裝。當你遇到她時,你可能會愛上她。將世界掌握在你的手中。不要讓偉大讓你失望,哦,哦,是的。現在我們談論占星術,做我們的指甲,全部都是日式的。讓我成為你的阿芙羅狄蒂。

Placeholder - Bootstrap 框架64x64
<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>。一如往常,在需要時使用間距工具來微調。

  • Placeholder - Bootstrap 框架64x64
    基於清單的媒體物件

    我的所有女孩都是復古香奈兒寶貝。所以你可以擁有你的蛋糕。今晚,今晚,今晚,我漫步在空中。慢慢吞下我的恐懼,是的,是的。迅速成長為一道閃電。如此火熱沉重,直到黎明。那個以身披閃亮盔甲的騎士結束的童話故事。戴著皇冠的頭很沉重。

  • Placeholder - Bootstrap 框架64x64
    基於清單的媒體物件

    也許這就是所有門都關閉的原因。因為一旦你屬於我,一旦你屬於我。今晚成為你的青少年夢想。戴著皇冠的頭很沉重。這甚至不是一個節日,沒有什麼值得慶祝的。一場完美的風暴,完美的風暴。

  • Placeholder - Bootstrap 框架64x64
    基於清單的媒體物件

    你是否足夠勇敢讓我看到你的孔雀?沒有回頭路了。這是你最後一次說,在最後一行你斷裂。在它的 eh-end。

<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>