Bootstrap メディア オブジェクトの詳細な説明

この章ではBootstrapにおけるマルチメディアオブジェクト（Media Object）について説明します。これらの抽象オブジェクト スタイルは、さまざまなタイプのコンポーネント (ブログのコメントなど) を作成するために使用され、コンポーネント内でグラフィックとテキストを混合して使用でき、画像を左揃えまたは右揃えにすることができます。メディア オブジェクトを使用すると、少ないコードでメディア オブジェクトとテキストを混合できます。

メディア オブジェクトの軽量マークアップと簡単な拡張性は、単純なマークアップにクラスを適用することで実現されます。 HTML タグに次の 2 つのフォームを追加して、メディア オブジェクトを設定できます:

.media: このクラスを使用すると、メディア オブジェクト内のマルチメディア (画像、ビデオ、オーディオ) をコンテンツ ブロックの左側または右側にフローティングできます。

.media-list: 各項目が順序なしリストの一部であるリストが必要な場合は、このクラスを使用できます。コメントリストや記事リストなどに利用できます。

デフォルトのスタイル

メディア オブジェクトは一般にグループで表示され、メディア オブジェクトのグループには次の部分が含まれることがよくあります:

☑ メディア オブジェクトのコンテナ: メディア オブジェクトを収容するために使用される、「メディア」クラス名で表されることが多い すべてのコンテンツ

☑ メディアオブジェクトのオブジェクト: メディアオブジェクト内のオブジェクトである「media-object」で表現されることが多く、画像であることが多い

☑ メディアオブジェクトの本体: 多くの場合「media-body」で表現される、これはメディアオブジェクトです 画像内のメインコンテンツは任意の要素にすることができますが、多くの場合、画像の側面にあるコンテンツです

☑ メディアオブジェクトのタイトル: 多くの場合、使用されるタイトルである「media-Heading」で表されますオブジェクトを説明する場合、この部分はオプションです

ただし、上記の 4 つの部分に加えて、メディア オブジェクト内のオブジェクトのフローティング モードを制御するために、Bootstrap フレームワークでは「media-left」または「media-right」がよく使用されます

[注意] HTML 構造では、.media-right 应当放在 .media-body

media 以降 オブジェクトのスタイルは比較的単純で、間の間隔を設定するだけです

.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}.media,
.media .media {
  margin-top: 15px;
}.media:first-child {
  margin-top: 0;
}.media-object {
  display: block;
}.media-heading {
  margin: 0 0 5px;
}.media-left {
  margin-right: 10px;
}.media-right {
  margin-left: 10px;
}

<div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div></div></div>

ネスト

コメントシステムでは、よくメディア オブジェクトのネストの必要性。 Bootstrap フレームワークのメディア オブジェクトにもそのような機能があります。メディア オブジェクトの本体内に別のメディア オブジェクト構造を配置するだけです。「media-body」

<div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div><div class="media"><a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/100x100" alt="..."></a><div class="media-body"><h4 class="media-heading">我是小火柴</h4><div>好巧啊，我也叫小火柴</div><div class="media"><a class="pull-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>是的</div></div></div></div></div></div></div><div class="media"><a class="media-left" href="#"><img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div>

Alignment

Picture などメディア タイプは、上揃え、中央揃え、または下揃えにすることができます。デフォルトは上揃えです。 .media-middle または .media-bottom 経由で設定します

.media-middle {vertical-align: middle;
}.media-bottom {vertical-align: bottom;
}

<div class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div><div class="media"><a class="media-left media-middle" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div><div class="media"><a class="media-left media-bottom" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div></div>

メディアオブジェクトリスト

メディアオブジェクトのネストは、多くの場合、メディアオブジェクトにおける単純なアプリケーション効果の1つにすぎません。リストも表示されます。各リスト項目はメディア オブジェクトに似ています。 Bootstrap フレームワークはリスト表示効果を提供します。構造体を記述するときに ul を使用し、ul にクラス名「media-list」を追加し、li

メディア オブジェクトのリストを追加します。これもスタイルにありません。特別な処理はあまりせず、リストの左の間隔を0にして項目リストの記号を削除しました

.media-list {
  padding-left: 0;
  list-style: none;
}

<ul class="media-list">
  <li class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>蓝色理想衰落了，前端却欣欣向荣起来</div></div>
  </li>
  <li class="media"><a class="media-left" href="#"><img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="..."></a><div class="media-body"><h4 class="media-heading">小火柴的蓝色理想</h4><div>好的代码像粥一样，都是用时间熬出来的</div></div>
  </li>  </ul>

以上がBootstrap メディア オブジェクトの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。