قسمت سی و چهارم bootstrap : نحوه ی استفاده از Media Objects در بوت استرپ 4

خانه » مقالات اموزشی » قسمت سی و چهارم bootstrap : نحوه ی استفاده از Media Objects در بوت استرپ 4
Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت سی و چهارم bootstrap : نحوه ی استفاده از Media Objects در بوت استرپ 4

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

Calendar-amico (2)

تاریخ انتشار:

2021-08-03

Work time-rafiki

زمان مطالعه:

5 دقیقه

هرسایتی برای ارتباط بهتر با کاربران خود از رسانه ها و اشتراک های خاصی استفاده می کند . در این قسمت از آموزش های رایگان بوت استرپ باهم به ساخت یک Media Objects برای نمایش بهتر رسانه های سایت پرداخته ایم.

Media Objects

بوت استرپ یک راه سریع برای نمایش رسانه های شما مانند ( عکس یا ویدئوها ) در کنار محتواها را قرار داده است. Media Objects ها بیشتر در ساخت بخش کامنت ها ، نظرات مشتریان ، تویت ها و …. مورد استفاده قرار میگیرند.

Media Objects پایه

برای ساخت یک رسانه ی پایه کافی است از کلاس .media در المان اصلی خود استفاده کنیم ، همچنین برای قراردادن محتواها از داخل رسانه از کلاس .media-body برای زیر المان ها باید استفاده کنیم. برای درک بهتر این موضوع قطعه کد زیر را اجرا کنید :

رسانه های تو در تو

این نوع رسانه ها معمولا برای پاسخ دادن به نظرات استفاده می شود . برای ساخت رسانه های تو در تو کافی است کلاس .media را همانند مثال قبل در دل کلاس .media-body بسازید. برای درک بهتر این موضوع به قطعه کد زیر توجه کنید :

قرادادن تصویر در سمت راست رسانه

برای قراردادن عکس در سمت راست رسانه کافی است تگ img را در دل کلاس .media-body قرار دهید. برای درک بهتر قطعه کدزیر را اجرا کنید :

ترازهای مختلف تصویر

برای ترازکردن طبق آموزش فلکس باکس ها از کلاس .align-self-* استفاده می شود. پیشنهاد می کنم قبل از اجرا کردن قطعه کد زیر آموزش کامل flexbox را ببینید. همچنین برای درک بهتر این موضوع می توانید قطعه کد زیر را اجرا کنید :

 

برای دریافت اطلاعات بیشتر و دیدن مثالهای بیشتر از بوت استرپ می توانید به سایت getbootstrap مراجعه فرمایید.

همچنین برای دریافت جزئیات بیشتر می توانید از آموزش رایگان بوت استرپ 4 استفاده کنید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

دیدگاهتان را بنویسید