সিএসএস(৩) ব্যবহার করে আপনি বিভিন্ন স্টাইলের পেজিনেশন তৈরি করতে পারেন। তবে এর মধ্যে সব চেয়ে কার্যকরী হচ্ছে রেস্পন্সিভ পেজিনেশন তৈরি করা। আমরা এই অধ্যায়ে শিখবো কিভাবে একটি রেস্পন্সিভ পেজিনেশন তৈরি করা যায়।
সাধারণ পেজিনেশন
যদি আপনার অসংখ্য পেইজের একটি ওয়েবসাইট থাকে তাহলে আপনি প্রত্যেকটি পেইজে পেজিনেশন যুক্ত করতে চাইবেনঃ
চলুন পেজিনেশন তৈরি করার জন্য একটি এইচটিএমএল লিস্টকে স্টাইল করিঃ
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
Read more
