2014年01月27日

ブートストラップ3で画像付きコメント/ツイッターのスタイル

ブートストラップ3のメディアオブジェクト(画像、ビデオ、オーディオ)付きテキストのスタイルについて確認しました。
●デフォルトの使用方法

・.mediaクラスを使用
・.pull-leftまたは.pull-rightクラスと.media-objectクラスでメディアを指定し、floatで右または左寄せ。
・.media-body、.media-headingクラスでメディアの横に記述するテキストを指定。

<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<div class="media">
    :
二つ目のメディアをネストする場合
    :
</div>
</div>
</div>


●リストを使って表示

・.media-listクラスを使ってリスト表示する。

<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
<li class="media">
  :
</li>
</ul>

●ブートストラップ3での定義

.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}

.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;
}

.media-list {
padding-left: 0;
list-style: none;
}

●サンプルコード

@デフォルトでネストした場合

<div class="media">
<a class="pull-left" href="img/800x600.JPG">
<img class="media-object" src="img/64x64.JPG" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">このメディアのタイトル</h4>
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
<div class="media">
<a class="pull-left" href="img/800x600.JPG">
<img class="media-object" src="img/64x64.JPG" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">このメディアのタイトル</h4>
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
</div>
</div>
</div>
</div>


Aリストを使った場合

<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="img/64x64.JPG" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">このメディアのタイトル</h4>
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="img/64x64.JPG" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">このメディアのタイトル</h4>
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="img/64x64.JPG" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">このメディアのタイトル</h4>
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
</div>
</div>
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="img/64x64.JPG" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">このメディアのタイトル</h4>
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
</div>
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="img/64x64.JPG" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">このメディアのタイトル</h4>
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
このメディアに関する本文です。<br />このメディアに関する本文です。<br />
</div>
</li>
</ul>
posted by ホノデザイン at 10:26| Comment(0) | ブートストラップ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: