Bootstrap が毎日学習する必要があるメディアオブジェクト_JavaScript スキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:28:58

オリジナル

1483 人が閲覧しました

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" src="imgs/1.jpg" alt="Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル">
  </a>
  <div class="media-body">
    <h4 class="media-heading">系列：十天精通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" src="…" alt="Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media Heading</h4>
    <div>…</div>
    <div class="media">
      <a class="pull-left" href="#">
        <img class="media-object" src="…" alt="Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Media Heading</h4>
        <div>…</div>
        <div class="media">
          <a class="pull-left" href="#">
            <img class="media-object" src="…" alt="Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル">
          </a>
          <div class="media-body">
            <h4 class="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" src=" " alt="Bootstrap が毎日学習する必要があるメディア オブジェクト_JavaScript スキル">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media Header</h4>
      <div>…</div>
    </div>
  </li>
  <li class="media">…</li>
  <li class="media">…</li>
</ul>

ログイン後にコピー

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