読者です 読者をやめる 読者になる 読者になる

tkymtk's blog

Ruby on Rails及びその周辺について調べたこと。Do whatever you want to do at your own pace.

Bootstrap3 ブログのコメントやユーザを今風にスタイリング(Media object)

こんな感じ

f:id:tkymtk:20131220122227p:plain

HTML

<div class="media">
<!-- pull-right にすると、画像が右端に表示される -->
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">名前とか</h4>
    ...文字とか。ネストとか
  </div>
</div>

リスト形式も可能

  • <div class="media">の代わりに<ul class="media-list">を指定
<ul class="media-list">
  <li class="media">
    <!-- pull-right にすると、画像が右端に表示される -->
    <a class="pull-left" href="#">
      <img class="media-object" src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">名前とか</h4>
      ...文字とか
      <!-- ネスト: liじゃなくてdiv -->
      <div class="media">
        <a class="pull-left" href="#">
          <img class="media-object" src="..." alt="...">
        </a>
        <div class="media-body">
          <h4 class="media-heading">名前とか</h4>
          ...文字とか、またここにネストとか
        </div>
      </div>
      <!--ネスト終わり-->
    </div>
  </li>
  <!-- 次のli要素(<li class="media">...</li>) -->
</ul>

リンク

間違いがあれば、ご指摘下さると幸いです。