قسمت سی ام bootstrap : نحوه ی ساخت Scrollspy در بوت استرپ 4

خانه » مقالات اموزشی » css » بوت استرپ » قسمت سی ام bootstrap : نحوه ی ساخت Scrollspy در بوت استرپ 4
قسمت سی ام bootstrap : نحوه ی ساخت Scrollspy در بوت استرپ 4

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۹-۱۱-۱۹

Work time-rafiki

زمان مطالعه:

5 دقیقه

Scrollspy برای هدایت به بخش های مختلف در صفحه ساخته می شود. ، فهرست مطالبی که در زیر قرار میگیرد نمونه ای از Scrollspy است.

پیشنهاد می شود قبل از ورود به این بخش ، سایر بخش های دوره رایگان بوت استرپ را مطالعه فرمایید.

ساخت Scrollspy

قطعه کد زیر نمونه ای از یک Scrollspy را نشان می دهد:

توضیحات مثال

با افزودن data-spy=”scroll” محدوده ی قابل اسکرول خود را مشخص کنید ، معمولا این ویژگی به تگ body افزوده می شود .

توجه داشته باشید که عناصر پیمایشی باید با شناسه پیوندهای موجود در داخل لیست های navbar مطابقت داشته باشند (< div id = ” section1 ” > با < a href=” #section1″ > مطابقت دارد).

ویژگی data-offset اختیاری است ، تعداد پیکسل هایی را که برای جابجایی از بالا هنگام محاسبه موقعیت پیمایش ، مشخص می کند. این امر هنگامی مفید است که احساس می کنید هنگام پرش به سمت عناصر قابل پیمایش ، پیوندهای داخل نوار حالت فعال را خیلی زود تغییر می دهد. پیش فرض فاصله از بالا 10 پیکسل است.

منوی عمودی Scrollspy

پیشنهاد می شود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.

مرتضی افضلی

مرتضی افضلی

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

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

دیدگاهتان را بنویسید