Bootstrap 5 পেজিনেশন
- পূর্ববর্তী পৃষ্ঠা BS5 লোডার
- পরবর্তী পৃষ্ঠা BS5 তালিকা গোষ্ঠী
মূলতন্ত্র পৃষ্ঠান্তর
আপনার ওয়েবসাইটে অনেক পৃষ্ঠা থাকলে, প্রত্যেক পৃষ্ঠার জন্য কোনও পৃষ্ঠান্তর যোগ করতে হবে。
মূলতন্ত্র পৃষ্ঠান্তর তৈরি করতে, .pagination শ্রেণী যোগ করা হয়: <ul> উপাদানকে।তারপরে, .page-item প্রত্যেক <li> উপাদানকে, এবং .page-link শ্রেণী যোগ করা হয়: <li> প্রত্যেক লিঙ্ককে:
ইনস্ট্যান্স
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">পূর্বপক্ষ</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="#">পরবর্তী পৃষ্ঠা</a></li> </ul>
সক্রিয় অবস্থা
.active বর্তমান পৃষ্ঠা উপস্থাপনার জন্য শ্রেণী ব্যবহার করা হয়:
ইনস্ট্যান্স
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">পূর্বপক্ষ</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</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">পরবর্তী পৃষ্ঠা</a></li> </ul>
অসক্রিয় অবস্থা
.disabled অসক্রিয় লিঙ্ক জন্য শ্রেণী ব্যবহার করা হয়:
ইনস্ট্যান্স
<ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">পূর্বপক্ষ</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="#">পরবর্তী পৃষ্ঠা</a></li> </ul>
পৃষ্ঠান্তর আকার
পৃষ্ঠান্তর বক্তৃতা আকার বাড়াতে বা ছোট করতে পরিবর্তন করা যায়:
বড় বক্তৃতা যোগ করুন .pagination-lg ক্ষুদ্র বক্তৃতা যোগ করুন .pagination-sm শ্রেণীঃ
ইনস্ট্যান্স
<ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">পূর্বপক্ষ</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="#">পরবর্তী পৃষ্ঠা</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">পূর্বপক্ষ</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="#">পরবর্তী পৃষ্ঠা</a></li> </ul>
পেজিনেশন অবস্থান
পেজিনেশনের অবস্থান কেন্দ্রীভূত করতে utility ক্লাস ব্যবহার করুন:
ইনস্ট্যান্স
/* ডানদিকে সামান্য (ডিফল্ট) */ <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> /* মধ্যবর্তী */ <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> /* ডানদিকে সামান্য */ <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul>
ব্রেকক্রমস (Breadcrumbs)
পেজিনেশনের আরেকটি রূপ হল ব্রেকক্রমস:
.breadcrumb এবং .breadcrumb-item ক্লাস নিয়েই বর্তমান পৃষ্ঠা নেভিগেশন হাইপারস্ট্রাকচারের অবস্থান নির্দেশ করে:
ইনস্ট্যান্স
<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">ছবি</a></li> <li class="breadcrumb-item"><a href="#">2019 সম্বত য়াক্ষর</a></li> <li class="breadcrumb-item"><a href="#">চীন</a></li> <li class="breadcrumb-item active">বেইজিং</li> </ul>
- পূর্ববর্তী পৃষ্ঠা BS5 লোডার
- পরবর্তী পৃষ্ঠা BS5 তালিকা গোষ্ঠী
