技术无忧-Bootstrap4 教程-Bootstrap4 多媒体对象

Bootstrap4 教程

Bootstrap4 教程简介 Bootstrap4 安装使用 Bootstrap4 网格系统 Bootstrap4 文字排版 Bootstrap4 颜色 Bootstrap4 表格 Bootstrap4 图形形状 Bootstrap4 Jumbotron Bootstrap4 信息提示框 Bootstrap4 按钮 Bootstrap4 按钮组 Bootstrap4 徽章 Bootstrap4 进度条 Bootstrap4 分页 Bootstrap4 列表组 Bootstrap4 卡片 Bootstrap4 下拉菜单 Bootstrap4 折叠 Bootstrap4 导航 Bootstrap4 导航栏 Bootstrap4 面包屑导航 Bootstrap4 表单 Bootstrap4 表单控件 Bootstrap4 输入框组 Bootstrap4 自定义表单 Bootstrap4 轮播 Bootstrap4 模态框 Bootstrap4 提示框 Bootstrap4 弹出框 Bootstrap4 滚动监听 Bootstrap4 小工具 Bootstrap4 Flex布局 Bootstrap4 多媒体对象

Bootstrap 4 多媒体对象

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

基础多媒体对象

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

                
                    
                        <
                        div 
                        class
                        ="
                        media border p-3
                        ">
                    
                    
                          <
                        img 
                        class
                        ="
                        mr-3 mt-3 rounded-circle
                        " 
                        style
                        ="
                        width:60px;height:60px;
                        " 
                        src
                        ="
                        qiao.png
                        " 
                        alt
                        ="
                        qiao
                        ">
                    
                    
                          <
                        div 
                        class
                        ="
                        media-body
                        ">
                    
                    
                            <
                        h4
                        >
                        这是标题
                        </
                        h4
                        >
                    
                    
                            <
                        p
                        >
                        这是内容！
                        </
                        p
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                        </
                        div
                        >

效果：

多媒体对象

使用 .media 和 .media-body 类创建多媒体对象：

这是标题

这是内容！

多媒体对象嵌套

多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中：

                
                    
                        <
                        div 
                        class
                        ="
                        media border p-3
                        ">
                    
                    
                          <
                        img 
                        class
                        ="
                        mr-3 mt-3 rounded-circle
                        " 
                        style
                        ="
                        width:60px;height:60px;
                        " 
                        src
                        ="
                        qiao.png
                        " 
                        alt
                        ="
                        qiao
                        ">
                    
                    
                          <
                        div 
                        class
                        ="
                        media-body
                        ">
                    
                    
                            <
                        h4
                        >
                        这是标题
                        </
                        h4
                        >
                    
                    
                            <
                        p
                        >
                        这是内容！
                        </
                        p
                        >
                    
                    
                            <
                        div 
                        class
                        ="
                        media p-3
                        ">
                    
                    
                              <
                        img 
                        class
                        ="
                        mr-3 mt-3 rounded-circle
                        " 
                        style
                        ="
                        width:60px;height:60px;
                        " 
                        src
                        ="
                        qiao.png
                        " 
                        alt
                        ="
                        qiao
                        ">
                    
                    
                              <
                        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 
                        class
                        ="
                        mr-3 mt-3 rounded-circle
                        " 
                        style
                        ="
                        width:60px;height:60px;
                        " 
                        src
                        ="
                        qiao.png
                        " 
                        alt
                        ="
                        qiao
                        ">
                    
                    
                        </
                        div
                        >

效果：

图片显示在右边

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

这是标题

这是内容！

定位多媒体图片位置

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

                
                    <!-- 头部 -->
                    
                        <
                        div 
                        class
                        ="
                        media
                        ">
                    
                    
                          <
                        img 
                        class
                        ="
                        align-self-start mr-3
                        " 
                        style
                        ="
                        width:60px;
                        " 
                        src
                        ="
                        qiao.png
                        " 
                        alt
                        ="
                        qiao
                        ">
                    
                    
                          <
                        div 
                        class
                        ="
                        media-body
                        ">
                    
                    
                            <
                        h4
                        >
                        这是标题
                        </
                        h4
                        >
                    
                    
                            <
                        p
                        >
                        这是内容！
                        </
                        p
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                        </
                        div
                        >
                    
                    <!-- 居中 -->
                    
                        <
                        div 
                        class
                        ="
                        media
                        ">
                    
                    
                          <
                        img 
                        class
                        ="
                        align-self-center mr-3
                        " 
                        style
                        ="
                        width:60px;
                        " 
                        src
                        ="
                        qiao.png
                        " 
                        alt
                        ="
                        qiao
                        ">
                    
                    
                          <
                        div 
                        class
                        ="
                        media-body
                        ">
                    
                    
                            <
                        h4
                        >
                        这是标题
                        </
                        h4
                        >
                    
                    
                            <
                        p
                        >
                        这是内容！
                        </
                        p
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                        </
                        div
                        >
                    
                    <!-- 底部 -->
                    
                        <
                        div 
                        class
                        ="
                        media
                        ">
                    
                    
                          <
                        img 
                        class
                        ="
                        align-self-end mr-3
                        " 
                        style
                        ="
                        width:60px;
                        " 
                        src
                        ="
                        qiao.png
                        " 
                        alt
                        ="
                        qiao
                        ">
                    
                    
                          <
                        div 
                        class
                        ="
                        media-body
                        ">
                    
                    
                            <
                        h4
                        >
                        这是标题
                        </
                        h4
                        >
                    
                    
                            <
                        p
                        >
                        这是内容！
                        </
                        p
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                        </
                        div
                        >

效果：

多媒体对象

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

头部-这是标题

这是内容！

居中-这是标题

这是内容！

底部-这是标题

这是内容！