آموزش کار با فایل Media Object در بوت‌استرپ 4

  <img src=”https://myhamyar.com//bootstrap-4-media-objects/img_avatar3.png” alt=”myhamyar” class=”mr-3 mt-3 rounded-circle” style=”width:60px;”>

  <div class=”media-body”>

    <h4>همیار من <small><i>پست شده در 25 بهمن https://myhamyar.com/۱۳۹۹</i></small></h4>

    <p>راهکار کسب‌وکار اینترنتی</p>

  </div>

</div>​

_

Media Object دربوت‌استرپ

Media Object فایل‌های رسانه‌ای مانند تصاویر و ویدیوها هستند که در بوت‌استرپ4 به آن پرداخته شده است. از فایل‌های رسانه‌ای معمولا در بخش نظرات وبلاگ‌ها، شبکه‌های اجتماعی و … استفاده می‌شود.

بوت‌استرپ راه آسانی برای ترازبندی Media object با محتوا را در نظر گرفته است. برای ساخت این فایل‌های رسانه‌ای باید کلاس media. را به یک عنصر نگهدارنده اضافه کنید. سپس کلاس media-body. را به آن بدهید. به مثال زیر توجه کنید:

آموزش راست‌چین کردن فایل‌های رسانه‌ای:

حتما برای شما هم این سوال پیش آمده است که اگر بخواهید تصویر را در سمت راست صفحه وب قرار دهید، چکاری باید انجام دهید؟ در بوت‌استرپ برای قرار دادن تصویر در سمت راست، می‌توانید آن تصویر را پس از نگهدارنده media-body. اضافه کنید. به این مثال زیر دقت کنید:

ترازبندی در Media Object در بوت‌استرپ

از کلاس‌های کاربردی Flex Utility مخصوص بوت استرپ 4، برای تنظیم تراز و قرارگیری فایل‌های رسانه‌ای می توان استفاده کرد. برای این منظور می‌توان کلاس align-self-* را به تگ  یا تگ فایل رسانه ای داد. در این تگ در قسمت ” * ” با توجه به اینکه می‌خواهید فایل رسانه‌ای خود را در چه محلی قرار دهید، از یکی از 3 مقدار “start” ،”center” و “end” می‌توانید استفاده کنید. برای درک این موضوع به مثال زیر توجه فرمایید: