Bootstrap

Bootstrap Media Objects

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

التاريخ

08 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1145

المواضيع

6
الشروحات chevron_left Bootstrap Media Objects chevron_left Bootstrap

Bootstrap 4 Media Objects

</> Bootstrap 4 Media Objects

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

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

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

</> Nested Media Objects

قم باضافة media container جديد بداخل ال media-body container لعمل Nested Media Objects

</> Right-Aligned Media Image

<div class="media border p-3">
  <div class="media-body">
    <h4>Mohamed Adly  <small><i>Posted on February 29, 2014</i></small></h4>
    <p>Lorem ipsum...</p>
  </div>
  <img src="images/avatar1.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>

</> Top, Middle or Bottom Alignment

<!-- Media top -->
<div class="media">
  <img src="avatar1.png" class="align-self-start mr-3" style="width:60px">
  <div class="media-body">
    <h4>Media Top</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media middle -->
<div class="media">
  <img src="avatar1.png" class="align-self-center mr-3" style="width:60px">
  <div class="media-body">
    <h4>Media Middle</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media bottom -->
<div class="media">
  <img src="avatar1.png" class="align-self-end mr-3" style="width:60px">
  <div class="media-body">
    <h4>Media Bottom</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.