Webページでは、画像が左側にあり、コンテンツが右側に配置されています。これは非常に一般的な効果です。また、メディアオブジェクトでもあります。これは、さまざまなタイプのコンポーネントを構築するために使用できる抽象的なスタイルです。 Bootstrapフレームワークの対応するバージョンファイルは次のとおりです。
Less：Media.less
sass：_media.scss
メディアオブジェクトは一般にグループに表示され、メディアオブジェクトのグループには一般に、次の部分が含まれます。
1。メディアオブジェクトコンテナ：メディアオブジェクトのすべての内容に対応するために使用されます。クラス名はコンテナで使用する必要があります。メディア
2。メディアオブジェクトのオブジェクト：一般的に画像、およびclass.media-objectが必要です。
3。メディアオブジェクトの主題：それはメディアオブジェクトの主題コンテンツです。それは任意の要素である可能性があり、class.media-bodyの使用が必要です
4。メディアオブジェクトのタイトル：メディアオブジェクトを説明するために使用されるタイトル、class.media-headingが必要です。
さらに、クラス.Pull-leftと.Pull-rightは、メディアオブジェクトのオブジェクトのフローティング方法を制御するために、ブートストラップフレームワークでよく使用されます。
CSSソースコードは次のとおりです。
.media、.media-body {overflow：hidden; zoom：1;}。メディア、.media .media .media {margin-top：15px;}。メディア：ファーストチャイルド{マージントップ：0;}。 .pull-right {margin-left：10px;}メディアスタイルは比較的シンプルで、それらの間の間隔を設定するだけです。
メディアオブジェクトの使用を見てみましょう。
<h1>デフォルトのメディアオブジェクト</h1> <div> <a href = "＃"> <img src = "img/1.jpg"> </a> <div> <h4>ロータスポンドの月明かり</h4> <div>最近はとても不安です。私は今夜庭に座って冷たい空気を楽しんでいたので、突然、私が毎日歩いていた蓮の池を思い出しました。この満月の夜には、私はいつも違って見えるはずです。月は徐々に上昇し、壁の外の道路上の子供たちの笑い声... </div> </div> </div>
メディアオブジェクトのネスト
ブートストラップメディアオブジェクトネストは、メディアオブジェクトの本体に別のメディアオブジェクト構造を配置するだけです（.media-body）。メディアオブジェクトネスティングの適用を見てみましょう
<h1>デフォルトのメディアオブジェクトのネスト</h1> <div> <a href = "＃"> <img src = "img/3.jpg"> </a> <div> <h4>蓮の池の月明かり</h4> <div>月明かりは、これらの葉や花のような花のような花に静かに注がれます。蓮の池に薄い青い霧が浮かんだ。葉と花は牛乳で洗われたようです。また、ベールで覆われた夢のようです。満月ですが、空にはかすかな雲がありますので、明るく輝くことはできません。しかし、私はこれが単なる利点だと思います - 深い眠りは不可欠であり、昼寝はユニークな風味を持っています。 </div> <div> <a href = "＃"> <img src = "img/4.jpg"> </a> <div> <h4>ここにネストされたコンテンツ池の4つの側面があります。これらの木は蓮の池を囲みました。彼らは道の脇にのみ、いくつかの隙間が漏れていました。 </div> <div> <a href = "＃"> <img src = "img/5.jpg"> </a> <div> <h4>ここにネストされたコンテンツがあります2222 </h4> <div>トリートップには遠い山があり、それは少し不注意です。また、木の亀裂から漏れている1つまたは2つの街路灯がありました。リストレスは、のどが渇いた眠っている人々の目でした。この時点で最も活気のあることは、木にチカダの音と水の中のカエルの音です。しかし、興奮は彼らのものであり、私は何もありません</div> </div> </div> </div> </div> </div> </div>
効果は次のとおりです。
メディアオブジェクトリスト
ブートストラップフレームワークは、メディアオブジェクトリストの表示効果を提供します。構造を作成するときは、タグULを使用して、タグUL.Media-Listにクラス名を追加し、Tag UL.Mediaのクラスを使用できます。
例えば：
<h1>メディアオブジェクトリスト</h1> <ul> <li> <a href = "＃"> <img src = "img/1.jpg"> </a> <div> <h4> lotus池に沿って、それは緊張した小さな石炭チップ道路です。これは人里離れた道です。日中歩く人はほとんどいません。夜はさらに孤独です。蓮の池の周りに成長している多くの木があり、それらは落ち込んでいます（2）。道路の脇には柳があり、名前が不明な木がありました。月明かりの悪い夜には、道路は悲観的で、人々を少し怖がっていました。月明かりはまだかすかでしたが、今夜はとても良かったです。 </div> </div> </li> <li> <a href = "＃"> <img src = "img/2.jpg"> </a> <div> <h4>メディアオブジェクトリスト222 </h4> <div>私は手を後ろに歩いて歩いていました。この世界のようです。また、私はいつもの自分を超えており、別の世界に入ったように感じます。私は興奮と静けさが大好きです。私はグループで生活し、一人でいるのが大好きです。今夜のように、この広大な月の下で、あなたは何も考えて何も考えないことができます、そしてあなたはあなたが自由な人であると感じるでしょう。 </div> </div> </li> <li> <a href = "＃"> <img src = "img/3.jpg"> </a> <div> <h4>メディアオブジェクトリスト333 </h4> <div>日中に何をしてください。これは一人でいることの美しさであり、私は無限のロータスの香りと月明かりを楽しみます。曲がりくねった蓮の池の上には、畑の葉（4）がどこにでもあります。背の高いダンサーのスカートのように、葉は非常に高くなっています。葉の層の中で、いくつかの白い花が散発的に点線で、いくつかは優雅に咲き、一部は恥ずかしそうに花で遊んでいます。真珠のように、青い空の星、そしてお風呂のすぐ外にある美しさ。そよ風は、遠くの背の高い建物で歌うことの沈黙のように、香りの光をもたらします。 </div> </div> </li> <li> <a href = "＃"> <img src = "img/4.jpg"> </a> <div> <h4> <h4> <h44 </h4> <div>突然、私はロータスを摘み取ったことを思い出しました。ロータスピッキングは、jiangnanの古い習慣です。それは非常に早い段階で存在していたようですが、6王朝の間は繁栄していました。私たちは詩から大まかにそれを知ることができます。ロータスを選んだのは若い女性で、小さなボートでエロティックな歌を歌った若い女性でした（14）。言うまでもなく、ロータスを選ぶ人はたくさんいます。ロータスを選ぶ人もいます。それは活気のある季節であり、ロマンチックでした（15）。 Liang（16）の皇帝は、「Lotus Picking Fu」でそれをよく言った。 </div> </div> </li> </ul>
効果は次のとおりです。