とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > メディアオブジェクト

メディアオブジェクト

.media および .media-body を用いて、画像と説明を下記の様に配置することができます。

Sample
64x64
HTML 5.2
This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features continue...
Code
<div class="media">
  <img class="mr-3" src="img/64x64.gif" alt="64x64 image">
  <div class="media-body">
    <h5 class="mt-0">HTML 5.2</h5>
    This specification defines the 5th major version,
    second minor revision of the core language of the
    World Wide Web: the Hypertext Markup Language (HTML).
    In this version, new features continue...
  </div>
</div>

上下のアライン

.align-self-* を用いて、画像を上寄せ(start)、中央寄せ(center)、下寄せ(end)することができます。

Sample
64x64
HTML 5.2
This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features continue...
Code
<div class="media">
  <img class="mr-3 align-self-end" src="img/64x64.gif" alt="64x64 image">
  <div class="media-body">
    :
  </div>
</div>

メディアリスト

<li> に .media を用いて、メディアリストを表示することができます。

Sample
  • 64x64
    HTML 5.2
    This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).
  • 64x64
    HTML 5.2
    This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).
  • 64x64
    HTML 5.2
    This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).
Code
<ul class="list-unstyled" style="width:500px">
  <li class="media mb-3">
    <img src="64x564.gif" alt="64x64" class="mr-3">
    <div class="media-body">
      <h5>HTML 5.2</h5>
      This specification defines the 5th major version,
      second minor revision of the core language of the
      World Wide Web: the Hypertext Markup Language (HTML).
      In this version, new features continue...
    </div>
  </li>
     :
</ul>
Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/media_object.html