一、在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. Windows下通过dos来编译c语言源代码文件

    笔者阅览过网上许多的推荐,基本上都是推荐cl命令,但是因为笔者是通过dev c++入门的,不想放弃dev所以就强行使用dev来实现在dos下的编译以及运行 编译 注意:这边涉及到环境变量的配置,环境变 ...

  2. NoSQL,关系型数据库,行列数据库对比、类比

    数据库对比.类比 关系型数据库.NoSQL 关系型数据库 表与表之间有关系.表存储一些格式化的数据结构,每个元组字段的组成都一样,这样便于表之间的联结操作.不过也限制了其性能瓶颈. 更支持SQL,支持 ...

  3. 第十一天python3 递归函数

    递归Recursion 函数直接或者间接调用自身就是递归: 递归需要有边界条件,递归前进段.递归返回段: 递归一定要有边界条件: 当边界条件不满足的时候,递归前进: 当边界条件满足的时候,递归返回: ...

  4. 2499-springboot使用jar形式打包在linux上运行

    由于maven使用的种种问题,以前springboot版本变化较快带来的一些不兼容问题,是否考虑下使用jar形式运行web程序,而不是固守于war包与tomcat: 主要原理有两点: 使用nohup来 ...

  5. 以寡治众各个击破，超大文件分片上传之构建基于Vue.js3.0+Ant-desgin+Tornado6纯异步IO高效写入服务

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_218 分治算法是一种很古老但很务实的方法.本意即使将一个较大的整体打碎分成小的局部,这样每个小的局部都不足以对抗大的整体.战国时期 ...

  6. 成为 Apache 贡献者，从提交第一个简单 PR 开始！

    开源之路,PR 走起 ! ---全球最大同性交友社区 1 fork 以下实例以 incubator-dolphinscheduler 海豚调度为例进行操作 从远端仓库* https://github. ...

  7. Star (欧拉函数)

    题面 Fernando won a compass for his birthday, and now his favorite hobby is drawing stars: first, he ma ...

  8. idea中无法在@Test 之下使用Scanner

    //如何解决idea中无法在 @Test 之下使用Scanner@Testpublic void testInsert(){ Scanner scanner = new Scanner(System. ...

  9. java方法---可变参数

    可变参数 在方法的声明中,在指定参数类型后面加一个...(省略号) 一个方法中只能指定一个可变参数,它必须是方法的最后一个参数,任何普通参数必须在它之前声明:

  10. Java 解析Tiff深入研究

    最近在读取客户发过来的tiff文件是,底层竟然报错了,错误:bandOffsets.length is wrong!   没办法,因为错误消息出现在tiff的read中,因此就对 底层序中tiff读取 ...