メディア オブジェクト
ブログ コメント、ツイートなどの非常に反復的なコンポーネントを構築する 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: インライン要素がフレックス アイテムとして扱われない
Internet Explorer 10-11 は、リンクや画像 (または疑似要素) などのインライン要素をフレックス項目として::before
レンダリングしません。::after
唯一の回避策は、インライン以外のdisplay
値 ( block
、inline-block
、 などflex
) を設定することです。簡単な修正として、表示ユーティリティ.d-flex
の 1 つであるを使用することをお勧めします。
ネスティング
メディア オブジェクトは無限にネストできますが、どこかで停止することをお勧めします。親メディア オブジェクト.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>
アライメント
メディア オブジェクト内のメディアは、フレックスボックス ユーティリティを使用して、コンテンツの先頭 (デフォルト)、中間、または末尾に配置できます.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 自体を変更するか、カスタム フレックスボックス CSS を追加してorder
プロパティを (選択した整数に) 設定することにより、メディア オブジェクト内のコンテンツの順序を変更します。
メディア オブジェクト
犠牲が伴うことはわかっていますが、それは代償です。あなたのクジャクを見せてくれる勇気はありますか?今夜、10 代の夢になってください。ええと、私はあなたを参照してください。戻ることはありません。ええ、私たちはクレジット カードを使い果たし、バーから追い出されました。では、誕生日のスーツを着させてください。彼女に会ったら恋に落ちるかもしれません。あなたの手のひらの上に世界がありました。偉大さにがっかりさせないでください、ああ、そうです。今、私たちは占星術について話したり、爪を整えたり、すべて日本的です. 私をあなたのアフロディーテにしてください。
<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>
。いつものように、微調整が必要な場合はいつでもスペーシング ユーティリティを使用してください。
-
リストベースのメディア オブジェクト
すべての私の女の子のビンテージ シャネル ベイビー。だからあなたはあなたのケーキを食べることができます。今夜、今夜、今夜、私は空中を歩いています。ゆっくりと恐怖を飲み込んで、ええええ。稲妻のように急速に成長します。とても熱くて重い、「夜明けまで。そのおとぎ話は、輝く鎧を着た騎士で終わります。重いのは王冠をかぶった頭です。
-
リストベースのメディア オブジェクト
すべてのドアが閉まっている理由かもしれません。あなたが私のものになったら、あなたが私のものになったら。今夜、10 代の夢になってください。重いのは王冠をかぶった頭です。休日でもないし、祝うべきものもない。完全な嵐、完全な嵐。
-
リストベースのメディア オブジェクト
あなたのクジャクを見せてくれる勇気はありますか?戻ることはありません。最後の改行の後、これがあなたが言う最後の時間です。それのすべての終わりに。
<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>