一、在Bootstra5中使用媒体对象

Bootstrap 媒体对象在版本 5 中已经停止支持了。但是，我们仍然可以使用 flex 和 margin 创建包含左对齐或右对齐媒体对象（如图像或视频）以及文本内容（如博客评论、推文等）的布局 。

<!doctype html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

    <div class="row">

        <div class="col-md-2"></div>

        <div class="col-md-8">

        <br>

        <div class="d-flex">

            <div class="flex-shrink-0">

                <img src="img/xyz.png" class="rounded-circle" alt="Sample Image">

            </div>

            <div class="flex-grow-1 ms-3">

                <h5>Bootstrap 5 <small class="text-muted"><i>iyuyi.xyz@gmail.com</i></small></h5>

                <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

            </div>

        </div>

        <div class="col-md-2"></div>

    </div>

 </div>

</body>

</html>

显示的结果如下

我们还可以创建媒体对象的其他变体。

将 .rounded 或 .rounded-circle 等图像修饰符类应用于图像来创建圆角或圆形图像。

<div class="d-flex">

    <div class="flex-shrink-0">

        <img src="img/xyz.png" class="rounded-circle" alt="Sample Image">

    </div>

    <div class="flex-grow-1 ms-3">

        <h5>Bootstrap 5 <small class="text-muted"><i>iyuyi.xyz@gmail.com</i></small></h5>

        <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

    </div>

</div>

显示的结果如下

二、创建嵌套的媒体对象

媒体对象也可以嵌套在其他媒体对象中。

<div class="d-flex">

    <div class="flex-shrink-0">

        <img src="img/xyz.png" class="rounded-circle" alt="Sample Image">

    </div>

    <div class="flex-grow-1 ms-3">

        <h5>Bootstrap 5 <small class="text-muted"><i>iyuyi.xyz@gmail.com</i></small></h5>

        <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

        <!-- Nested media object -->

        <div class="d-flex mt-4">

            <div class="flex-shrink-0">

                <img src="img/xyz.png" class="rounded-circle" alt="Sample Image">

            </div>

            <div class="flex-grow-1 ms-3">

                <h5>Bootstrap 5 <small class="text-muted"><i>iyuyi.xyz@gmail.com</i></small></h5>

                <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

            </div>

        </div>

    </div>

</div>

嵌套媒体对象显示的结果如下

三、媒体对象对齐

我们还可以通过简单地调整 HTML 代码本身来更改内容以及媒体对象的水平对齐方式。

<div class="d-flex">

     <div class="flex-grow-1 me-3">

         <h5>Bootstrap 5 <small class="text-muted"><i>iyuyi.xyz@gmail.com</i></small></h5>

         <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

     </div>

     <div class="flex-shrink-0">

         <img src="img/xyz.png" alt="Sample Image">

     </div>

</div>

显示的结果如下

除此之外，我们还可以使用 flexbox 实用程序类在内容块的中间或底部对齐图像或其他媒体对象，例如，可以使用 .align-self-center 类进行垂直居中对齐，使用 .align-self-end 类用于底部对齐。

默认情况下，媒体对象内的媒体是顶部对齐的。

<!--顶部对齐媒体-->

<div class="d-flex">

    <div class="flex-shrink-0">

        <img src="img/xyz.png" width="60" height="60" alt="Sample Image">

    </div>

    <div class="flex-grow-1 ms-3">

        <h5>顶部对齐媒体 <small class="text-muted"><i>- 这是默认对齐方式</i></small></h5>

        <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

    </div>

</div>

<hr>

<!--居中对齐媒体-->

<div class="d-flex">

    <div class="flex-shrink-0 align-self-center">

        <img src="img/xyz.png" width="60" height="60" alt="Sample Image">

    </div>

    <div class="flex-grow-1 ms-3">

        <h5>居中对齐媒体</h5>

        <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

    </div>

</div>

<hr>

<!--底部对齐媒体-->

<div class="d-flex">

    <div class="flex-shrink-0 align-self-end">

        <img src="img/xyz.png" width="60" height="60" alt="Sample Image">

    </div>

    <div class="flex-grow-1 ms-3">

        <h5>底部对齐媒体</h5>

        <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

    </div>

</div>

显示的结果如下

Bootstrap5 如何创建多媒体对象的更多相关文章

  1. Bootstrap<基础二十七> 多媒体对象（Media Object）

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  2. BootStrap学习(5)_多媒体对象&列表组

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

  3. Bootstrap-CL：多媒体对象

    ylbtech-Bootstrap-CL:多媒体对象 1.返回顶部 1. Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media O ...

  4. bootstrap学习笔记 多媒体对象

    本文将介绍Bootstrap中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用 ...

  5. 创建javaScript对象的方法

    一.工厂模式 function person (name,age) { var p=new Object(); p.name=name; p.age=age; p.showMessage=functi ...

  6. .net下灰度模式图像在创建Graphics时出现：无法从带有索引像素格式的图像创建graphics对象 问题的解决方案。

    在.net下,如果你加载了一副8位的灰度图像,然后想向其中绘制一些线条.或者填充一些矩形.椭圆等,都需要通过Grahpics.FromImage创建Grahphics对象,而此时会出现:无法从带有索引 ...

  7. win7 装了VB虚拟机 开始挺好用 后来突然就打不开了 提示如下错误：（如图）创建 COM 对象失败.

    创建 COM 对象失败. 应用程序将被中断. Start tag expected, '<' not found. Location: 'C:\Users\Mike/.VirtualBox\Vi ...

  8. 在这个看脸的世界，该如何优雅的创建JS对象

    Javascript是一门解释型的语言,是基于对象的,严格来说并不怎么符合的面向对象的标准,显著的特点就是函数就是“一等对象”,与传统的面向对象语言不同的时,Javascript有“一千种”方法来创建 ...

  9. java 创建string对象机制 字符串缓冲池 字符串拼接机制

    对于创建String对象的机制,在这一过程中涉及的东西还是值得探究一番的. 首先看通过new String对象和直接赋值的方式有什么区别,看如下代码: public static void main( ...

随机推荐

  1. 弹性布局（ display: flex;）

    参考: https://www.cnblogs.com/hellocd/p/10443237.html

  2. 搞懂前端二进制系列（一）：🍇 认识Blob对象

    参考资料: https://juejin.cn/post/6844904183661854727 [你不知道的Blob] https://juejin.cn/post/6844904144453517 ...

  3. 有一种密码学专用语言叫做ASN.1

    目录 简介 ASN.1的例子 ASN.1中的内置类型 ASN.1中的限制语法 总结 简介 ASN.1是一种跨平台的数据序列化的接口描述语言.可能很多人没有听说过ASN.1, 但是相信有过跨平台编程经验 ...

  4. 从RabbitMQ平滑迁移到RocketMQ技术实战

    作者:vivo 互联网中间件团队- Liu Runyun 大量业务使用消息中间件进行系统间的解耦.异步化.削峰填谷设计实现.公司内部前期基于RabbitMQ实现了一套高可用的消息中间件平台.随着业务的 ...

  5. Odoo env.ref()函数

    python env.ref()函数作用是获取xml id记录. 1 action = self.env.ref('base.res_company_action').read()[0] 2 acti ...

  6. Vue脚手架（CLI）第一天

    vue 1.脚手架的搭建(CLI) 1.1.下载nodejs,在官网, [nodejs官网地址][ https://nodejs.org/en/ ] 无脑下一步就可以了.环境自动安装 1.2.下载脚手 ...

  7. Apache DolphinScheduler&TiDB联合Meetup | 聚焦开源生态发展下的应用开发能力

    在软件开发领域有一个流行的原则:Don't Repeat Yourself(DRY),翻译过来就是:不要重复造轮子.而开源项目最基本的目的,其实就是为了不让大家重复造轮子. 尤其是在大数据这样一个高速 ...

  8. springmvc静态资源配置

    <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class>org.springf ...

  9. 通俗理解ABP中的模块Module

    网上有不少文章说ABP的模块,有的直接翻译自官网介绍,有的分析Modlue的源代码,有的写一通代码,没什么注释,很少有能通俗说清的.那么,有两个问题:1.ABP中的模块到底是什么?2.搞这个东西是干嘛 ...

  10. 上传代码到GitHub仓库

    上传代码到GitHub仓库 准备工作 意思是自从 21 年 8 月 13 后不再支持用户名密码的方式验证了,需要创建个人访问令牌(personal access token). 这里就不多说了 Git ...