بوت اسٹرپ 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 لسٹ گروپ
