Collapse এবং ScrollSpy বুটস্ট্র্যাপ ৫ এর দুটি শক্তিশালী ফিচার, যা আপনাকে ডাইনামিক এবং ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। Collapse মূলত কন্টেন্ট লুকিয়ে রাখা বা শো করার জন্য ব্যবহৃত হয়, আর ScrollSpy পেজ স্ক্রল করার সময় সক্রিয় এলিমেন্ট ট্র্যাক করতে ব্যবহৃত হয়।

Collapse

Collapse বুটস্ট্র্যাপের একটি কম্পোনেন্ট যা কন্টেন্ট লুকিয়ে রাখা এবং শো করার জন্য ব্যবহৃত হয়। এটি সাধারণত ড্রপডাউন, এক্সপ্যান্ডেবল মেনু অথবা টোগল করা যায় এমন কন্টেন্টের জন্য ব্যবহৃত হয়।

Collapse উদাহরণ:

1. Basic Collapse:

   এই উদাহরণে একটি বাটন ক্লিক করার মাধ্যমে একটি কন্টেন্ট অংশ গোপন এবং প্রদর্শন করা হবে।

   <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
     Toggle Collapse
   </button>
   
   <div class="collapse" id="collapseExample">
     <div class="card card-body">
       এই কন্টেন্টটি collapse (গোপন) অবস্থায় থাকবে, কিন্তু বাটন ক্লিক করলে এটি প্রদর্শিত হবে।
     </div>
   </div>
   

   এখানে, data-bs-toggle="collapse" এটিকে টোগল করার জন্য নির্দেশনা দেয় এবং data-bs-target="#collapseExample" আইডি দিয়ে নির্দিষ্ট করে যে কোন এলিমেন্টটি collapse হবে।

2. Accordion:

   একাধিক কোলাপসিবল (togglable) কন্টেন্টের জন্য Accordion ব্যবহার করা হয়, যেখানে একসাথে একটিই কন্টেন্ট এক্সপ্যান্ড হতে পারে।

   <div class="accordion" id="accordionExample">
     <div class="accordion-item">
       <h2 class="accordion-header" id="headingOne">
         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
           Accordion Item #1
         </button>
       </h2>
       <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
         <div class="accordion-body">
           প্রথম অ্যাকর্ডিয়ন কন্টেন্ট।
         </div>
       </div>
     </div>
     <div class="accordion-item">
       <h2 class="accordion-header" id="headingTwo">
         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
           Accordion Item #2
         </button>
       </h2>
       <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
         <div class="accordion-body">
           দ্বিতীয় অ্যাকর্ডিয়ন কন্টেন্ট।
         </div>
       </div>
     </div>
   </div>
   

   এখানে data-bs-parent="#accordionExample" ব্যবহার করে, এটি নিশ্চিত করা হয় যে এক সময়ের মধ্যে শুধুমাত্র একটি কন্টেন্ট এক্সপ্যান্ড হবে, অন্যগুলো স্বয়ংক্রিয়ভাবে collapse হয়ে যাবে।

ScrollSpy

ScrollSpy বুটস্ট্র্যাপের একটি খুবই দরকারী ফিচার, যা আপনার পেজে স্ক্রল করার সময় সক্রিয় সেকশনটি ট্র্যাক করে এবং নেভিগেশন লিঙ্ককে হাইলাইট করে। এটি বিশেষ করে এক পেজ ওয়েবসাইট বা লং পেজে ব্যবহার করা হয়, যেখানে ভিউয়ার পেজ স্ক্রল করার সময় বিভিন্ন সেকশনের মধ্যে নেভিগেট করতে পারে।

ScrollSpy উদাহরণ:

1. Basic ScrollSpy:

   প্রথমে, একটি সেকশন এবং একটি নেভিগেশন বার তৈরি করতে হবে যা স্ক্রলিং এর মাধ্যমে বিভিন্ন সেকশন ট্র্যাক করবে।

   <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
     <a class="navbar-brand" href="#">ScrollSpy Example</a>
     <ul class="nav nav-pills">
       <li class="nav-item">
         <a class="nav-link" href="#section1">Section 1</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#section2">Section 2</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#section3">Section 3</a>
       </li>
     </ul>
   </nav>
   
   <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
     <h4 id="section1">Section 1</h4>
     <p>এটি সেকশন ১ এর কন্টেন্ট।</p>
     <h4 id="section2">Section 2</h4>
     <p>এটি সেকশন ২ এর কন্টেন্ট।</p>
     <h4 id="section3">Section 3</h4>
     <p>এটি সেকশন ৩ এর কন্টেন্ট।</p>
   </div>
   

   এখানে, data-bs-spy="scroll" এবং data-bs-target="#navbar-example2" দ্বারা স্ক্রল স্পাই সক্রিয় করা হয়। যখন পেজ স্ক্রল করা হয়, তখন সেকশনগুলির জন্য সংশ্লিষ্ট নেভিগেশন লিঙ্ক হাইলাইট হবে।

2. ScrollSpy Customization:

   আপনি data-bs-offset অ্যাট্রিবিউট ব্যবহার করে, স্ক্রলিং অবস্থায় হাইলাইট করার জন্য একটি প্যাডিং মান নির্ধারণ করতে পারেন, যা স্ক্রোলিং এর নির্দিষ্ট অবস্থান থেকে স্টার্ট হবে।

   <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="50" class="scrollspy-example" tabindex="0">
     <!-- Sections here -->
   </div>
   

   এখানে, data-bs-offset="50" সেটিংটি স্ক্রলিং অবস্থান ৫০ পিক্সেল স্ক্রোল হওয়ার পর হাইলাইট হবে।

সারাংশ

• Collapse: এটি কন্টেন্ট টোগল করার জন্য ব্যবহৃত হয়। এক্সপ্যান্ডেবল অথবা ড্রপডাউন কন্টেন্ট তৈরি করতে সাহায্য করে। এটি অ্যাকর্ডিয়ন এবং সাধারণ টোগল কন্টেন্টের জন্য ব্যবহৃত হয়।
• ScrollSpy: এটি পেজ স্ক্রল করার সময় সক্রিয় সেকশন ট্র্যাক করে এবং নেভিগেশন লিঙ্ককে হাইলাইট করে। এটি এক পেজ ওয়েবসাইটে অথবা লং পেজে খুব কার্যকরী হয়।

এই দুটি ফিচার ওয়েব পেজে ইউজার ইন্টারঅ্যাকশন এবং নেভিগেশনকে আরও কার্যকরী এবং সিম্পল করে তোলে।

বুটস্ট্রাপ ৫-এর Collapse কম্পোনেন্ট ব্যবহার করে আপনি সহজেই কনটেন্ট হাইড বা শো করতে পারেন। এটি সাধারণত ড্রপডাউন মেনু, অ্যাকর্ডিয়ান, টগল বাটন ইত্যাদির জন্য ব্যবহৃত হয়। কোলাপস কম্পোনেন্টে কনটেন্ট হাইড বা শো করার জন্য আপনাকে একটি বাটন বা লিংক ব্যবহার করতে হবে, যা কনটেন্টটিকে দেখানোর বা লুকানোর কাজ করবে।

এখানে আমরা বুটস্ট্রাপ ৫ এর কোলাপস কম্পোনেন্ট কিভাবে ব্যবহার করা যায়, তা দেখব।

কোলাপস কম্পোনেন্টের মৌলিক গঠন

বুটস্ট্রাপ ৫-এ collapse ক্লাস দিয়ে কনটেন্টকে কোলাপস করা হয়। আপনাকে কোলাপস অ্যাকটিভেট করতে একটি ট্রিগার (যেমন বাটন) এবং একটি কোলাপস কনটেন্ট প্রয়োজন হবে।

উদাহরণ ১: বেসিক কোলাপস কম্পোনেন্ট

<div class="container mt-5">
  <h2>Collapse Component Example</h2>
  <!-- Collapse Trigger (Button) -->
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    কনটেন্ট দেখান
  </button>

  <!-- Collapse Content -->
  <div class="collapse" id="collapseExample">
    <div class="card card-body mt-3">
      এই কনটেন্টটি কোলাপসযোগ্য। আপনি বাটনে ক্লিক করে এটি দেখতে পাবেন।
    </div>
  </div>
</div>

এখানে:

• data-bs-toggle="collapse": এই অ্যাট্রিবিউটটি বলে যে, বাটনে ক্লিক করার মাধ্যমে কোলাপস কার্যকর হবে।
• data-bs-target="#collapseExample": এখানে #collapseExample হল সেই এলিমেন্টের আইডি, যা কোলাপস হবে। অর্থাৎ, এই আইডির মধ্যে থাকা কনটেন্ট কোলাপস হবে।
• aria-expanded="false": প্রথমে কনটেন্টটি কোলাপসড (লুকানো) থাকবে। যখন কনটেন্টটি খুলবে, তখন এটি পরিবর্তিত হবে।

একাধিক কোলাপস কম্পোনেন্ট

একাধিক কোলাপস এলিমেন্ট তৈরি করলে আপনি চাইলে শুধুমাত্র একটি কোলাপস আইটেম খোলার ব্যবস্থা করতে পারেন। এজন্য Accordion স্টাইলের কোলাপস ব্যবহার করা হয়।

উদাহরণ ২: একাধিক কোলাপস (Accordion)

<div class="container mt-5">
  <h2>Accordion Example with Collapse</h2>
  <div class="accordion" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          সেকশন ১
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          এটি সেকশন ১ এর কনটেন্ট। এখানে আপনার বিস্তারিত তথ্য থাকতে পারে।
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          সেকশন ২
        </button>
      </h2>
      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          এটি সেকশন ২ এর কনটেন্ট। এখানেও আপনার বিস্তারিত তথ্য থাকতে পারে।
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          সেকশন ৩
        </button>
      </h2>
      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          এটি সেকশন ৩ এর কনটেন্ট। এখানেও কিছু অন্যান্য তথ্য থাকতে পারে।
        </div>
      </div>
    </div>
  </div>
</div>

এখানে:

• data-bs-parent="#accordionExample": এই অ্যাট্রিবিউটটি নিশ্চিত করে যে শুধুমাত্র একটি কোলাপস সেকশন খোলা থাকবে, যখন আপনি অন্য সেকশনে ক্লিক করবেন তখন পূর্ববর্তী সেকশনটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাবে।

কাস্টম কোলাপস স্টাইলিং

আপনি চাইলে কোলাপস এলিমেন্টের স্টাইল কাস্টমাইজও করতে পারেন। উদাহরণস্বরূপ, আপনি কোলাপস কনটেন্টের ব্যাকগ্রাউন্ড রঙ, বর্ডার, প্যাডিং ইত্যাদি পরিবর্তন করতে পারেন।

উদাহরণ ৩: কাস্টম স্টাইলিং

<style>
  .custom-collapse .accordion-button {
    background-color: #28a745; /* বাটনের ব্যাকগ্রাউন্ড */
    color: white; /* বাটনের টেক্সট রঙ */
  }
  .custom-collapse .accordion-button:not(.collapsed) {
    background-color: #218838; /* একটিভ অবস্থায় বাটনের ব্যাকগ্রাউন্ড */
  }
  .custom-collapse .accordion-body {
    background-color: #f8f9fa; /* কোলাপস কনটেন্টের ব্যাকগ্রাউন্ড */
    padding: 20px; /* কনটেন্টে প্যাডিং */
  }
</style>

<div class="container mt-5">
  <h2>Custom Styled Accordion</h2>
  <div class="accordion custom-collapse" id="accordionCustomExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          সেকশন ১
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionCustomExample">
        <div class="accordion-body">
          কাস্টম স্টাইলিং সহ সেকশন ১ এর কনটেন্ট।
        </div>
      </div>
    </div>
    <!-- আরও সেকশন যুক্ত করতে পারেন -->
  </div>
</div>

এখানে:

• .accordion-button: বাটনের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।
• .accordion-body: কোলাপস কনটেন্টের ব্যাকগ্রাউন্ড রঙ এবং প্যাডিং পরিবর্তন করা হয়েছে।

সারাংশ

বুটস্ট্রাপ ৫ এর Collapse কম্পোনেন্ট ব্যবহার করে সহজেই ডাইনামিক কোলাপস ইফেক্ট তৈরি করা যায়। একাধিক কোলাপস এলিমেন্টের জন্য Accordion ব্যবহার করা যেতে পারে, যা ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ এবং সুবিধাজনক কনটেন্ট শো/হাইড অপশন প্রদান করে। কাস্টম স্টাইলিং দিয়ে আপনি কোলাপস কম্পোনেন্টের ডিজাইন এবং ব্যবহারের অভিজ্ঞতাকে আরও উন্নত করতে পারেন।

বুটস্ট্রাপ ৫ তে কোল্যাপসিবল কনটেন্ট এবং ইভেন্টস এর মাধ্যমে আপনি আপনার ওয়েবসাইটে ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি ফিচার তৈরি করতে পারেন। কোল্যাপসিবল কনটেন্ট ব্যবহার করলে ব্যবহারকারীরা কন্টেন্টগুলো একে একে দেখতে পারে, যা পেজের স্পেস সংরক্ষণে সাহায্য করে এবং ইন্টারফেসটি আরও পরিষ্কার রাখে। এছাড়া, ইভেন্টসের মাধ্যমে আপনি কোল্যাপসিবল কনটেন্টের কার্যক্রমকে আরও কাস্টমাইজ করতে পারেন, যেমন যখন কোনো বাটনে ক্লিক করা হয়, তখন কনটেন্ট কোল্যাপস বা এক্সপ্যান্ড হবে।

কোল্যাপসিবল কনটেন্ট (Collapsible Content)

বুটস্ট্রাপ ৫ এর কোল্যাপসিবল কনটেন্ট ব্যবহারের জন্য collapse ক্লাস ব্যবহার করা হয়। এই ক্লাসটি কনটেন্টের প্রদর্শন বা লুকানো (toggle) কার্যকলাপকে নিয়ন্ত্রণ করে। সাধারণত এটি বাটন বা লিঙ্ক দিয়ে কন্ট্রোল করা হয়।

কোল্যাপসিবল কনটেন্ট তৈরি করা:

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  কোল্যাপসিবল কনটেন্ট দেখুন
</button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    এটি একটি কোল্যাপসিবল কনটেন্ট ব্লক। আপনি এটি নিচে বা উপরে খোলার জন্য ক্লিক করতে পারেন।
  </div>
</div>

এখানে:

• data-bs-toggle="collapse": এই অ্যাট্রিবিউটটি কোল্যাপসিবল কনটেন্ট চালু বা বন্ধ করার জন্য ব্যবহার করা হয়।
• data-bs-target="#collapseExample": এটি সেই আইডি নির্দেশ করে, যা কোল্যাপসিবল কনটেন্টের জন্য টার্গেট।
• aria-expanded="false": এটি অ্যাক্সেসিবিলিটির জন্য নির্দেশ করে যে কনটেন্টটি প্রাথমিকভাবে বন্ধ থাকবে।

কোল্যাপসিবল কনটেন্টের জন্য ইভেন্টস (Events)

বুটস্ট্রাপের কোল্যাপসিবল কনটেন্টের সাথে আপনি বিভিন্ন ইভেন্টসও ট্রিগার করতে পারেন। এই ইভেন্টস গুলো ব্যবহারকারীর ইন্টারঅ্যাকশন বা কনটেন্টের পরিবর্তনের উপর ভিত্তি করে কিছু ফাংশন কার্যকর করতে সাহায্য করে।

কোল্যাপস ইভেন্টস:

1. show.bs.collapse: কোল্যাপসিবল কনটেন্ট এক্সপ্যান্ড করার আগে এই ইভেন্টটি ট্রিগার হয়।
2. shown.bs.collapse: কোল্যাপসিবল কনটেন্ট এক্সপ্যান্ড হওয়ার পর এই ইভেন্টটি ট্রিগার হয়।
3. hide.bs.collapse: কোল্যাপসিবল কনটেন্ট বন্ধ করার আগে এই ইভেন্টটি ট্রিগার হয়।
4. hidden.bs.collapse: কোল্যাপসিবল কনটেন্ট বন্ধ হওয়ার পর এই ইভেন্টটি ট্রিগার হয়।

উদাহরণ: কোল্যাপস ইভেন্টস

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  কোল্যাপসিবল কনটেন্ট দেখুন
</button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    এটি একটি কোল্যাপসিবল কনটেন্ট ব্লক। আপনি এটি নিচে বা উপরে খোলার জন্য ক্লিক করতে পারেন।
  </div>
</div>

<script>
  var collapseElement = document.getElementById('collapseExample');
  
  collapseElement.addEventListener('show.bs.collapse', function () {
    console.log('কোল্যাপসিবল কনটেন্ট এক্সপ্যান্ড হচ্ছে');
  });

  collapseElement.addEventListener('shown.bs.collapse', function () {
    console.log('কোল্যাপসিবল কনটেন্ট এক্সপ্যান্ড হয়েছে');
  });

  collapseElement.addEventListener('hide.bs.collapse', function () {
    console.log('কোল্যাপসিবল কনটেন্ট বন্ধ হচ্ছে');
  });

  collapseElement.addEventListener('hidden.bs.collapse', function () {
    console.log('কোল্যাপসিবল কনটেন্ট বন্ধ হয়েছে');
  });
</script>

এখানে:

• show.bs.collapse: কনটেন্ট এক্সপ্যান্ড হওয়ার আগে এটি ট্রিগার হয়।
• shown.bs.collapse: কনটেন্ট এক্সপ্যান্ড হওয়ার পর এটি ট্রিগার হয়।
• hide.bs.collapse: কনটেন্ট বন্ধ হওয়ার আগে এটি ট্রিগার হয়।
• hidden.bs.collapse: কনটেন্ট বন্ধ হওয়ার পর এটি ট্রিগার হয়।

কোল্যাপসিবল কনটেন্টের উপর কাস্টম ফাংশন প্রয়োগ

আপনি কোল্যাপসিবল কনটেন্টের জন্য আরও কাস্টম ইফেক্ট বা কাস্টম কোড ব্যবহার করতে পারেন, যেমন কনটেন্ট এক্সপ্যান্ড করার সময় কোনো ক্লাস যোগ করা বা অন্য কোনো ফাংশন কল করা।

উদাহরণ: কাস্টম কোল্যাপসিবল ফাংশন

<button class="btn btn-primary" id="collapseBtn">
  কোল্যাপসিবল কনটেন্ট দেখুন
</button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    এটি একটি কোল্যাপসিবল কনটেন্ট ব্লক।
  </div>
</div>

<script>
  var myCollapse = document.getElementById('collapseExample');
  var collapseBtn = document.getElementById('collapseBtn');

  collapseBtn.addEventListener('click', function () {
    var bsCollapse = new bootstrap.Collapse(myCollapse, {
      toggle: true
    });
  });
</script>

এখানে, new bootstrap.Collapse() ব্যবহার করে কাস্টম ফাংশন তৈরি করা হয়েছে, যা আপনার ইচ্ছামতো কোল্যাপসিবল কনটেন্টকে নিয়ন্ত্রণ করতে সহায়তা করবে।

সারাংশ

বুটস্ট্রাপ ৫ এর কোল্যাপসিবল কনটেন্ট এবং ইভেন্টস ব্যবহার করে আপনি সহজেই ইন্টারেক্টিভ ওয়েব ডিজাইন তৈরি করতে পারেন। collapse ক্লাসটি কনটেন্ট লুকানো বা প্রদর্শন করার জন্য ব্যবহৃত হয়, এবং ইভেন্টস ব্যবহার করে আপনি কনটেন্টের পরিবর্তনের উপর নির্ভর করে অ্যাকশন নিতে পারেন।

ScrollSpy হল একটি বুটস্ট্র্যাপ ৫ ফিচার, যা স্ক্রোলিংয়ের সময় পেজের নির্দিষ্ট সেকশনের উপর ট্র্যাকিং করতে সাহায্য করে। এটি সাধারণত নেভিগেশন বার বা সাইডবারে ব্যবহৃত হয়, যেখানে ইউজার যখন পেজ স্ক্রল করে, তখন সেই সেকশনটি স্বয়ংক্রিয়ভাবে হাইলাইট হয়। এটি সাইটে ইন্টার‍্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে ব্যবহৃত হয়।

ScrollSpy ইউজারকে জানায় যে, তিনি বর্তমানে কোন সেকশনে আছেন, যা তার নেভিগেশন বা কন্টেন্টে থাকা পছন্দের সেকশনগুলির সাথে সম্পর্কিত।

ScrollSpy কীভাবে কাজ করে?

ScrollSpy স্বয়ংক্রিয়ভাবে স্ক্রল ইভেন্ট পর্যবেক্ষণ করে এবং পেজের সেকশনের মধ্যে কোনটি স্ক্রল করা হচ্ছে তা ট্র্যাক করে। এটি সাধারণত কন্টেইনার বা নেভিগেশন বারের সাথে ব্যবহার করা হয় এবং নির্দিষ্ট সেকশনের উপর ভিত্তি করে সেই সেকশনের লিঙ্কগুলো হাইলাইট করা হয়।

ScrollSpy সক্রিয় করতে বুটস্ট্র্যাপে

বুটস্ট্র্যাপ ৫-এ ScrollSpy ব্যবহার করার জন্য নিচের ধাপগুলো অনুসরণ করতে হবে:

1. ScrollSpy কন্টেইনার তৈরি করুন: এটি হবে সাইডবার বা টপ নেভিগেশন, যা ইউজারকে সেকশনের মধ্যে নেভিগেট করতে সাহায্য করবে।
2. ডাটা-অ্যাট্রিবিউট ব্যবহার করুন: ScrollSpy চালু করার জন্য data-bs-spy="scroll" এবং data-bs-target="#navbarExample" ব্যবহার করা হয়।
3. উপযুক্ত সেকশন আইডি: প্রতিটি সেকশনের জন্য id অ্যাট্রিবিউট ব্যবহার করতে হবে যাতে ScrollSpy সেগুলির উপর নজর রাখতে পারে।

উদাহরণ: ScrollSpy ব্যবহার করে Section Tracking

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap ScrollSpy Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">

  <!-- Navbar -->
  <nav id="navbar-example" class="navbar navbar-light fixed-top bg-light">
    <a class="navbar-brand" href="#">ScrollSpy Example</a>
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#section1">Section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">Section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Section 3</a>
      </li>
    </ul>
  </nav>

  <div class="container" style="margin-top: 80px;">
    <div id="section1" class="pt-5">
      <h2>Section 1</h2>
      <p>This is section 1. Scroll down to navigate.</p>
    </div>
    <div id="section2" class="pt-5">
      <h2>Section 2</h2>
      <p>This is section 2. Scroll down to navigate.</p>
    </div>
    <div id="section3" class="pt-5">
      <h2>Section 3</h2>
      <p>This is section 3. Scroll down to navigate.</p>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

ব্যাখ্যা:

1. data-bs-spy="scroll": এটি ScrollSpy সক্রিয় করার জন্য ব্যবহৃত হয়। এর মাধ্যমে পেজের স্ক্রল পজিশন ট্র্যাক করা হয়।
2. data-bs-target="#navbar-example": এটি কনফিগার করে যে কন্টেইনার বা নেভিগেশন বারটি ScrollSpy ট্র্যাক করবে। এখানে #navbar-example নেভিগেশন বারটির আইডি।
3. id="section1": সেকশনের প্রতিটি সেকশন আইডি ব্যবহার করে নির্দিষ্ট অংশে স্ক্রল করার জন্য এটি কার্যকর হয়।
4. nav-link active: যখন একটি সেকশন স্ক্রল হয়, তখন তার লিঙ্কটি active ক্লাসে পরিবর্তিত হয়ে যায়। ফলে ইউজার বুঝতে পারে যে কোন সেকশনে তিনি আছেন।

ScrollSpy এর অতিরিক্ত কাস্টমাইজেশন

• data-bs-offset="0": স্ক্রল পজিশনের জন্য একটি অফসেট প্রদান করতে পারে, এটি কন্টেইনারের উপরের দিক থেকে কতটা দূরে স্ক্রল শুরু হবে তা নির্ধারণ করে।
• tabindex="0": স্ক্রল স্পাই কার্যকর করার জন্য এই অ্যাট্রিবিউটটি প্রয়োজন, এটি পেজের কন্টেইনারে স্ক্রল ট্র্যাকিং শুরু করতে সহায়ক।

সারাংশ

ScrollSpy বুটস্ট্র্যাপ ৫-এর একটি শক্তিশালী ফিচার যা স্ক্রলিংয়ের সময় ইউজারের অবস্থান এবং সেকশনের তথ্য ট্যাক করে এবং সেই অনুযায়ী নেভিগেশন বার হাইলাইট করে। এটি রেসপন্সিভ এবং ইন্টারঅ্যাকটিভ ডিজাইন তৈরির জন্য খুবই কার্যকরী।

বুটস্ট্রাপ ৫-এ Collapsible Navbar এবং ScrollSpy একত্রিত করে আপনি একটি রেসপন্সিভ নেভিগেশন বার তৈরি করতে পারেন, যা বড় স্ক্রীনে ফুল নেভিগেশন শো করবে এবং ছোট স্ক্রীনে একটি কোলোপ্সিবল ( collapsible) মেনু হিসেবে কার্যকরী হবে। ScrollSpy ব্যবহার করে, আপনি পেজ স্ক্রল করার সময় অ্যাকটিভ সেকশনের উপর আলোকপাত করতে পারেন, যা ব্যবহারকারীর জন্য আরও ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করবে।

Collapsible Navbar তৈরি করা

Collapsible Navbar এমন একটি নেভিগেশন বার, যা ছোট স্ক্রীনে (যেমন মোবাইল ডিভাইসে) স্বয়ংক্রিয়ভাবে একটি মেনু হিসেবে সংকুচিত হয়ে যায় এবং একটি বাটন ক্লিক করলে প্রসারিত হয়।

উদাহরণ: Collapsible Navbar

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapsible Navbar Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

ব্যাখ্যা:

• navbar-toggler: এটি সেই বাটন, যা ছোট স্ক্রীনে দেখা যাবে। ইউজার যখন এটি ক্লিক করবেন, তখন নেভিগেশন বারটি প্রসারিত হবে।
• navbar-toggler-icon: এটি একটি আইকন যা টগলারের মধ্যে দেখা যাবে। এটি সাধারণত তিনটি অনুভূমিক লাইন থাকে, যা ব্যবহারকারীর জন্য পরিষ্কারভাবে দেখায় যে এটি একটি মেনু।
• collapse navbar-collapse: এই ক্লাসটি নেভিগেশন মেনুটি প্রসারিত বা সংকুচিত করার জন্য ব্যবহৃত হয়।

ScrollSpy Integration

ScrollSpy হল একটি বুটস্ট্রাপ ফিচার যা পেজ স্ক্রল করার সময় আপনাকে জানায় কোন সেকশন বর্তমানে ভিউপোর্টে আছে। এটি সাধারণত নেভিগেশন বারের সাথে ইন্টিগ্রেটেড হয়ে ব্যবহার হয়, যেখানে যখন আপনি একটি সেকশনে স্ক্রল করেন, তখন নেভিগেশন বারে সেই সেকশনটির লিঙ্ক হাইলাইট হয়ে যায়।

উদাহরণ: ScrollSpy Integration

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ScrollSpy Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    section {
      height: 100vh;
    }
  </style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbarNav" data-bs-offset="0" tabindex="0">

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ScrollSpy Example</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#section1">Section 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">Section 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">Section 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section4">Section 4</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Sections -->
<section id="section1" class="bg-primary text-white">
  <div class="container">
    <h1>Section 1</h1>
    <p>This is section 1.</p>
  </div>
</section>

<section id="section2" class="bg-secondary text-white">
  <div class="container">
    <h1>Section 2</h1>
    <p>This is section 2.</p>
  </div>
</section>

<section id="section3" class="bg-success text-white">
  <div class="container">
    <h1>Section 3</h1>
    <p>This is section 3.</p>
  </div>
</section>

<section id="section4" class="bg-danger text-white">
  <div class="container">
    <h1>Section 4</h1>
    <p>This is section 4.</p>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

ব্যাখ্যা:

• data-bs-spy="scroll": এই অ্যাট্রিবিউটটি বুটস্ট্র্যাপকে নির্দেশ দেয় যে এটি স্ক্রলিংয়ের ওপর নজর রাখবে এবং কার্যকর করবে।
• data-bs-target="#navbarNav": এটি নির্দেশ করে যে স্ক্রল স্পাইটি কোন এলিমেন্টের ওপর কাজ করবে (এখানে নেভিগেশন বার)।
• data-bs-offset="0": এটি স্পেসিফাই করে যে স্ক্রল স্পাই কতটা ভিউপোর্টের ভিতরে পৌঁছালে হাইলাইটিং শুরু হবে।

সারাংশ:

• Collapsible Navbar ছোট স্ক্রীনে ব্যবহারকারীকে একটি সহজ, টোগলেবল নেভিগেশন বার প্রদান করে, যা স্বয়ংক্রিয়ভাবে ছোট স্ক্রীনে কোলোপ্স হয়ে যায় এবং বড় স্ক্রীনে পুরোপুরি দৃশ্যমান থাকে।
• ScrollSpy ব্যবহারকারীকে স্ক্রল করার সময় পেজের বিভিন্ন সেকশনের ওপর নজর রাখতে সাহায্য করে, এবং সেই অনুযায়ী নেভিগেশন বারটিকে হাইলাইট করে, যা একটি ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি অভিজ্ঞতা তৈরি করে।