在Bootstrap v5.0.0-alpha 1中,我可以使用哪些媒体(BS 3/4)?

h22fl7wq  于 12个月前  发布在  Bootstrap
关注(0)|答案(3)|浏览(184)

我想在Bootstrap v5.0.0-alpha 1中使用媒体对象,但如何使用?
在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>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>

字符串
v5.0.0-alpha1中,我可以使用哪个类作为媒体对象?我在Bootstrap 5中找不到任何名为“media”的类。

bvhaajcl

bvhaajcl1#

在Bootstrap 5中,.media对象已被删除。相反,您可以使用沿着flexbox的实用程序类来创建类似的布局。

<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>

字符串

qcbq4gxm

qcbq4gxm2#

Bootstrap 5的文档说明了如何使用卡来实现旧的媒体对象布局。https://getbootstrap.com/docs/5.0/components/card/#horizontal
举例来说:

<div class="card mb-3 border-0">
    <div class="row g-3">
        <div class="col-md-4">
            <svg class="bd-placeholder-img" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></svg> 
        </div>
        <div class="col-md-8">
            <div class="card-body p-0">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
</div>

字符串

stszievb

stszievb3#

对于那些只使用Bootstrap的网格部分的人来说,你可以实现这样的媒体对象布局:

<figure class="row">
    <p class="col-auto">
      <img src="https://placeimg.com/100/100/animals" alt="A cute animal">
    </p>
    <figcaption class="col">Look at the cute animal</figcaption>
  </figure>

字符串
col-auto将列收缩 Package 到内容的宽度(在上面的示例中,是图像),col只是占用(或分配,如果有多个)剩余的空间。有关更多信息,请参阅文档。

相关问题