شرح صفوف ومحتوى الفقرة
نظراً لأن الكلاس .pagination يعمل أصلاً كحاوية صندوق مرن display: flex، فلن تحتاج إلى حاويات إضافية أو تنسيقات خارجية لمحاذاته أفقياً. أضف كلاسات المحاذاة القياسية مباشرةً إلى وسم <ul>؛ حيث يضع .justify-content-center الشريط في المنتصف، ويدفعه .justify-content-end إلى نهاية السطر المنطقية أي يسار الشاشة في الواجهة العربية ويمينها في الإنجليزية.
| الكلاس أو السمة | العنصر المستهدف | الوظيفة في Bootstrap 5.3 |
|---|---|---|
.pagination | <ul> داخل <nav> | الحاوية المرنة الأساسية لأزرار التنقل بين الصفحات |
.page-item و.page-link | <li> مع <a> أو <span> | غلاف العنصر المفرد والزر القابل للنقر وتلقي التركيز |
.active مع aria-current="page" | <li class="page-item"> | تمييز الصفحة المفتوحة حالياً بصرياً وصوتياً |
.disabled | <li class="page-item"> | تعطيل الأزرار الطرفية غير المتاحة كالسابق في أول صفحة |
.pagination-lg و.pagination-sm | <ul class="pagination"> | تكبير أو تصغير جميع أزرار الشريط بتناسب موحد |
.justify-content-center و-end | <ul class="pagination"> | توسيط الشريط أو دفعه لنهاية السطر المنطقية |
<ul class="pagination pagination-lg justify-content-center">
<li class="page-item active">
<span class="page-link">1</span>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
</ul>ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بناء أشرطة ترقيم الصفحات الدلالية في بوتستراب 5، وتنسيق أزرار الرموز المتاحة لقارئات الشاشة، وضبط حالتي التفعيل والتعطيل بأمان، والتحكم بالأحجام والمحاذاة المرنة. الخطوة التالية: انتقل الآن إلى درس «قوائم التنقل Navs في بوتستراب 5» لبناء القوائم الملاحية الأفقية والعمودية ومتساوية العرض.