Bootstrap4组件:媒体对象/图文混排(Media-object)


发布时间:2020-03-20 16:03    作者: Uncle Hui   已过去:4 月,3 周   阅读总量:297 已被赞:0


媒体对象/图文混排(Media-object)

示例

<div class="media">

<img src="images/sm.jpg" alt="" class="mr-3" width="64">

<!-- <a href="" class="pr-3"><img src="images/sm.jpg" alt="" width="64"></a> -->

<div class="media-body">

<h5 class="mt-0">标题</h5>

内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!

</div>

<!-- <img src="images/sm.jpg" alt="" class="ml-3" width="64"> -->

</div>

嵌套

媒体对象可以无限嵌套,尽管我们建议您在某些时候尽量减少网页的嵌套层级,但它在技术原理上来说是合法的,嵌套.media.media-body下面即可:

<div class="media">

<img src="images/sm.jpg" alt="" class="mr-3" width="64">

<div class="media-body">

<h5 class="mt-0">标题</h5>

内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!

 

<div class="media mt-3">

<img src="images/sm.jpg" alt="" class="mr-3" width="64">

<div class="media-body">

<h5 class="mt-0">标题</h5>

内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!

</div>

</div>

</div>

</div>

对齐

媒体对象中的媒体可以与flexbox流式布局一样,实现对齐到顶部、中间、底部,自由便利,只要在.media-body的父级加上img.align-self-start/center/end等属性。

列表呈现 my-4 表示拉开每个距离等于每个li都加mt-4

媒体对象的结构要求很少,您还可以在列表HTML元素上使用这些类,在<ul> or <ol>添加.list-unstyled从而删除浏览器默认列表样式,然后在li中添加.media元素块,也可以根据自己的需要进行间距调整。

<ul class="list-unstyled">

<li class="media">

<img src="images/sm.jpg" alt="" class="mr-3" width="64">

<div class="media-body">

<h5 class="mt-0">标题</h5>

内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!

</div>

</li>

<li class="media my-4">

<img src="images/sm.jpg" alt="" class="mr-3" width="64">

<div class="media-body">

<h5 class="mt-0">标题</h5>

内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!

</div>

</li>

<li class="media">

<img src="images/sm.jpg" alt="" class="mr-3" width="64">

<div class="media-body">

<h5 class="mt-0">标题</h5>

内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!内容!

</div>

</li>

</ul>

点赞

0




登陆后方可评论