Bootstrap 多媒体对象

前言 🔗

  • Bootstrap 中的多媒体对象(Media Object),如:图像、视频、音频等。

1、多媒体对象

  • 多媒体对象的样式可用于创建各种类型的组件(比如:博客评论),可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <div class="container">
    <h2>多媒体对象</h2>

    <!-- 左对齐 -->
    <div class="media">
    <div class="media-left">
    <img src="https://demo.qianchia.com/media/image/avatar.png" class="media-object" style="width: 60px;" />
    </div>
    <div class="media-body">
    <h4 class="media-heading">左对齐</h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
    </div>
    <hr>

    <!-- 右对齐 -->
    <div class="media">
    <div class="media-body">
    <h4 class="media-heading">右对齐</h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
    <div class="media-right">
    <img src="https://demo.qianchia.com/media/image/avatar.png" class="media-object" style="width: 60px;" />
    </div>
    </div>
    </div>
  • 效果 🔗

  • 解析

    • <div> 元素上添加 .media 类来创建一个多媒体对象。
    • 使用 .media-left 类让多媒体对象 (图片) 来实现左对齐,同样 .media-right 类实现了右对齐。
    • 文本内容放在 class="media-body" 的 div 中,图片左对齐则放在 class="media-body" 之前,图片右对齐则放在 class="media-body" 之后。

2、顶部、底部、居中对齐

  • 多媒体对象可以设置头部、居中、底部对齐,对应的类分别是 .media-top.media-middle.media-bottom

  • 此外,还可以使用 .media-heading 类来设置标题。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <div class="container">
    <h2>多媒体对象</h2>

    <div class="media">
    <div class="media-left media-top">
    <img src="https://demo.qianchia.com/media/image/avatar.png" class="media-object" style="width: 80px" />
    </div>
    <div class="media-body">
    <h4 class="media-heading">置顶</h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
    </div>
    <hr>
    <div class="media">
    <div class="media-left media-middle">
    <img src="https://demo.qianchia.com/media/image/avatar.png" class="media-object" style="width: 80px" />
    </div>
    <div class="media-body">
    <h4 class="media-heading">居中</h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
    </div>
    <hr>
    <div class="media">
    <div class="media-left media-bottom">
    <img src="https://demo.qianchia.com/media/image/avatar.png" class="media-object" style="width: 80px" />
    </div>
    <div class="media-body">
    <h4 class="media-heading">置底</h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
    </div>
    </div>
  • 效果 🔗

3、内嵌多媒体对象

  • 一个多媒体对象内还可以包含多个多媒体对象。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <div class="container">
    <h2>内嵌多媒体对象</h2>

    <div class="media">
    <div class="media-left">
    <img src="https://demo.qianchia.com/media/image/avatar.png" class="media-object" style="width: 45px" />
    </div>
    <div class="media-body">
    <h4 class="media-heading">RUNOOB-1 <small><i>Posted on February 19, 2016</i></small></h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>

    <!-- 内嵌多媒体对象 -->
    <div class="media">
    <div class="media-left">
    <img src="https://demo.qianchia.com/media/image/avatar.png" class="media-object" style="width: 45px" />
    </div>
    <div class="media-body">
    <h4 class="media-heading">RUNOOB-2 <small><i>Posted on February 19, 2016</i></small></h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>

    <!-- 内嵌多媒体对象 -->
    <div class="media">
    <div class="media-left">
    <img src="https://demo.qianchia.com/media/image/avatar.png" class="media-object" style="width: 45px" />
    </div>
    <div class="media-body">
    <h4 class="media-heading">RUNOOB-3 <small><i>Posted on February 19, 2016</i></small></h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
  • 效果 🔗

文章目录
  1. 1. 前言 🔗
  2. 2. 1、多媒体对象
  3. 3. 2、顶部、底部、居中对齐
  4. 4. 3、内嵌多媒体对象
隐藏目录