TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে বুটস্ট্র্যাপ 5 Scrollspy তৈরি করবেন?

3

ব্রাউজারের স্ক্রল বারের উপর ভিত্তি করে বিষয়বস্তুর অবস্থান ট্র্যাক বা গুপ্তচরবৃত্তি করার উপায় নির্দেশ করার নাম স্ক্রোলস্পাই। যদিও এটি সাধারণত বিষয়বস্তুর মধ্যে খুব বেশি ব্যবহার করা হয় না, তবে নেভিগেশন মেনুতে চলন্ত পিল বারটি দেখানোর এটি একটি মার্জিত উপায়। বিশেষ করে একক পৃষ্ঠার টেমপ্লেটগুলিতে, স্ক্রোল বারের অবস্থানের উপর ভিত্তি করে মেনু হাইলাইট করা বোধগম্য। বুটস্ট্র্যাপ এই উদ্দেশ্যে স্ক্রোলস্পাই নামে একটি ডিফল্ট উপাদান সরবরাহ করে। এই টিউটোরিয়ালে আসুন বুটস্ট্র্যাপ 5 ব্যবহার করে স্ক্রোলস্পাই তৈরির বিষয়ে আরও অন্বেষণ করি।

কিভাবে বুটস্ট্র্যাপ 5 Scrollspy তৈরি করবেন?

বুটস্ট্র্যাপ 4 স্ক্রোলস্পাই উদাহরণ

স্ক্রোলস্পাই কম্পোনেন্টের কিছু মৌলিক চাহিদা এবং বৈশিষ্ট্য নিচে দেওয়া হল:

  • স্ক্রোলস্পাই একটি জাভাস্ক্রিপ্ট প্লাগইন তাই স্ক্রোলস্পাই কাজ করার জন্য আপনার বুটস্ট্র্যাপ স্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করা উচিত।
  • লিঙ্কগুলি হাইলাইট করার জন্য আপনাকে NA উপাদান ব্যবহার করা উচিত ।
  • পৃথক মেনু আইটেম এবং ড্রপডাউন মেনুতে আইটেমগুলি হাইলাইট করা হয়।
  • স্ক্রোলস্পাই কম্পোনেন্টের কাজ করার জন্য আইটেমটি সনাক্ত করার জন্য আপনার "অবস্থান: আপেক্ষিক" ব্যবহার করা উচিত।
  • যখন বিষয়বস্তুর মূল অংশ (যেমন বিভাগ বা ডিভি) ছাড়া অন্য উপাদানগুলির সাথে ব্যবহার করা হয়, উচ্চতা এবং "ওভারফ্লো-ওয়াই: স্ক্রোল;" একচেটিয়াভাবে সংজ্ঞায়িত করা উচিত।

স্ক্রোলস্পাই ন্যাভারবার এবং লিস্টগ্রুপ উপাদানগুলির সাথে অনুভূমিক বা উল্লম্ব উভয় দিক দিয়ে ব্যবহার করা যেতে পারে । এটি একটি নেস্টেড নেভবার সেটআপেও ব্যবহার করা যেতে পারে। আসুন আমরা navbar কম্পোনেন্ট ব্যবহার করে একটি উদাহরণ scrollspy তৈরি করি।

নেভ বার তৈরি করা হচ্ছে

আপনি ডেমোতে দেখতে পাচ্ছেন, বিষয়বস্তু স্ক্রোল করা উপরের মেনু আইটেমটি হাইলাইট করবে। আসুন প্রথমে নীচের কোডের মতো নাভবার এবং এনএভি উপাদান ব্যবহার করে একটি মেনু তৈরি করি :

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-warning" id="scrollspy"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="index.html"> <img src=" logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo"> Bootstrap 4 Demo Site</a> <ul class="nav nav-pills mr-auto ml-auto"> <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> <!-- Start Search --> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> <!-- End Search --> </nav>

প্রথম ধাপ হল একটি অনন্য আইডি দিয়ে এনএভি বার চিহ্নিত করা, এক্ষেত্রে আমরা id = "scrollspy” ব্যবহার করেছি। দ্বিতীয়ত, প্রতিটি নেভিগেশন আইটেমকে অনন্য আইডি দিয়ে সংযুক্ত করা উচিত। এখানে আমরা তিনটি মেনু আইটেম ট্র্যাক করার জন্য "href =#section1", "href =#section2" এবং "href =#section3" ব্যবহার করেছি।

স্ক্রোলযোগ্য সামগ্রী তৈরি করা

এখন এনএভি বার প্রতিটি মেনু আইটেমের জন্য অনন্য লিঙ্ক রেফারেন্স সহ একটি অনন্য আইডি দিয়ে প্রস্তুত। আসুন তিনটি মেনু আইটেম ট্র্যাক করার জন্য তিনটি বিভাগ সম্বলিত একটি ডিভ উপাদান তৈরি করি।

<div data-spy="scroll" data-target="#scrollspy" data-offset="0" style="overflow-y: scroll; height: 800px; position:relative;"> <section class="sec1"> <h4 id="section1">Section 1</h4> <p>Here is a content for section 1.</p> <p>"Here is your content for section 1. Enter long content for covering 800px height".</p></section> <section class="sec2"> <h4 id="section2">Section 2</h4> <p>Here is a content for section 2.</p> <p>"Here is your content for section 2. Enter long content for covering 800px height".</p> </section> <section class="sec3"> <h4 id="section3">Section 3</h4> <p>Here is a content for section 3.</p> <p>"Here is your content for section 3. Enter long content for covering 800px height".</p> </section> </div>

এনএভি বার গুপ্তচরবৃত্তি সক্ষম করার জন্য, আপনাকে "data-target =#scrollspy" ব্যবহার করা উচিত। এখানে “#scrollspy” হল NA বারের আইডি। আমরা "ওভারফ্লো-ওয়াই: স্ক্রল" ব্যবহার করেছি; এবং ডিভ এলিমেন্ট লেভেলে স্ক্রোল বার দেখানোর জন্য উচ্চতা 800px হিসাবে সংজ্ঞায়িত করেছে। প্যারেন্ট ডিভ উপাদানটির ভিতরে, আসুন আমরা তিনটি বিভাগ তৈরি করি। মেনু আইটেম আইডিগুলির সাথে সংশ্লিষ্ট আইডি সহ প্রতিটি বিভাগে একটি h4 শিরোনাম রয়েছে। উদাহরণস্বরূপ, বিভাগ 1 এর h4 তে "id = section1" আছে যেখানে section1 হল মেনু আইটেম "বিভাগ 1" এর লিঙ্ক রেফারেন্স।

একসাথে রেখে

বুটস্ট্র্যাপ স্টার্টার টেমপ্লেটে এনএভি বার এবং ডিভ উপাদান একসাথে তৈরি করা একটি সহজ স্ক্রোলস্পাই পৃষ্ঠা তৈরি করবে।


বুটস্ট্র্যাপ 5 শিখুন (সূচক )


রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত