BootStrap 媒体对象

最新推荐文章于 2023-10-17 11:53:00 发布

xunbaogang

最新推荐文章于 2023-10-17 11:53:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： # BootStrap

本文链接：https://blog.youkuaiyun.com/xunbaogang/article/details/51984799

BootStrap 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个使用媒体对象布局的例子，展示了如何将图片与文本结合显示，并提供了媒体列表的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

媒体对象可以包含图片、视频或者音频等媒体，以达到对象和文本组合显示的样式效果

基本示例
<div class="media">
   <div class="media-left">
       <img src="img/1.jpg" alt="" class="media-object" />
   </div>
   <div class="media-body">
       <h4 class="media-heading">红杏</h4>
       <p>
           杏（学名：Armeniaca vulgaris Lam.）落叶乔木。地生，植株无毛。叶互生，阔卵形或圆卵形叶子，边缘有钝锯齿；近叶柄顶端有二腺体；淡红色花单生或2-3个同生，白色或微红色。圆、长圆或扁圆形核果，果皮多为白色、黄色至黄红色，向阳部常具红晕和斑点；暗黄色果肉，味甜多汁；核面平滑没有斑孔，核缘厚而有沟纹。种仁多苦味或甜味。花期3-4月，果期6-7月。
       </p>
   </div>

</div>

媒体列表: 在跟帖回复的时候经常用到

<ul class="media-list">
   <li class="media">
       <div class="media-right">
           <img src="img/1.jpg" alt="" class="media-object" />
       </div>
       <div class="media-body">
           <h4 class="media-heading">红杏</h4>
           <p>
               杏（学名：Armeniaca vulgaris Lam.）落叶乔木。地生，植株无毛。叶互生，阔卵形或圆卵形叶子，边缘有钝锯齿；近叶柄顶端有二腺体；淡红色花单生或2-3个同生，白色或微红色。圆、长圆或扁圆形核果，果皮多为白色、黄色至黄红色，向阳部常具红晕和斑点；暗黄色果肉，味甜多汁；核面平滑没有斑孔，核缘厚而有沟纹。种仁多苦味或甜味。花期3-4月，果期6-7月。
           </p>
           <div class="media">
               <div class="media-right">
                   <img src="img/1.jpg" alt="" class="media-object" />
               </div>
               <div class="media-body">
                   <h4 class="media-heading">红杏</h4>
                   <p>
                       杏（学名：Armeniaca vulgaris Lam.）落叶乔木。地生，植株无毛。叶互生，阔卵形或圆卵形叶子，边缘有钝锯齿；近叶柄顶端有二腺体；淡红色花单生或2-3个同生，白色或微红色。圆、长圆或扁圆形核果，果皮多为白色、黄色至黄红色，向阳部常具红晕和斑点；暗黄色果肉，味甜多汁；核面平滑没有斑孔，核缘厚而有沟纹。种仁多苦味或甜味。花期3-4月，果期6-7月。
                   </p>
               </div>
           </div>
       </div>
   </li>
   <li class="media">
       <div class="media-right">
           <img src="img/1.jpg" alt="" class="media-object" />
       </div>
       <div class="media-body">
           <h4 class="media-heading">红杏</h4>
           <p>
               杏（学名：Armeniaca vulgaris Lam.）落叶乔木。地生，植株无毛。叶互生，阔卵形或圆卵形叶子，边缘有钝锯齿；近叶柄顶端有二腺体；淡红色花单生或2-3个同生，白色或微红色。圆、长圆或扁圆形核果，果皮多为白色、黄色至黄红色，向阳部常具红晕和斑点；暗黄色果肉，味甜多汁；核面平滑没有斑孔，核缘厚而有沟纹。种仁多苦味或甜味。花期3-4月，果期6-7月。
           </p>
       </div>
   </li>
</ul>