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

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

3

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

যদি আপনার সাইটে কম পৃষ্ঠা থাকে, তাহলে প্রতিটি পাতায় ম্যানুয়ালি যোগ করা সহজ। কিন্তু একটি বড় সাইটের জন্য, বলুন আপনার 500 টি ব্লগ পোস্ট আছে, আপনার পেজিনেশনে স্বয়ংক্রিয় লিঙ্ক যোগ করার জন্য উপযুক্ত স্ক্রিপ্ট এবং থিম সেটআপ ব্যবহার করা উচিত।

এই টিউটোরিয়ালটি বুটস্ট্র্যাপ পেজিনেশন তৈরির নিম্নলিখিত উপায়গুলি জুড়েছে:

  1. ডিফল্ট বুটস্ট্র্যাপ পেজিনেশন তৈরি করা
  2. পূর্ববর্তী এবং পরবর্তী নেভিগেশনের জন্য আইকন যোগ করা
  3. সক্রিয় এবং অক্ষম লিঙ্কগুলি দেখানো হচ্ছে
  4. বিভিন্ন আকারের পেজিনেশন তৈরি করা
  5. বিভিন্ন প্রান্তিককরণ ব্যবহার করে

বুটস্ট্র্যাপে পৃষ্ঠাঙ্কন উপাদানটি নীচের মতো আইটেমের একটি অনিয়ন্ত্রিত তালিকা ছাড়া আর কিছুই নয় :

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav>
  • মূলত আপনার ব্যবহার করা উচিত

    পৃষ্ঠাঙ্কন সহ উপাদান

  • শ্রেণী "। পৃষ্ঠাঙ্কন" এর সাথে অনিয়ন্ত্রিত তালিকা অন্তর্ভুক্ত করুন।

  • প্রতিটি আলোকিত আইটেমের ".page-item" ক্লাস থাকা উচিত।

  • প্রতিটি লিঙ্কে ".page-link" ক্লাস ব্যবহার করা উচিত।

ডিফল্ট পৃষ্ঠাঙ্কন নিচে দেখানো হবে:

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

2 পূর্ববর্তী এবং পরবর্তী জন্য আইকন যোগ করা

পূর্বনির্ধারিতভাবে পৃষ্ঠায় পূর্ববর্তী এবং পরবর্তী নেভিগেশনের জন্য পাঠ্য ব্যবহার করা হয়। আপনি নীচের কোড ব্যবহার করে আইকন ব্যবহার করতে পারেন।

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>

দৃষ্টি প্রতিবন্ধী ব্যবহারকারীরা আইকন পড়তে পারে না, তাই আপনার ".sr-only" ক্লাস ব্যবহার করে স্ক্রিন রিডারদের জন্য পূর্ববর্তী / পরবর্তী পাঠ্য ব্যবহার করা উচিত। এটি ব্রাউজারে প্রদর্শিত হবে না। উপাদানটি ব্রাউজারে নীচের মত দেখাবে:

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

3 সক্রিয় লিঙ্ক দেখানো এবং লিঙ্ক অক্ষম করা

আপনি প্রয়োজনীয় তালিকা আইটেমে ".active" শ্রেণী যোগ করে পৃষ্ঠায় সক্রিয় লিঙ্কটি দেখাতে পারেন। একইভাবে, নির্দিষ্ট লিঙ্কে ক্লিক অক্ষম করতে ".disabled" ক্লাস যোগ করুন। নীচের উদাহরণে, পূর্ববর্তী ন্যাভিগেশন পাঠ্য নিষ্ক্রিয় করা হয়েছে এবং লিঙ্ক 2 সক্রিয় হিসাবে দেখানো হয়েছে।

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"> <a class="page-link" href="#">2 <span class="sr-only">Active Page</span></a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

। এটি মাউস দিয়ে ক্লিক করা অক্ষম করবে কিন্তু ব্যবহারকারীরা এখনও লিঙ্কটি হাইলাইট করতে কীবোর্ড ট্যাব কী ব্যবহার করতে পারে এবং লিঙ্ক করা পৃষ্ঠাটি খুলতে স্পেস বার টিপতে পারে। অ্যাট্রিবিউট tabindex = "-1 keyboard কীবোর্ড অ্যাক্সেসের জন্য লিঙ্ক অক্ষম করতে ব্যবহৃত হয়।

পৃষ্ঠার পাতায় কিভাবে সক্রিয় লিঙ্ক দেখানো হবে তা নিচে দেওয়া হল। নিষ্ক্রিয় লিঙ্কগুলি স্টপ কার্সার প্রতীক দেখাবে যখন আপনি মাউসটি উপরে নিয়ে যান।

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

4 বড় এবং ছোট আকারের পৃষ্ঠাগুলি

অন্যান্য বুটস্ট্র্যাপ 4 উপাদানগুলির অনুরূপ, পৃষ্ঠাঙ্কনটি বড় বা ছোট আকারে পরিবর্তন করা যেতে পারে। বড়টির নীচের মতো অনিয়ন্ত্রিত তালিকা সহ ".pagination-lg" শ্রেণী থাকা উচিত:

<nav aria-label="Pagination"> <ul class="pagination pagination-lg"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

এবং ঠিক !!! ছোটটিতে ".pagination-sm" শ্রেণী থাকা উচিত:

<nav aria-label="Pagination"> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

বড় এবং ছোট পৃষ্ঠাঙ্কন উপাদান নীচের মত দেখাবে:

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

5 কেন্দ্র এবং ডান সারিবদ্ধ

চূড়ান্ত প্রকরণ হল সারিবদ্ধকরণ। ডিফল্টরূপে পেজিনেশন কম্পোনেন্ট বাম পাশে সারিবদ্ধ হবে। আপনি অতিরিক্ত ক্লাস ব্যবহার করে এটিকে কেন্দ্র বা ঠিক করতে পারেন। কেন্দ্রের সারিবদ্ধকরণের জন্য, অনিয়ন্ত্রিত তালিকায় ".justify-content-center" যোগ করুন।

<nav aria-label="Pagination"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

এবং সঠিক প্রান্তিককরণের জন্য, ".justify-content-end" শ্রেণীটি অনিয়ন্ত্রিত তালিকায় যোগ করুন।

<nav aria-label="Pagination"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

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


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

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