انتقل إلى محتوى الدرس

Bootstrap 4 Media Objects

ستتعلم في هذا الدرس تنسيق ال Media Objects مثل الصور والفيدوهات ببساطة عن طريق ال media ؤخىفشهىثق باستخدام ال Bootstrap

1 صفوف تعليمية
Bootstrap
3,090 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

ال Bootstrap يدعم طريقة سهله لتنسيق ال Media Objects مثل الصور والفيدوهات مع المحتوي النصي مثل ال comments وال blogs comments وال tweets

لانشاء ال media object Container استخدم ال media class لعمل ال Container ولعمل المحتوي الزي بجانب ال media استخدم media-body class

HTML
<div class="container-fluid mt-3">
  <div class="media border p-3">
    <img src="https://www.closetag.com/images/avatar1.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <h4>Mohamed Adly <small><i>Posted on February 27, 2014</i></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>