Media object（メディアオブジェクト）

Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになったコンテンツ表示を行います。
アイコンとメッセージを並べて表示しているだけなので、クラス指定以外には特に気をつけるところは無さそうです。

サンプル01－Mediaを表示

Media heading

Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。
Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。
コーディング

　01行目
　　　コンテンツ表示（アイコン・ヘッダ・メッセージ）を行う箇所を.mediaで囲みます
　02行目
　　　アイコンのリンク等に.pull-leftを指定すると、アイコンが左表示・メッセージが右表示になります
　03行目
　　　アイコン画像に.media-object を指定します
　05行目
　　　ヘッダ・メッセージ表示の箇所を.media-bodyで囲みます
　06行目
　　　ヘッダを記述する場合は.media-headingを指定します
　11行目
　　　アイコンのリンク等に.pull-rightを指定すると、アイコンが右表示・メッセージが左表示になります
　※02行目や11行目でアイコンにリンクしたくない場合は、<span>や<div>を使用してください

サンプル02－Mediaをネスト表示

Media heading

Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。

Media heading

Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。
コーディング

　08-16行目
　　　ネスト表示したい場合は.media-bodyの最後に、再度.mediaを記述していきます

サンプル03－MediaをList表示

  • Media heading

    Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。

    Nested media heading

    Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。Blogのコメント欄やTwitterのように、アイコン表示とメッセージがセットになった表示を行います。
機能

リスト表示として記入する事もできますので、リスト表示タグに所定のクラスを指定してください
<ul>と<li>にクラスを指定する以外、上記01-02で説明した書き方と変わりはありません

コーディング

　01行目
　　　<ul>に.media-list を指定します
　02行目
　　　<li>に.media を指定します