ブートストラップによって実装されるメディア オブジェクトとは何ですか?

ブートストラップ メディア オブジェクトは、特殊なレイアウトを持つコンポーネントの一種で、グラフィックとテキストの混合効果を設計するために使用されます。ブートストラップには、メディアとメディア リストという 2 種類のメディア オブジェクトが用意されています。メディアは、単一のメディア オブジェクトを表示するために使用されます。オブジェクトとメディア リストは、複数のオブジェクトを表示するために使用されます。

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 5、DELL G3 コンピューター

ブートストラップによって実装されるメディア オブジェクトとは何ですか

メディア オブジェクトは特殊なレイアウトを持つコンポーネントの一種で、グラフィックスとテキストの混合効果をデザインするために使用され、主に左右に浮かぶ画像といくつかのテキストで構成されます。

Bootstrap は、メディア (.media) とメディア リスト (.media-list) という 2 種類のメディア オブジェクトを提供します。メディアは単一のオブジェクトを表示するために使用され、メディア リストは複数のオブジェクトを表示するために使用されます。

メディア

デフォルトでは、メディアはメディア オブジェクト (画像、ビデオ、オーディオなど) と、左側または右側にフローティングされるメディア コンテンツで構成されます。 1 つのメディア内に別のメディアをネストできます。

HTML 構造では、メディアは 3 つの部分で構成されます。.media はメディア コンテナを作成し、.media-object はメディア オブジェクトを作成し、.media-body はメディア コンテンツを作成します (.media-Heading はメディア コンテンツを作成します)。メディアタイトル）。例:

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

メディア オブジェクトは通常、グループで表示されます。メディア オブジェクトのグループには通常、次の部分が含まれます:

1. メディア オブジェクトのコンテナ: メディア オブジェクトのすべてのコンテンツを収容するために使用されます。コンテナ クラス名 .media

2 を使用する必要があります メディア オブジェクトのオブジェクト: 通常は画像、クラス .media-object

3 を使用する必要があります 本体メディア オブジェクトのメイン コンテンツ: メディア オブジェクトのメイン コンテンツです。任意の要素を指定できます。クラス .media-body

4 を使用する必要があります。メディア オブジェクトのタイトル: メディア オブジェクトのタイトル:メディア オブジェクトを記述するには、クラス .media-Heading

を使用する必要があります。さらに、クラス .pull-left および .pull-right は、オブジェクトのフローティング モードを制御するためにブートストラップ フレームワークでよく使用されます。メディア オブジェクト

関連する推奨事項:ブートストラップ チュートリアル

以上がブートストラップによって実装されるメディア オブジェクトとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。