マルチメディアオブジェクトのブートストラップ
この章では、ブートストラップマルチメディアオブジェクト(メディアオブジェクト)を説明します。 (例:ブログのコメント)コンポーネントの様々なタイプを作成するために使用されるこれらの抽象オブジェクトスタイル、我々は、コンポーネント内の写真・テキストを使用することができ、画像は詰め詰めまたは左右することができます。 メディアオブジェクトは、メディアがスクランブルオブジェクト少ないコードとテキストを用いて達成することができます。
軽量メディアオブジェクトにマーク特性が達成するために、簡単なタグのアプリケーションクラスを介して拡張が容易です。 あなたは、メディアオブジェクトを設定するには、HTMLタグ、次の2つのフォームを追加することができます。
- .media:このクラスは、マルチメディアにおけるメディアオブジェクト(画像、ビデオ、オーディオ)が左または右のコンテンツブロックに浮かべできます。
- .mediaリスト:あなたは様々な要素のリストは順不同リストの一部である必要がある場合は、クラスを使用することができます。コメントが一覧表示や記事のリストに使用することができます。
それでは、.mediaインスタンスのデフォルトのメディアオブジェクトに関する次の情報を見てみましょう:
例
<DIV クラス = "メディア">
<A クラス = "プル左」 href = "#">
<IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg"
ALT = "メディア オブジェクト">
</ A>
<DIV クラス = "メディア・ボディ">
<H4 クラス = "メディアの見出し"> メディアタイトル </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ DIV>
</ DIV>
<DIV クラス = "メディア">
<A クラス = "プル左」 href = "#">
<IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg"
ALT = "メディア オブジェクト">
</ A>
<DIV クラス = "メディア・ボディ">
<H4 クラス = "メディアの見出し"> メディアタイトル </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 <DIV クラス = "メディア">
<A クラス = "プル左」 href = "#">
<IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg"
ALT = "メディア オブジェクト">
</ A>
<DIV クラス = "メディア・ボディ">
<H4 クラス = "メディアの見出し"> メディアタイトル </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ DIV>
</ DIV>
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります:
オブジェクト.mediaリストのメディアのリストの次の例を見てみましょう:
例
<UL クラス = "メディア・リスト」>
<李 クラス = "メディア">
<A クラス = "プル左」 href = "#">
<IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg"
ALT = "一般的なプレースホルダ画像">
</ A>
<DIV クラス = "メディア・ボディ">
<H4 クラス = "メディアの見出し"> メディアタイトル </ H4>
<P> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ P>
<! - ネストされたメディアオブジェクト - >
<DIV クラス = "メディア">
<A クラス = "プル左」 href = "#">
<IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg"
ALT = "一般的なプレースホルダ画像">
</ A>
<DIV クラス = "メディア・ボディ">
<H4 クラスは、= "メディアの見出し"> 見出しのネストされたメディア </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 <! - ネストされたメディアオブジェクト - >
<DIV クラス = "メディア">
<A クラス = "プル左」 href = "#">
<IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg"
ALT = "一般的なプレースホルダ画像">
</ A>
<DIV クラス = "メディア・ボディ">
<H4 クラスは、= "メディアの見出し"> 見出しのネストされたメディア </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ DIV>
</ DIV>
</ DIV>
</ DIV>
<! - ネストされたメディアオブジェクト - >
<DIV クラス = "メディア">
<A クラス = "プル左」 href = "#">
<IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg"
ALT = "一般的なプレースホルダ画像">
</ A>
<DIV クラス = "メディア・ボディ">
<H4 クラスは、= "メディアの見出し"> 見出しのネストされたメディア </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ DIV>
</ DIV>
</ DIV>
</李>
<李 クラス = "メディア">
<A クラス = "プルライト」 href = "#">
<IMG クラス = "メディアオブジェクト" SRCは = "/wp-content/uploads/2014/06/64.jpg"
ALT = "一般的なプレースホルダ画像">
</ A>
<DIV クラス = "メディア・ボディ">
<H4 クラス = "メディアの見出し"> メディアタイトル </ H4> これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 これは、いくつかのサンプルテキストです。 </ DIV>
</李>
</ UL>
»をお試しください
結果は以下の通りであります: