كائنات وسائط Bootstrap
كائنات الوسائط
يوفر Bootstrap طريقة سهلة لمحاذاة كائنات الوسائط (مثل الصور أو مقاطع الفيديو) إلى يسار أو يمين بعض المحتويات. يمكن استخدام هذا لعرض تعليقات المدونة والتغريدات وما إلى ذلك:
John Doe نُشر في 19 فبراير 2016
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
جين دو تم النشر في 20 فبراير 2016
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
أليسيا كيز نُشرت في 25 فبراير 2016
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين. ليس هناك خوف من الجريمة أو الراحة قبل العرض.
كائن الوسائط الأساسية
فلان الفلاني
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
فلان الفلاني
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
مثال
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
شرح المثال
استخدم عنصر <div> مع .mediaالفئة لإنشاء حاوية لكائنات الوسائط.
استخدم .media-leftالفئة لمحاذاة كائن الوسائط (الصورة) إلى اليسار ، أو .media-rightالفصل لمحاذاة الكائن إلى اليمين.
يتم وضع النص الذي يجب أن يظهر بجوار الصورة داخل حاوية بها class = " media-body".
بالإضافة إلى ذلك ، يمكنك استخدامها .media-headingللعناوين.
المحاذاة العلوية أو الوسطى أو السفلية
يمكن أيضًا أن يكون كائن الوسائط أعلى أو وسط أو أسفل بمحاذاة media-top، media-middleأو media-bottomالفئة:
ميديا توب
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
ميديا ميدل
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
أسفل الوسائط
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
مثال
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
كائنات الوسائط المتداخلة
يمكن أيضًا أن تتداخل كائنات الوسائط (كائن وسائط داخل كائن وسائط):
مثال
John Doe نُشر في 19 فبراير 2016
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
John Doe نُشر في 20 فبراير 2016
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
John Doe تم النشر في 21 من شباط عام 2016
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
مثال آخر على التعشيش
مثال
John Doe نُشر في 19 فبراير 2016
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
John Doe نُشر في 20 فبراير 2016
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
John Doe تم النشر في 21 من شباط عام 2016
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
جين دو تم النشر في 20 فبراير 2016
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.
جين دو تم النشر في 19 فبراير 2016
الألم بحد ذاته هو حب الألم ، المشاكل البيئية الرئيسية ، لكني أعطي هذا النوع من الوقت للتراجع ، بحيث يكون هناك بعض الألم والألم العظيمين.