Bootstrap Media Objects
ستتعلم في هذا الدرس تنسيق ال Media Objects مثل الصور والفيدوهات ببساطة عن طريق ال media ؤخىفشهىثق باستخدام ال 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
