Bootstrap 5 ការតាមដាន
- পূর্ববর্তী পৃষ্ঠা BS5 Toast
- পরবর্তী পৃষ্ঠা BS5 Offcanvas
স্ক্রলস্পাই
স্ক্রলস্পাই এই উপযোগ্য করে তোলেরোলিংঅবস্থানটি স্বয়ংক্রিয়ভাবে নেভিগেশন তালিকায় লিঙ্কগুলিকে নিতে নিয়ে আসে
স্ক্রোলস্পি কিভাবে তৈরি করা যায়
নিম্নলিখিত উদাহরণটি স্ক্রোলস্পি তৈরি করার কিভাবন
উদাহরণ
<!-- স্ক্রোলযোগ্য অঞ্চল -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- নেভিগেশন - <a> উপাদানটি স্ক্রোলযোগ্য অঞ্চলের কোনও অংশে জুড়ে যাওয়ার জন্য ব্যবহার করা হয় -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">সেকশন 1</a></li>
...
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>সেকশন 1</h1>
<p>এই পৃষ্ঠা স্ক্রোল করে দেখুন এবং স্ক্রোলিং করার সময় নেভিগেশন বার্তা দেখুন!</p>
</div>
...
</body>
উদাহরণ
একটি data-bs-spy="scroll" যোগ করুন যে উপাদানটি স্ক্রোলযোগ্য অঞ্চল হিসাবে ব্যবহার করা হচ্ছে (সাধারণত <body> উপাদান) যোগ করুন。
এরপর একটি data-bs-target অ্যাট্রিবিউট, যার মান id বা নেভিগেশন বার্তার শ্রেণী (.navbar)। এটি নেভিগেশন এবং স্ক্রোলযোগ্য অঞ্চলের মধ্যে সংযোগ সুনিশ্চিত করার জন্য
পরীক্ষা করুন, কারণ স্ক্রোলযোগ্য উপাদানটি নেভিগেশন বার্তার তালিকায় লিঙ্ক আইডির সাথে মিলবে (<div id="section1"> ম্যাচ <a href="#section1">)
অপশনাল data-bs-offset অ্যাট্রিবিউট নির্দিষ্ট করে, যা স্ক্রোলিং অবস্থান গণনার সময় শীর্ষ থেকে এসে পড়া পিক্সেল সংখ্যা। যখন নেভিগেশন বার্তায় লিঙ্কগুলি স্ক্রোলযোগ্য উপাদানে জুড়ে যায়, তখন যদি আপনি সক্রিয় অবস্থা বেশি প্রাথমিকভাবে পরিবর্তন করেন, তবে এটি অত্যন্ত সাহায্যক
রিলেটিভ পজিশনিং চাইযে উপাদানগুলির ক্ষেত্রে data-bs-spy="scroll" থাকে, তাদের জন্য CSS পজিশন অ্যাট্রিবিউটের মান "relative" হলেকেই সঠিকভাবে কাজ করে
- পূর্ববর্তী পৃষ্ঠা BS5 Toast
- পরবর্তী পৃষ্ঠা BS5 Offcanvas
