সিএসএস(৩) ব্যবহার করে আপনি বিভিন্ন স্টাইলের পেজিনেশন তৈরি করতে পারেন। তবে এর মধ্যে সব চেয়ে কার্যকরী হচ্ছে রেস্পন্সিভ পেজিনেশন তৈরি করা। আমরা এই অধ্যায়ে শিখবো কিভাবে একটি রেস্পন্সিভ পেজিনেশন তৈরি করা যায়।

সাধারণ পেজিনেশন

যদি আপনার অসংখ্য পেইজের একটি ওয়েবসাইট থাকে তাহলে আপনি প্রত্যেকটি পেইজে পেজিনেশন যুক্ত করতে চাইবেনঃ

চলুন পেজিনেশন তৈরি করার জন্য একটি এইচটিএমএল লিস্টকে স্টাইল করিঃ

kt_satt_skill_example_id=1758

এক্টিভ এবং হোবার যুক্ত পেজিনেশন

পেজিনেশনে .active ক্লাস ব্যবহার করে চলতি পেইজ কে হাইলাইট করুন এবং পেজিনেশনের সকল নাম্বারের ক্ষেত্রে :hover সিলেক্টর ব্যবহার করে একটি হোবার ইফেক্ট দিনঃ

kt_satt_skill_example_id=1759

গোলাকৃতি, এক্টিভ এবং হোবার যুক্ত পেজিনেশন

এক্টিভ এবং হোভার বাটনকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ

kt_satt_skill_example_id=1760

পেজিনেশনে হোবার যুক্ত ট্রানজিশন ইফেক্ট

পেজিনেশনের বাটনে ট্রানজিশন ইফেক্ট যুক্ত করার জন্য transition প্রোপার্টি ব্যবহার করুনঃ

kt_satt_skill_example_id=1761

বর্ডার সহ পেজিনেশন

পেজিনেশনে বর্ডার যুক্ত করার জন্য border প্রোপার্টি ব্যবহার করুনঃ

kt_satt_skill_example_id=1762

গোলাকৃতির বর্ডার সহ পেজিনেশন

বর্ডার যুক্ত পেজিনেশনে গোলাকৃতি বর্ডার যুক্ত করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ

kt_satt_skill_example_id=1763

পেজিনেশনের লিংকের মাঝে দূরত্ব

পেজিনেশনে লিংকের মাঝে দূরত্ব তৈরি করার জন্য margin প্রোপার্টি ব্যবহার করুনঃ

kt_satt_skill_example_id=1764

পেজিনেশন সাইজ

পেজিনেশনের সাইজ পরিবর্তন করতে font-size প্রোপার্টি ব্যবহার করুনঃ

kt_satt_skill_example_id=1765

পেজের মাঝে পেজিনেশন

পেজিনেশনকে পেজের মাঝে আনতে text-align:center প্রোপার্টি ব্যবহার করুনঃ

kt_satt_skill_example_id=1766

আরো কিছু পেজিনেশন

kt_satt_skill_example_id=1767

ব্রেডকার্ম্ব(Breadcrumbs)

পেজিনেশনের আরেকটি ধরণকে বলে "ব্রেডকার্ম্ব"। নিম্নে আমরা দেখবো কিভাবে একটি ব্রেডকার্ম্ব তৈরি করবেনঃ

kt_satt_skill_example_id=1768