آموزش کامپوننت های Progress-bar و Scrollspy در بوت استرپ 4

یادگیری کامپوننت های Progress-bar و Scrollspy در بوت استرپ 4:

در این بخش از آموزش، با کامپوننت‌های Progress-bar و  Scrollspy و کلاس‌های آن‌ها در bootstrap 4 آشنا می شوید. زمانی که بخواهیم میزان پیشرفت یک فرآیند و یا درصد اعتبار و ارزش یک چیز را نشان دهیم، از کامپوننت Progress-bar استفاده می کنیم.
از کامپوننت Scrollspy برای پیمایش صفحه استفاده می شود و با کلیک روی لینک‌ها به محتوای مربوط به آن لینک پرش می کند.

کلاس‌های Progress-bar:

• progress: برای ایجاد یک نوار پیشرفت از این کلاس استفاده میشود.
• progress-bar: از این کلاس برای ایجاد عناصر فرزند progress استفاده میشود.
• width: برای تنظیم عرض نوار پیمایش استفاده میشود.
• height: برای تنظیم ارتفاع نوار پیمایش استفاده میشود.
• progress-bar-striped: با استفاده از این کلاس میتوان نوار پیشرفت را به صورت راه راه نمایش داد.
• progress-bar-animated: برای ایجاد انیمیشن در نوار پیشرفت استفاده میشود. برای مثال، با این کلاس می توان حالت راه راه نوار را به صورت متحرک نمایش داد.

کلاس‌های Scrollspy:

• data-spy = “scroll”: این صفت باید به عنصری که به عنوان محدوده قابل پیمایش استفاده می شود، اضافه شود. (معمولا به body اضافه می شود.)
• data-target: این ویژگی برای اتصال نوار پیمایش با محدوده قابل پیمایش استفاده می شود. باید نام آیدی یا کلاس نوار پیمایش (.navbar) را به این ویژگی اضافه کنیم.
• Scrollspy Vertical Menu: می توانیم از .nav- pills برای ایجاد scrollspy عمودی، استفاده کنیم.

برای یادگیری این مبحث مثال‌ها و نکته‌های متعددی را در فایل ویدئویی آورده‌ایم که با تهیه این درس و مشاهده ویدئوها به طور کامل به این مبحث مسلط خواهید شد.

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

انجمن برنامه نویسان وب