メディアオブジェクト
ブログのコメントやツイートなど、頻繁に繰り返されるコンポーネントを構築するための、Bootstrapのメディアオブジェクトのドキュメントと例。
例
メディアオブジェクトは、メディアがコンテンツの横に配置され、コンテンツがそのメディアの周りに回り込まないような、複雑で反復的なコンポーネントを構築するのに役立ちます。さらに、flexboxのおかげで、必要なクラスは2つだけです。
以下は、単一のメディアオブジェクトの例です。必要なクラスは、ラップする.mediaとコンテンツを囲む.media-bodyの2つだけです。オプションのパディングとマージンは、スペーシングユーティリティを使用して制御できます。
メディアの見出し
私のために同じことをしてくれる？私がもはやあなたのミューズではないという現実に向き合う時が来た。美しいと聞いたけど、判断は任せるわ。そして私のガールズが投票するわ。私の中で不死鳥を感じることができる。天国は私たちの愛を妬み、天使たちは上から泣いている。そう、あなたは私をユートピアへ連れて行く。
<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: インライン要素はflexアイテムとして扱われない
Internet Explorer 10-11では、リンクや画像（または::beforeや::afterの疑似要素）のようなインライン要素はflexアイテムとしてレンダリングされません。唯一の回避策は、非インラインのdisplay値（例：block、inline-block、またはflex）を設定することです。簡単な修正として、表示ユーティリティの1つである.d-flexを使用することをお勧めします。
出典: GitHubのFlexbugs
ネスト
メディアオブジェクトは無限にネストできますが、ある時点で停止することをお勧めします。ネストされた.mediaを親メディアオブジェクトの.media-bodyの中に配置します。
メディアの見出し
爆弾が降り始めたら最前線に立つわ。天国は私たちの愛を妬み、天使たちは上から泣いている。100万個のリングでもあなたを置き換えることはできない。ねえ、私と一緒にいるとき、私はあなたに味見をさせてあげる。後戻りはない。私と出会う前は大丈夫だったけど、少し重かったの。王冠をかぶる頭は重い。
<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コンテンツの上部（デフォルト）、中央、または下部に配置できます。
上揃えメディア
私は彼女を昏睡状態にさせるだろう。あなたは100個の理由を並べ立て、本当にやってみると言う。だから私は静かに座り、丁寧に同意した。戴冠式に備える。そして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、彼らはあなたを理解していない。
でも地に足がついている。彼女は、何かわからない、それを知っている。壁に書かれた文字が見える。男の子たちは首を傾けて、ちょっと覗き見しようとしている。私を、私を連れて行って。心を開いて。私は例外だと思った。ブーン、ブーン、ブーン。ベニスビーチとパームスプリングス、夏がすべて。ビートを取り戻して。（これが私たちのやり方）
<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を追加して、ブラウザのデフォルトのリストスタイルを削除し、<li>に.mediaを適用します。いつものように、必要に応じてスペーシングユーティリティを使用して微調整します。
-
リストベースのメディアオブジェクト
私の女の子たちはみんなヴィンテージのシャネルよ、ベイビー。だからあなたはあなたのケーキを食べることができる。今夜、今夜、今夜、私は空中を歩いている。ゆっくりと私の恐れを飲み込む、ええ。稲妻のように急速に成長している。とても熱く激しく、夜明けまで。輝く鎧を着た騎士とのハッピーエンド。王冠をかぶる頭は重い。
-
リストベースのメディアオブジェクト
すべてのドアが閉ざされている理由があるかもしれない。だってあなたは私のものになったら、私のものになったら。今夜はあなたの十代の夢になろう。王冠をかぶる頭は重い。今日は休日でもない、祝うこともない。完璧な嵐、完璧な嵐。
-
リストベースのメディアオブジェクト
あなたの孔雀を見せてくれる勇気はありますか？後戻りはない。これがあなたが言う最後の時、最後のセリフの後であなたは壊れる。結局はね。
<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>