Bootstrap4 メディアオブジェクト

Bootstrapは、マルチメディアオブジェクト（画像や動画）とコンテンツのレイアウトを処理する優れた方法を提供します。適用例としては、ブログのコメントや微博（ウェイボー）などがあります：

基本メディアオブジェクト

マルチメディアオブジェクトを作成するには、コンテナ要素に .media クラスを追加し、マルチメディアコンテンツを子コンテナに配置します。子コンテナには .media-body クラスを追加してから、マージン、パディングなどの効果を追加します:

实例

尝试一下 »

メディアオブジェクトのネスト

マルチメディアオブジェクトは複数入れ子にできます（1つのマルチメディアオブジェクトの中に別のマルチメディアオブジェクトを含める）。

マルチメディアオブジェクトをネストするには、新しいものを.media容器放到.media-body容器中:

实例

<div class="media border p-3"> <img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>サンプル</h4> <p>学ぶのは技術だけでなく、夢でもあります！！！</p> <div class="media p-3"> <img src="mobile-icon.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;"> <div class="media-body"> <h4>サンプル</h4> <p>学ぶのは技術だけでなく、夢でもあります！！！</p> </div> </div> </div> </div>

尝试一下 »

マルチメディアオブジェクトの画像を右側に表示する

アバター画像を右側に表示したい場合は、.media-bodyコンテナの後に画像を追加:

实例

<div class="media border p-3"> <div class="media-body"> <h4>サンプル</h4> <p>学ぶのは技術だけでなく、夢でもあります！！！</p> </div> <img src="mobile-icon.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;"> </div>

尝试一下 »

メディア画像の位置を指定

align-self-* 関連クラスを使用して、マルチメディアオブジェクトの画像の表示位置を設定できます：

实例

<div class="media"> <img src="/static.jyshare.com/images/mobile-icon.png" class="align-self-start mr-3" style="width:60px"> <div class="media-body"> <h4>头部 -- サンプル</h4> <p>学ぶのは技術だけでなく、夢でもあります！！！</p> </div> </div>  <div class="media"> <img src="/static.jyshare.com/images/mobile-icon.png" class="align-self-center mr-3" style="width:60px"> <div class="media-body"> <h4>居中 -- サンプル</h4> <p>学ぶのは技術だけでなく、夢でもあります！！！</p> </div> </div>  <div class="media"> <img src="/static.jyshare.com/images/mobile-icon.png" class="align-self-end mr-3" style="width:60px"> <div class="media-body"> <h4>底部 -- サンプル</h4> <p>学ぶのは技術だけでなく、夢でもあります！！！</p> </div> </div>

尝试一下 »

其他扩展