نمادها

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

آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)

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

آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy) از سری آموزش های تک قسمتی است.

 

اسکرول اسپای چیست؟

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

 

ساخت اسکرول اسپای

حال که با اسکرول اسپای آشنا شدید وقت آن رسیده است که نحوه ساخت آن را نیز یاد بگیرید برای ساخت اسکرول اسپای ازآنجایی که به کل صفحه ارتباط دارد باید attribute هایی برای body تعریف کنیم . باید attribute با نام data-spy و با مقدار scroll به body بدهیم . همچنین به attribute با نام data-target نیاز داریم که کلاس منو خود را به آن میدهیم بعد از این مورد نوبت به آن میرسد که مشخص کنیم هر منو دقیقا باید کدام قسمت از صفحه را باز کند کافیست در قسمتی که میخواهیم به منو های خود لینک دهیم مقدار href را برابر با class یا id بخش مد نظر قرار دهیم.

به عنوان مثال اگر منو درباره ما داریم و div با کلاس about داریم که درباره ما داخل آن قرار دارد باید به href منو خود مقدار about. را اختصاص دهیم برای واضح شدن موضوع میتوانید از کد زیر که برای شما قرار داده ایم استفاده کنید

 

برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

 

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

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

 

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

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (5 رای, میانگین: 4٫80 امتیاز از 5)
Loading...

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

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

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

6 دیدگاه برای “آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)”

  1. مریم گفت:

    بسیار عالی ممنون ازتون مثل همیشه فوق العاده

  2. sasan گفت:

    خدا خیرتون بده که رایگان میذارید

    1. amir گفت:

      لطف دارین وظیفس

  3. kamranol گفت:

    eshghi mihandes saadi

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

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

*

code

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