一、在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. mysql导出导入数据库和表学习笔记

    一.mysql导出数据库和表 1.导出单个数据库 mysqldump [-h Host] -u Username -p [PASSWORD] db_name > db_name.sql 2.导出 ...

  2. electron-vue打包出现问题汇总

    打包过程中出现下载status code 404 1.可能是网络不好,导致相关electron包无法正常下载,也有可能是需要挂代理 2.可能是编译过程的链接出现错误,一般为网址中缺少或多了一个v,建议 ...

  3. 使用Docker-compose搭建nginx-keepalived双机热备来实现高可用nginx集群

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_117 最近同学出去面试经常会被问到一个问题. 面试官:你说你们公司使用nginx反向代理tornado,部署了多少多少台机器,好像 ...

  4. Apache DolphinScheduler 1.3.8 发布

    小伙伴们  Apache DolphinScheduler 1.3.8 发布 2021年9月7日,正式发布 在 1.3.8 版本中,我们在 Docker&k8s 这里做了许多优化,Docker ...

  5. 成为 Apache 贡献者，So easy！

    点击上方蓝字关注 Apache DolphinScheduler Apache DolphinScheduler(incubating),简称"DS", 中文名 "海豚调 ...

  6. MapReduce入门实战

    MapReduce 思想 MapReduce 是 Google 提出的一个软件架构,用于大规模数据集的并行运算.概率"Map(映射)"和"Reduce(归约)" ...

  7. Git 使用技巧（一）：合并分支

    在合并分支之前最好保证你所有的分支都是最新的,所以你可以使用 git pull origin branchName 来拉取远程仓库到本地仓库. 假如有一个 dev 分支需要合并到 master 分支中 ...

  8. 痞子衡嵌入式：MCUXpresso IDE下设置代码编译优化等级的几种方法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是MCUXpresso IDE下设置代码编译优化等级的几种方法. 最近公司芯片设计团队正在开发一款全新的基于 Cortex-M33 内核的 ...

  9. 华南理工大学 Python第2章课后小测-1

    1.(单选)"abc"的长度是3,"老师好"的长度是多少?(本题分数:4)A) 1B) 3C) 6D) 9您的答案:B  正确率:100%2.(单选)下面代码的 ...

  10. Django ORM 实现数据的单表 增删改查

    一.配置环境 1 Django 连接数据库(MySQL) DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME' ...