• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

12 2322 ۸ مرداد ۹۴
در جلسه دوازدهم دوره آمورشی فریم ورک بوت استرپ و چند جلسه آینده می پردازیم به مبحث جاوااسکریپت در بوت استرپ و پلاگین های متعدد و بسیار کاربردی در زمینه طراحی وب سایت رو بدون کدنویسی جاوااسکریپت تنها با استفاده از بوت استرپ ایجاد خواهیم کرد در بخش اول این مبحث می پردازیم به پلاگین بسیار کاربردی و ضروری مدال (Modal) و نحوه ایجاد اون رو توسط بوت استرپ بررسی خواهیم کرد و بیشتر به اهمیت فریم ورک ها و فریم ورک بوت استرپ پی خواهیم برد و در انتهای این جلسه هم یک مینی پروژه برای ایجاد گالری تصاویر توسط مدال ها در بوت استرپ رو همراه با کدنویسی جاوااسکریپپ فراخواهیم گرفت... مطالب مطرح شده در این جلسه عبارتند از :
  • مدال چیست و چه کاربردی دارد
  • نحوه ایجاد مدال ها توسط بوت استرپ
  • معرفی کلاس modal
  • معرفی کلاس modal-dialog
  • معرفی کلاس modal-header
  • معرفی کلاس modal-body
  • معرفی کلاس modal-footer
  • نحوه فراخوانی مدال ها بصورت خودکار و بررسی توابع جاوااسکریپ آن
  • کنترل اجرای مدال ها با دکمه ها
  • بررسی اندازه مدال ها و معرفی کلاس های modal-xs و modal-lg
  • نحوه حذف اسکرول صفحه در هنگام فراخوانی مدال ها
مینی پروژه  طراحی گالری تصاویر توسط مدال ها:
  • نحوه فراخوانی داده های متعدد (تصاویر و ...) تنها در یک مدال بدون ایجاد مدال های متعدد برای هریک از تصاویر (مثالی برای استفاده داینامیک از مدال ها)
این مطلب یک جلسه از دوره آموزش جامع فریمورک بوت استرپ (پایه تا پیشرفته) است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : با توجه به افزایش تولید و فراگیر شدن استفاده از اسمارت فون ها و تبلت ها در چند سال اخیر و رابطه مستقیم آنها با دنیای مجازی و اینترنت مدیران و طراحان وب سایت ها ناچار به تعامل مطلوب با این نوع دستگاها شده اند. اما با استفاده از متدها و روش های طراحی سنتی این تعامل با چالش بزرگی روبرو شد و آن عدم ثبات در تطبیق المان ها موجود در قالب وب سایت ها با سایز های متفاوت صفحه نمایش این دستگاه ها بود که این امر باعث عدم پوشش صحیح تمام یا بخش های مختلف یک سایت بصورت استاندارد توسط این دستگاه ها می شد.به لطف این چالش و بخصوص صفحه نمایش هایی با ابعاد متفاوت تکنولوژی جدیدی با عنوان Responsive Design پا به عرضه ظهور گذاشت و تحول بسیار مطلوبی را در عرصه طراحی وب بوجود آورد. در راستای چنین تحولی و با توجه به کمبود و منابع آموزشی کامل در این زمینه در عرصه وب فارسی تصمیم گرفته ایم تا با یک دوره آموزشی بسیار کامل در زمینه تکنولوژی Responsive Design تحت یکی از فریم ورک های بسیار محبوب و البته قدرتمند در این زمینه با نام Bootstrap در خدمت علاقمندان به مبحث طراحی وب بخصوص طراحی واکنشگرا باشیم تا بتوانیم قدمی دیگر در راستای افزایش سطح علمی علاقمندان به مبحث وب و طراحی آن برداریم...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 12 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

    • ‏‏
      وحید صالحی(۹ مرداد ۱۳۹۴)

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

      • ‏‏

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

        • ‏‏
          وحید صالحی(۹ مرداد ۱۳۹۴)

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

  • ‏‏

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

    • ‏‏
      وحید صالحی(۱۰ مرداد ۱۳۹۴)

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

      • ‏‏

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

        • ‏‏
          وحید صالحی(۱۰ مرداد ۱۳۹۴)

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

  • ‏‏
    حمید رضا مصطفی زاده(۲۱ مهر ۱۳۹۴)

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

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

  • ‏‏
    حمید رضا مصطفی زاده(۲۵ مهر ۱۳۹۴)


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

    • ‏‏
      وحید صالحی(۲۵ مهر ۱۳۹۴)

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

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

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram