在 Bootstrap v5.0.0-alpha1 中，我可以将什么用于媒体 (BS 3/4)? [英] In Bootstrap v5.0.0-alpha1 what can I use for media (BS 3/4)?

查看：24
本文介绍了在 Bootstrap v5.0.0-alpha1 中，我可以将什么用于媒体 (BS 3/4)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在 Bootstrap v5.0.0-alpha1 中使用媒体对象，但如何使用?

在 Bootstrap 3 中4、我是这样使用的:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"><div class="container mt-3"><h2>媒体对象</h2><p>使用 .media 和 .media-body 类创建媒体对象:</p><div class="媒体边框 p-3"><img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe"class="mr-3 mt-3 rounded-circle" style="width:60px;"><div class="media-body"><h4>John Doe <small>发表于 2016 年 2 月 19 日</small></h4><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboure et多洛雷·麦格纳 aliqua.</p>

在 v5.0.0-alpha1 中，我可以将哪个类用于媒体对象?我在 Bootstrap 5 中找不到任何名为media"的类.

解决方案

由于 Bootstrap 删除了媒体对象"在第 5 版中，您将不得不改用实用程序类.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css"/><div class="container mt-3"><h2>媒体对象</h2><p>创建一个没有 .media 和 .media-body 类 (BS5) 的媒体对象:</p><div class="d-flex border p-3"><img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe"class="flex-shrink-0 me-3 mt-3 rounded-circle" style="width:60px;height:60px;"><div><h4>John Doe <small>发表于 2016 年 2 月 19 日</small></h4><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboure et多洛尔·麦格纳 aliqua.</p>

I want to use a media object in Bootstrap v5.0.0-alpha1, but how?

In Bootstrap 3 & 4, I'm using it like this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container mt-3">
<h2>Media Object</h2>
<p>Create a media object with the .media and .media-body classes:</p>
<div class="media border p-3">
    <img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe"
         class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
        <h4>John Doe <small>Posted on February 19, 2016</small></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
    </div>
</div>
</div>

In v5.0.0-alpha1, which class can I use for a media object? I was unable to find any class named 'media' in Bootstrap 5.

解决方案

Since Bootstrap dropped the "media object" in version 5, you will have to use the utility classes instead.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css"/>

<div class="container mt-3">
<h2>Media Object</h2>
<p>Create a media object without .media and .media-body classes (BS5):</p>
<div class="d-flex border p-3">
    <img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe"
         class="flex-shrink-0 me-3 mt-3 rounded-circle" style="width:60px;height:60px;">
    <div>
        <h4>John Doe <small>Posted on February 19, 2016</small></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
    </div>
</div>
</div>

这篇关于在 Bootstrap v5.0.0-alpha1 中，我可以将什么用于媒体 (BS 3/4)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆