とほほの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>

上下のアライン

<img> に align-self-start, align-self-center, align-self-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>

メディアリスト

<ul> に .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). In this version, new features continue...
  • 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...
  • 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
<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-2018 杜甫々
初版:2015年9月6日 最終更新:2018年6月17日
http://www.tohoho-web.com/bootstrap/media_object.html