نمادها

شما اینجا هستید

آموزش Bootstrap جلسه بیست و هشتم (Media Object)

در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و هشتم (Media Object)

آموزش Bootstrap جلسه بیست و هشتم (Media Object) از سری آموزش های تک قسمتی است

سلام برنامه در این آموزش به شما نحوه کار با media Object را یاد می دهد

به واسطه این آموزش می توانید صفحه کامنت سایتتان را طراحی کنید

یکی از مشکلات عمده بخش کامنت رسپانسیو نبودن آن است

در این آموزش به واسطه کلاس های بوت استرپ می توانید بخش کامنت را در سایت خود راه اندازی کنید

همچنین می توانید در بخش کامنت خود از تصاویر و آواتار کاربران نیز استفاده کنید

 

Media Objects

همانطور که بالاتر توضیح دادیم از مدیا آبجکت ها بیشتر در موارد کامنت گذاری و پرسش و پاسخ استفاده میشود یکی از مهمترین موارد برای سئو سایت ها بخش درگیر شدن کاربران است که توسط کامنت انجام میشود.بوت استرپ هم برای این بخش کلاس های زیاد و جالبی را قرار داده است.

یکی از مهمترین موارد در کامنت ها خوانایی آن ها است اینکه بتوان تشخیص داد چه کسی به چه کسی پاسخ داده است و این پاسخ ها تا چند مرحله تو در تو انجام شده است و دیگری خوانایی متن های قرار داده شده در کامنت است که مرتب باشد و در دستگاه های مختلف بهم ریختگی نداشته باشد.

بوت استرپ یک حالت پیشفرض برای نمایش کامنت ها دارد که حالت basic آن است شما میتوانید این حالت را در کد زیر ببینید:

همانطور که در کد بالا میبینید با دو کلاس media-left و media-right شما میتوانید قرار گرفتن آواتار شخ کامنت دهنده را تعیین کنید که در راست مطلب قرار بگیرد و یا در چپ مطلب قرار داشته باشد.

 

کلاس های Media

برای استفاده از حالت کامنت ما از کلاس media  استفاده میکنیم و باقی کلاس ها نظیر media-body و media-heading را داخل آن قرار میدهیم هر کدام از کلاس ها را روی کد برای شما نشان میدهیم تا واضح تر باشند. همچنین با استفاده از کلاس های media-top و media-middle و media-bottom میتوانید تعیین کنید که تویر آواتار نسبت به متن چه موقعیتی داشته باشد یعنی بالاتر از متن قرار گیرد هم سطح با متن باشد یا پایین تر از متن باشد .

تمام موارد توضیح داده شده در کد بالا موجود است که میتوانید از آن استفاده کنید.

 

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

همانطور که گفته شد برای خوانایی کامنت ها باید از حالت تودرتو استفاده کنیم تا مشخص باشد که هرکامنت در جواب به کامنتی دیگر است یا به صورت مستقل بیان شده است. اینکه چگونه باید این حالت را به وجود آورد مشابه حالت ایجاد پاراگراف در برنامه وورد است که ابتدای پاراگراف یک تو رفتگی دارد در اینجا هم کامنتی که در جواب کامنتی دیگر است یک مرحله تو تر میرود برای واضح بودن موضوع تصویر زیر مثال مناسبی است:

با توجه به تصویر بد نیست که شما یک نمونه کد از این حالت را ببینید اما قبل از آن به نکته ای توجه کنید.

استفاده از کامنت های تودرتو خود را به ۳ پاسخ محدود کنید چراکه از خوانایی کامنت ها میکاهد

به عنوان آخرین مورد برای بهینه تر بودن سایت شما:

اگر از بخش کامنت در سایت خود استفاده میکنید حتما به نکته ای توجه کنید آن هم اینکه کامنت های خیلی قدیمی را پاک کنید و ترتیب نمایش کامنت در سایت خود به صورت جدیدترین کامنت در بالا قرار دهید چرا که تعداد زیاد کامنت باعث سنگینی یک صفحه میشود و لود آن را دچار مشکل میکند.

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و هفتم (Input Sizing)

آموزش Bootstrap جلسه بیست و نهم (Carousel)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

 

و یا آن را در آپارت مشاهده کنید

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (5 رای, میانگین: 4٫80 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه بیست وهشتم (Media Object): نوع فایل:mp4 حجم فایل:50.09 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

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