Bootstrap4 多媒体对象

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

基础多媒体对象

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

实例

<
div

class
=
"
media border p-3
"
>

<
img

decoding
=
"
async
"

src
=
"
mobile-icon.png
"

alt
=
"
John Doe
"

class
=
"
mr-3 mt-3 rounded-circle
"

style
=
"
width:60px;
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
菜鸟教程
h4
>

<
p
>
学的不仅是技术，更是梦想！！！
p
>

div
>

div
>

尝试一下 »

多媒体对象嵌套

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

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

实例

<
div

class
=
"
media border p-3
"
>

<
img

decoding
=
"
async
"

src
=
"
mobile-icon.png
"

alt
=
"
John Doe
"

class
=
"
mr-3 mt-3 rounded-circle
"

style
=
"
width:60px;
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
菜鸟教程
h4
>

<
p
>
学的不仅是技术，更是梦想！！！
p
>

<
div

class
=
"
media p-3
"
>

<
img

decoding
=
"
async
"

src
=
"
mobile-icon.png
"

alt
=
"
Jane Doe
"

class
=
"
mr-3 mt-3 rounded-circle
"

style
=
"
width:45px;
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
菜鸟教程
h4
>

<
p
>
学的不仅是技术，更是梦想！！！
p
>

div
>

div
>

div
>

div
>

尝试一下 »

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

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

实例

<
div

class
=
"
media border p-3
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
菜鸟教程
h4
>

<
p
>
学的不仅是技术，更是梦想！！！
p
>

div
>

<
img

decoding
=
"
async
"

src
=
"
mobile-icon.png
"

alt
=
"
John Doe
"

class
=
"
ml-3 mt-3 rounded-circle
"

style
=
"
width:60px;
"
>

div
>

尝试一下 »

定位多媒体图片位置

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

实例

<
div

class
=
"
media
"
>

<
img

decoding
=
"
async
"

src
=
"
https://static.cdcxhl.com/images/mobile-icon.png
"

class
=
"
align-self-start mr-3
"

style
=
"
width:60px
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
头部 -- 菜鸟教程
h4
>

<
p
>
学的不仅是技术，更是梦想！！！
p
>

div
>

div
>



<
div

class
=
"
media
"
>

<
img

decoding
=
"
async
"

src
=
"
https://static.cdcxhl.com/images/mobile-icon.png
"

class
=
"
align-self-center mr-3
"

style
=
"
width:60px
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
居中 -- 菜鸟教程
h4
>

<
p
>
学的不仅是技术，更是梦想！！！
p
>

div
>

div
>



<
div

class
=
"
media
"
>

<
img

decoding
=
"
async
"

src
=
"
https://static.cdcxhl.com/images/mobile-icon.png
"

class
=
"
align-self-end mr-3
"

style
=
"
width:60px
"
>

<
div

class
=
"
media-body
"
>

<
h4
>
底部 -- 菜鸟教程
h4
>

<
p
>
学的不仅是技术，更是梦想！！！
p
>

div
>

div
>

尝试一下 »

分享标题：创新互联Bootstrap4教程：Bootstrap4多媒体对象
文章链接：http://www.mswzjz.cn/qtweb/news46/391146.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能