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

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



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

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

16 2061 ۱۲ مرداد ۹۴
در جلسه سیزدهم دوره آمورشی فریم ورک بوت استرپ و در ادامه مبحث جاوااسکریپت در بوت استرپ و تعامل این دو با یکدیگر و در بخش دوم این مبحث می پردازیم به بررسی و نحوه استفاده از یک  پلاگین بسیار کاربردی و ضروری دیگر با نام carousel (اسلایدر) و نحوه ایجاد اون رو توسط بوت استرپ بررسی خواهیم کرد مطالب مطرح شده در این جلسه عبارتند از :
  • بررسی ساختار اسلایدر در بوت استرپ
  • نحوه ایجاد ایندیکتور نویگیشن ها
  • نحوه ایجاد دکمه های کنترل مقادیر اسلایدر
  • بررسی کلاس carousel
  • بررسی کلاس slide
  • بررسی اتریبیوت data-ride
  • بررسی اتریبیوت data-slide
  • بررسی کلاس carousel-indicators
  • بررسی کلاس carousel-inner
  • بررسی کلاس item
  • بررسی کلاس carousel-control
  • بررسی کلاس left و right
  • بررسی کلاس carousel-control
این مطلب یک جلسه از دوره آموزش جامع فریمورک بوت استرپ (پایه تا پیشرفته) است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : با توجه به افزایش تولید و فراگیر شدن استفاده از اسمارت فون ها و تبلت ها در چند سال اخیر و رابطه مستقیم آنها با دنیای مجازی و اینترنت مدیران و طراحان وب سایت ها ناچار به تعامل مطلوب با این نوع دستگاها شده اند. اما با استفاده از متدها و روش های طراحی سنتی این تعامل با چالش بزرگی روبرو شد و آن عدم ثبات در تطبیق المان ها موجود در قالب وب سایت ها با سایز های متفاوت صفحه نمایش این دستگاه ها بود که این امر باعث عدم پوشش صحیح تمام یا بخش های مختلف یک سایت بصورت استاندارد توسط این دستگاه ها می شد.به لطف این چالش و بخصوص صفحه نمایش هایی با ابعاد متفاوت تکنولوژی جدیدی با عنوان Responsive Design پا به عرضه ظهور گذاشت و تحول بسیار مطلوبی را در عرصه طراحی وب بوجود آورد. در راستای چنین تحولی و با توجه به کمبود و منابع آموزشی کامل در این زمینه در عرصه وب فارسی تصمیم گرفته ایم تا با یک دوره آموزشی بسیار کامل در زمینه تکنولوژی Responsive Design تحت یکی از فریم ورک های بسیار محبوب و البته قدرتمند در این زمینه با نام Bootstrap در خدمت علاقمندان به مبحث طراحی وب بخصوص طراحی واکنشگرا باشیم تا بتوانیم قدمی دیگر در راستای افزایش سطح علمی علاقمندان به مبحث وب و طراحی آن برداریم...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

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

  • ‏‏
    افشین زندی(۱۹ مرداد ۱۳۹۴)

    سلام استاد صالحی
    استاد ببخشید من تو قسمت اسلایدر یه مشکلی دارم که اسلایدر داخل کروم به خوبی نمایش داده میشه اما تو فایرفاکس و اینترنت اکسپلورر حتی نسخه 11 یه باگ داره که ارتفاع عکس ها تو عوض شدن اسلاید ها زیاد میشه
    اگه وقت میکنید یه نگاهی بهش بندازید مشکلم رو بهم بگید. ممنون
    http://up.ashiyane.org/images/exskpjvgxnejcezdwf5z.rar

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

      سلام درسته برای اینک این مورد رو رفع کنی در ویدئو اشاره کردم باید ارتفاع تصاویری که انتخاب میکنی با ارتفاعی که برای اسلایدر در نظر میگیری یکی باشه که توی تصاویر شما اینطور نیست سعی می کنم یه روض مناسب برای این کار در پروژه ها معرفی کنم فعلا به همین صورت که گفتم عمل کن

  • ‏‏

    سلام. یه مشکل داخل اسلایدر بود که داخل فایرفاکس انیمیشن fade اجرا می شد اما داخل کروم نه، من کدهای CSS رو به این شکل نوشتم، مشکل کروم هم حل شد و داخل هر دو مرورگر درست انجام می شه، دوستان اگه مرورگر دیگه ای دارین تست کنید که درست کار می کنه یا نه.

    این کلاس رو ” carousel-fade ” به بخش اصلی اسلایدرتون اضافه کنید.
    *********************************************************************
    کدهای CSS:

  • ‏‏

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

    2- در وبسایت 90 در پاین سایت ، یک بخشی وجود دارد که با select option ها ی مرتبط با هم ایجاد شده که با انتخاب هر گزینه از لیست مطالب مربوط به آن گزینه نمایش داده میشود ، میخواستم بدونم این select option ها هم جزء امکانات بوت استرپ است و اگر منبعی سراغ دارید برای آموزش چنین موردی لطفا معرفی کنید. ممنون

    • ‏‏
      وحید صالحی(۱۵ فروردین ۱۳۹۵)

      سلام برای سوالتون موارد زیادی در وب هست عبارت thumbnail slider در گوگل جستجو کنید یه نمونه :
      http://flexslider.woothemes.com/thumbnail-slider.html
      برای سوال دومتون هم بله select option رو می تونید با بوت استرپ ایجاد کنید اما لود لیت مطالب مربوط به گزینه رو دیگه باید بصورت داینامیک مثلا توسط php و ajax پیاده سازی کنید

  • ‏‏

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

  • ‏‏
    سید احسان عظیمی(۴ اردیبهشت ۱۳۹۵)

    واقعا بوت استرپ و جی کوئری در بحث شخصی سازی فریمورک بهم وابسته اند

  • ‏‏
    زینب سادات(۶ تیر ۱۳۹۵)

    سلام و وقتتون بخیر
    من وقتی از glyphicon ها استفاده می کنم بجای نشون دادن شکلشون، یک مربع خالی میندازه! بخاطر همین تا الان از fontawesome ها استفاده می کردم که خیلی هم خوب بودند. ولی تو درس اسلایدر، برای ایجاد اون فلش های روی اسلایدر، این آیکن ها در بالای تصویر و نه در وسط تصویر نمایش داده میشن!
    سوال اول اینکه چه کنم بیان وسط؟
    سوال دوم اینکه چرا glyphicon های من مربع توخالی ان؟ با چند تا مرورگر هم تست کردم.
    متشکرم

    • ‏‏
      وحید صالحی(۶ تیر ۱۳۹۵)

      سلام اگر glyphicon ها بصورت مربع نمایش داده میشن احتمالا فونت هاش رو در پروژه قرار ندادید و آدرس دهیتون هم اشتباهه
      آیکون های اسلایدر رو متوجه منظورتون نشدم!

      • ‏‏
        زینب سادات(۸ تیر ۱۳۹۵)

        ممنون از پاسخ شما
        فونت ها داخل پوشه font قرار دارن. لطفا برای آدرس دهی راهنمایی بفرمایید تا اینکه بفرمایید در کدام قسمت بوده است.
        ***منظورم این بود که در اسلایدر وقتی در Span مربوط به فلش های روی آن، از مثلا fa-chevron-right استفاده می کنم، میوفته قسمت بالایی عکس اسلایدر و نه در وسط عکس اسلایدر.

        • ‏‏
          وحید صالحی(۸ تیر ۱۳۹۵)

          خواهش می کنم اگر ساختار html و کلاس ها رو درست رعایت کرده باشید نباید چنین حالتی پیش بیاد فابل های پروژتون رو برای بند ایمیل کنید تا بررسی کنم

        • ‏‏
          زینب سادات(۸ تیر ۱۳۹۵)

          چشم ایمیل می کنم. خیلی ممنونم

  • ‏‏
    داود دلورای(۴ شهریور ۱۳۹۵)

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

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram