Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル

Web ページやモバイル ページの制作では、次の図に示すように、左側が左側 (または右側)、コンテンツが右側 (または左側) になるこの効果がよく見られます。 >

私たちはこのような効果をメディア オブジェクトと呼ぶことがよくあります。さまざまな種類のコンポーネントを構築するために使用できる抽象スタイルであると言えます。これらのコンポーネントはすべて、冒頭で説明したスタイルを持っています。次に、Bootstrap フレームワークからいくつかの部分を特別に抽出して、コンポーネントを導入します。対応するバージョン ファイル:

☑ LESS バージョン: 対応するソース ファイルは media.less

☑ Sass バージョン: 対応するソース ファイルは _media.scss

☑ コンパイル済みバージョン: は、bootstrap.css ファイル の 4792 ～ 4819 行目に対応します。

1. メディア オブジェクト – デフォルトのメディア オブジェクト

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

☑ メディア オブジェクトのコンテナ: 多くの場合、「メディア」クラス名で表され、メディア オブジェクト

のすべてのコンテンツを収容するために使用されます。

☑ メディア オブジェクトのオブジェクト: 多くの場合「メディア オブジェクト」で表され、メディア オブジェクト内のオブジェクトであり、多くの場合画像

☑ メディア オブジェクトの本体: 「メディア本体」として表現されることが多く、メディア オブジェクトのメイン コンテンツであり、任意の要素にすることができますが、多くの場合、画像のサイド コンテンツとなります

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

以下に示すように:

上記の 4 つの部分に加えて、ブートストラップ フレームワークでは、メディア オブジェクト内のオブジェクトのフローティング モードを制御するために、「左にプル」または「右にプル」がよく使用されます。

具体的な使用方法は次のとおりです。

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="imgs/1.jpg"  alt="Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル">
  </a>
  <div class="media-body">
    <h4 id="系列-十天精通CSS">系列：十天精通CSS3</h4>
    <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
  </div>
</div>

操作効果は次のとおりです:

原理分析:

メディア オブジェクト スタイルは比較的単純で、以下に示すようにオブジェクト間の間隔を設定するだけです。

/bootstrap.css ファイルの 4792 行目～4815 行目/

.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 > .pull-left {
 margin-right: 10px;
}
.media > .pull-right {
 margin-left: 10px;
}

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

コメント システムでは、次のような効果がよく見られます:

外側から内側を見ると、ここには 3 つのメディア オブジェクトがありますが、1 つはもう 1 つの内側にネストされています。次に、Bootstrap フレームワークのメディア オブジェクトにもそのような機能があります。以下に示すように、メディア オブジェクト「media-body」の本体内に別のメディア オブジェクト構造を配置するだけです。

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="…"  alt="Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル">
  </a>
  <div class="media-body">
    <h4 id="Media-Heading">Media Heading</h4>
    <div>…</div>
    <div class="media">
      <a class="pull-left" href="#">
        <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="…"  alt="Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル">
      </a>
      <div class="media-body">
        <h4 id="Media-Heading">Media Heading</h4>
        <div>…</div>
        <div class="media">
          <a class="pull-left" href="#">
            <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="…"  alt="Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル">
          </a>
          <div class="media-body">
            <h4 id="Media-Heading">Media Heading</h4>
            <div>Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

構造が間違ってネストされていないことを確認すると、以下に示すように効果を直接確認できます。

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

メディア オブジェクトのネストは、メディア オブジェクトにおける単純なアプリケーション効果の 1 つにすぎません。多くの場合、リスト項目もメディア オブジェクトと同様に見えます。コメント システムでも同じことが言えます。もの:

使用法: 上の図のメディア オブジェクトのリスト効果については、Bootstrap フレームワークが提供するリスト表示効果です。構造を記述するときに ul を使用し、クラス名「media-list」を ul に追加し、「media」を使用できます。 、サンプルコードは次のとおりです:

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201511/20151130100003233.jpg&#63;2015103010012?x-oss-process=image/resize,p_40"  alt="Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル">
    </a>
    <div>
      <h4 id="Media-Header">Media Header</h4>
      <div>…</div>
    </div>
  </li>
  <li>…</li>
  <li>…</li>
</ul>

操作効果は次のとおりです:

原理分析: メディア オブジェクト リストには、スタイルに関して特別な処理はあまりありません。リストの左の間隔を 0 に設定し、箇条書きの記号を削除するだけです。

/bootstrap.css ファイルの 4816 行目～4819 行目/

上記は、Bootstrap メディア オブジェクトの学習に役立つこの記事の全内容です。あなたの学習に役立つことを願っています。