বুটস্ট্রাপ৩ স্ক্রলস্পাই (Bootstrap3 Scrollspy)

বুটস্ট্রাপ৩ জাভাস্ক্রিপ্ট কম্পোনেন্ট (Bootstrap3 JS Component) - বুটস্ট্র্যাপ (Bootstrap 3) - Web Development

263

বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন

বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন স্ক্রল পজিশনের উপর ভিত্তি করে ন্যাভিগেশন লিস্টে স্বয়ংক্রিয়ভাবে আপডেট পাঠানোর জন্য ব্যবহার করা হয়।

কিভাবে বুটস্ট্রাপ স্ক্রলস্পাই তৈরি করবেন

কিভাবে বুটস্ট্রাপ স্ক্রলস্পাই তৈরি করা যায় তা নিচের উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=1192


উদাহরণের ব্যাখ্যা

যেই এলিমেন্টটিকে স্ক্রলযোগ্য এরিয়া করতে চান ঐ এলিমেন্টটিতে data-spy="scroll" এট্রিবিউট যুক্ত করুন (এক্ষেত্রে সাধারণত < body > এলিমেন্টই ব্যবহার করা হয়)।

তারপর data-target এট্রিবিউট যুক্ত করুন যার ভ্যালু হবে ন্যাভিগেশন বারের আইডি বা ক্লাস (.navbar)। এর মাধ্যমে ন্যাভবারের সাথে স্ক্রলযোগ্য এরিয়ার লিংক করা হয়।

মনে রাখবেন অবশ্যই স্ক্রলযোগ্য এলিমেন্টের আইডির সাথে ন্যাভিগেশন লিংকের আইডির সাথে মিল হতে হবে (< div id="section1" > সাথে < a href="#section1" >) মিল থাকতে হবে।

data-offset এট্রিবিউটের মাধ্যমে এটা নির্দিষ্ট করা হয় যে কতো পিক্সেলের মধ্যে স্ক্রলিং একটিভ হবে। ডিফল্ট ভ্যালু হলো 10px।


উলম্ব(Vertical) স্ক্রলস্পাই মেনু

এই উদাহরণে মেনু হিসেবে আমরা বুটস্ট্রাপের vertical ন্যাভিগেশন পিল ব্যবহার করেছি।

kt_satt_skill_example_id=1193

 

Content added || updated By
Promotion

Are you sure to start over?

Loading...