Bootstrap 4 多媒体对象


Bootstrap 提供了很好的方式来处理多媒体对象(图片或视频)和内容的布局。应用场景有博客评论、微博等:

基础多媒体对象

要创建一个多媒体对象,可以在容器元素上添加 .media 类,然后将多媒体内容放到子容器上,子容器需要添加 .media-body 类,然后添加外边距,内边距等效果:

Bootstrap 4 多媒体对象

<div class="media border p-3">
  <img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px">
  <div class="media-body">
    <strong>蜻蜓树</strong>
    <p>一站式高端企业建站服务</p>
  </div>
</div>

多媒体对象嵌套

多媒体对象可以多个嵌套(一个多媒体对象中包含另外一个多媒体对象)

要嵌套多媒体对象,可以把新的 .media 容器放到 .media-body 容器中:

<div class="media border p-3">
  	<img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px">
  	<div class="media-body">
    	        <strong>蜻蜓树</strong>
    	        <p>一站式高端企业建站服务</p>
		<div class="media border p-3">
			<img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px">
			<div class="media-body">
				<strong>蜻蜓树</strong>
				<p>一站式高端企业建站服务</p>
			</div>
		</div>
  	</div>
</div>

Bootstrap 4 多媒体对象

多媒体对象图片显示在右边

如果你想将头像图片显示在右侧,可以在 .media-body 容器后添加图片:

<div class="media border p-3">
    <div class="media-body">
        <strong>蜻蜓树</strong>
    	<p>一站式高端企业建站服务</p>
    </div>
    <img src="footer.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px">
  </div>

Bootstrap 4 多媒体对象

定位多媒体图片位置

我们可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置:

<div class="container mt-3">
  多媒体对象
  <p>我们可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置:</p><br />
  <!-- 头部 -->
  <div class="media">
    <img src="footer.png" class="align-self-start mr-3" style="width:60px">
    <div class="media-body">
      顶部 - 蜻蜓树
      <p>一站式高端企业建站服务
      <p>一站式高端企业建站服务
      <p>一站式高端企业建站服务
    </div>
  </div>
  <!-- 居中 -->
  <div class="media mt-3">
    <img src="footer.png" class="align-self-center mr-3" style="width:60px">
    <div class="media-body">
      居中 - 蜻蜓树
      <p>一站式高端企业建站服务
      <p>一站式高端企业建站服务
      <p>一站式高端企业建站服务
    </div>
   </div>
  <!-- 底部 -->
  <div class="media mt-3">
    <img src="footer.png" class="align-self-end mr-3" style="width:60px">
    <div class="media-body">
      底部 - 蜻蜓树
      <p>一站式高端企业建站服务
      <p>一站式高端企业建站服务
      <p>一站式高端企业建站服务
    </div>
  </div>
</div>

Bootstrap 4 多媒体对象


<< Bootstrap 4 Flex(弹性)布局
  • 作者 建站迷

    建站迷

    让天下没有难做的网站!
    解决中小型企业的无站之伤。



没有账号? 忘记密码?

社交账号快速登录