آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

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

دوره های مرتبط با این مقاله

آموزش کار با Media Object در بوت استرپ 4:

بوت استرپ 4، راه حل ساده ای برای چینش Media Object یا فایل های رسانه ای مثل عکس یا ویدیو درون سایر محتواها را فراهم کرده است. از فایل های رسانه ای معمولا در بخش نظرات بلاگ ها، پست های شبکه های اجتماعی و ... استفاده می شود.

شکل زیر، یک مکالمه ساده بین دو کاربر در یک انجمن را با استفاده از کلاس های جدید بوت استرپ 4، در قالبی زیبا نمایش داده است :

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

آموزش ایجاد فایل رسانه ساده Basic Media Object:

شکل زیر، نحوه قرار دادن یک عکس را درون سایر محتویات صفحه متوسط کلاس های جدید بوت استرپ 4 نشان داده است :

آموزش ایجاد فایل رسانه ساده Basic Media Object

برای ایجاد یک شی رسانه ای (Media Object)، کلاس media را به عنصر دربرگیرنده یا Container اضافه کرده و فایل رسانه (عکس یا ویدیو) را درون عنصر فرزند آن که دارای کلاس media-body است، قرار دهید. به میزان مورد نظر حاشیه درونی (padding) و مارجین (margin) تعیین کرده و برای این کار از کلاس های کاربری ویژه بوت استرپ 4 (utility Classes) استفاده کنید، همانند کد مثال عملی زیر :

مثال 1

John Doe

John Doe Posted on February 19, 2016

Lorem ipsum...

امتحان کنید

آموزش ایجاد فایل رسانه ای تو در تو Nested Media Object در Bootstrap 4:

یک فایل رسانه ای را می توانید درون یک فایل رسانه ای دیگر قرار دهید، همانند تصویر زیر :

آموزش ایجاد فایل رسانه ای تو در تو Nested Media Object در Bootstrap 4

برای تو در تو کردن فایل رسانه ای و قرار دادن یک Media Object درون یک شی دیگر (Nested)، فایل لازم را درون عنصر دربرگیرنده فایل اول که دارای کلاس media-body است، قرار دهید. همانند کد مثال عملی زیر :

مثال 2

John Doe

John Doe Posted on February 19, 2016

Lorem ipsum...

Jane Doe

Jane Doe Posted on February 20 2016

Lorem ipsum...

امتحان کنید

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

می توانید فایل رسانه ای (عکس یا ویدیو) را در سمت راست محتویات قرار دهید، همانند تصویر زیر :

آموزش راست چین کردن فایل رسانه ای در بوت استرپ 4

برای راست چین شدن فایل رسانه در محتویات (right-align)، کافی است تگ را پس از عنصر با کلاس media-body، قرار دهید، همانند کد مثال عملی زیر :

مثال 3

John Doe Posted on February 19, 2016

Lorem ipsum...

John Doe
امتحان کنید

آموزش ترازبندی بالا، پایین یا وسط فایل رسانه در Bootstrap 4:

از کلاس های کاربردی Flex Utility مخصوص بوت استرپ 4، برای تنظیم قرارگیری عمودی فایل رسانه ای استفاده کنید. برای این منظور، کلاس align-self-* را به تگ یا تگ فایل رسانه ای داده که در آن * یکی از 3 مقدار (start) بالا، وسط (center) و پایین (end) را دریافت می کند.

همانند کد مثال عملی زیر :

مثال 4


Media Top

Lorem ipsum...

Media Middle

Lorem ipsum...

Media Bottom

Lorem ipsum...

امتحان کنید
  • 19
  •    0
  • تاریخ ارسال :   1398/08/16

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .