campaign-experts

دوره مجازی بوت استرپ (جلسه 12) : جاوااسکریپت در بوت استرپ - بخش اول - مدال ها



visibility  
mode_comment   ۱۴

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

مطالب مطرح شده در این جلسه عبارتند از :

  • مدال چیست و چه کاربردی دارد
  • نحوه ایجاد مدال ها توسط بوت استرپ
  • معرفی کلاس modal
  • معرفی کلاس modal-dialog
  • معرفی کلاس modal-header
  • معرفی کلاس modal-body
  • معرفی کلاس modal-footer
  • نحوه فراخوانی مدال ها بصورت خودکار و بررسی توابع جاوااسکریپ آن
  • کنترل اجرای مدال ها با دکمه ها
  • بررسی اندازه مدال ها و معرفی کلاس های modal-xs و modal-lg
  • نحوه حذف اسکرول صفحه در هنگام فراخوانی مدال ها

مینی پروژه  طراحی گالری تصاویر توسط مدال ها:

  • نحوه فراخوانی داده های متعدد (تصاویر و ...) تنها در یک مدال بدون ایجاد مدال های متعدد برای هریک از تصاویر (مثالی برای استفاده داینامیک از مدال ها)
info توجه

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

ثبت نام در آموزش حرفه ای بوت استرپ

comment دیدگاه کاربران
حمید replyپاسخ

با سلام
میخواستم بدونم همانطور که از کدهای جاوا اسکریپت و جی کوئری که توی هسته بوتسترپ هست و میشه ازش استفاده کرد آیا ازکد های ایجکس هم میشه توی طراحیمون استفاده کنیم؟ منظورم اینه که کدهای ایجکس آماده توی هسته برای استفاده هست؟

وحید صالحی

سلام آقا حمید نه کد ajax موجود نیست کدهای جاوا اسکریپت بوت استرپ در واقع یک سری پلاگین هستند مانند انواع پلاگین های جاواسکریپت که برای ساده کردن کار طراحان درش گنجونده تا به منابع دیگه تا حد امکان نیاز نباشه مثلا توسط بوت استرپ شما میتونید یک اسلایدر یا مدال تحت جاوااسکریپت ایجاد کنید در حالی که در سطح وب هم انواع و اقسام مدال ها ,اسلایدر ها و … موجوده که در صورت تمایل میشه ازاونها استفاده کرد در واقع بوت استرپ یک بستر آماده و کامل از css ,html و یکسری از پلاگین های کاربردی جاوااسکریپت هست در قالب مبحث واکنشگرایی.

حمید

پس یعنی ما میتونیم هر نوع کد جاوااسکریپت یا ایجکسی رو به هسته اضاف کنیم و توی طراحیمون استفاده کنیم؟ مثلا یهقابلیت ایجکس رو به هسته اضاف کنم یا مثلا من اگریه اسلایدر در اینترنت پیدا میکنم میتونم کدش رو به هسته اضاف کنم و توی طراحیم ازش استفاده کنم درسته؟
2- آیا این موارد رو هم توی این دوره آموزش میدید؟
3- اما یه سوال دیگه اگر سایتی که من میخوام طراحی کنم جوری باشه که از همه کلاسها ی css و توابع جاوااسکریپت استفاده نکنم میتونم اون کلاسها و کد ها رو از هسته حذف کنم تا سبکتر بشه؟ مشکلی پیش نمیاد؟

وحید صالحی

بله آقا حمید میتونید اما در هسته بهتره نباشه یا در فایل custom.js یعنی فایل جاوا اسکریپتی که خودتون با نام دلخواه ایجاد میکنید
2-نه این موارد ربطی به فریم ورک بوت استرپ نداره خودتون باید جاوا اسکریپت وجی کوئر رو فرابگیرید و براحتی میتونید ازشون استفاده کنید برای یادگیری این موارد هم می تونید در صورت تمایل در دوره جاوااسکریپت موجود در سایت که توسط آقای آوند در حال برگزاری هست شرکت کنید در این دوره تنها مباحث جاوااسکریپتی که مربوط به خود بوت استرپ هست آموزش داده میشه
3-بله دوست عزیز به راحتی میشه سفارشی سازی کرد در جلسه آخر این دوره که جمع بندی و نکات تکمیلی رو داریم آموزش خواهیم داد.

حمید replyپاسخ

ممنون آقا وحید که پاسخ دادید. بله دوره جاوااسکریپت آقای آوند رو دارم سپری میکنم اما منظورم از سوال دوم این نبود که خود جاوا اسکریپت رو آموزش میدید منظورم این بود که نحوه اضافه کردن یک کد ایجکس یا مثلا یک اسلایدر آماده به بوتسترپ رو آموزش میدید یا نه؟

وحید صالحی

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

حمید

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

وحید صالحی

آقا حمید نیازی به افسوس خوردن نیست چون این دو مبحث اصلا ارتباطی با هم ندارن ما اینجا داریم یک فریم ورک css رو تدریس می کنیم مثل این هست که شما در دوره طراحی وب که مباحث مبتنی بر css و html درش تدریس میشه شرکت کنید و از مدرس دوره بخواهید که درش مباحث ajax رو توضیح بدن !آیا این دو موضوع از نظر شما ارتباطی با هم دارن ؟

حمید رضا مصطفی زاده replyپاسخ

سلام استاد
شما آخر این جلسه گفته بودین اگر modal-body رو به custom.js اضافه کنیم (در فایل modal-triger.html )بعد در قسمت سفید رنگ اون ماشین ها هم کلیک کنیم عکس ماشینی که انتخاب شده و بزرگ نمایش داده میشه از حالت انتخاب در میاد.
خط کدی

اما من امتحان کردم نشد.علت چیه؟
modal-body رو هم طور جداگانه هم مثل modal-img گذاشتیم اما نشد!

وحید صالحی

چه تابعی رو براش نوشتید در فایل js؟

حمید رضا مصطفی زاده replyپاسخ


به همون فایل custom.js تنها همون خط کد بالا modal-body رو اضافه کردیم که در نظر قبل برای شما فرستادیم رو اضافه کردیم.
خود شما هم تو ویدیو هم همین رو میفرمایید از لحاظ منطقی هم باید کار کنه ولی نمیدونم علت چی هس!

وحید صالحی

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

PAS.PSK PSK replyپاسخ

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

وحید صالحی

سلام فایلتون رو برام ایمیل کنید تا بررسی کنم

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.