في هذا الدرس 5تصفّح المواضيع
تتغير حالة أزرار الترقيم ديناميكياً مع تنقل الزائر بين الصفحات؛ ففي الصفحة الأولى يجب تعطيل زر «السابق» بإضافة كلاس .disabled إلى .page-item، بينما يُميَّز رقم الصفحة المفتوحة حالياً بكلاس .active مع السمة الدلالية aria-current="page".
وانتبه لتفصيل مهم يخص لوحة المفاتيح: وسم الرابط <a> في HTML لا يمتلك سمة تعطيل أصلية تمنع الوصول إليه بزر Tab. لذلك يُفضَّل استبدال الرابط بوسم <span class="page-link"> داخل العنصر المعطل أو النشط، أو إضافة tabindex="-1" مع aria-disabled="true" إذا اضطررت للإبقاء على وسم الرابط.
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
</ul>تختلف المساحة المتاحة لأزرار الترقيم باختلاف سياق الواجهة؛ فالمتاجر الإلكترونية العامة وشاشات اللمس تستفيد من أهداف النقر الكبيرة عبر الكلاس .pagination-lg، في حين تتناسق جداول البيانات الإدارية المزدحمة مع الحجم المصغر .pagination-sm.
يُضاف كلا الكلاسين مباشرةً بجانب .pagination على العنصر الأب <ul>، فيعيدان ضبط الحشو الداخلي وحجم الخط واستدارة الزوايا الطرفية بتناسب تلقائي نظيف.
نظراً لأن الكلاس .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» لبناء القوائم الملاحية الأفقية والعمودية ومتساوية العرض.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Pagination ترقيم الصفحات
- نمط ملاحي يقسم القوائم والبيانات الضخمة إلى صفحات مرقمة متتابعة يسهل تصفحها وتحميلها.
- للمراجعة
- 02 Navigation Landmark معلم التنقل الدلالي
- منطقة وسم <nav> مزودة بسمة aria-label لتمكين التقنيات المساعدة من التمييز بين عدة أشرطة تنقل في الصفحة.
- للمراجعة
- 03 Self-Link Prevention منع الرابط الذاتي
- تمثيل رقم الصفحة المفتوحة حالياً بوسم <span> غير قابل للنقر بدلاً من رابط يعيد تحميل الصفحة نفسها.
- للمراجعة
- 04 Boundary State حالة الأطراف الحدية
- تعطيل زر السابق في الصفحة الأولى وزر التالي في الصفحة الأخيرة لمنع انتقال المستخدم إلى صفحة غير موجودة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ARIA تطبيقات الإنترنت الغنية المتاحة
- Accessible Rich Internet Applications
- مجموعة سمات قياسية مثل aria-label وaria-current تنقل حالة عناصر الترقيم بوضوح لقارئات الشاشة.
- للمراجعة
- 02 RTL الاتجاه من اليمين إلى اليسار
- Right-to-Left
- اتجاه تخطيط الواجهات العربية الذي ينعكس فيه تسلسل أرقام الصفحات ومحاذاة الصندوق المرن تلقائياً.
- للمراجعة
- 03 URL محدد موقع المورد الموحد
- Uniform Resource Locator
- عنوان الويب الذي يحمل معاملات الانتقال بين الصفحات مثل ?page=2 بين المتصفح والخادم.
- للمراجعة
- 04 WCAG إرشادات إتاحة محتوى الويب
- Web Content Accessibility Guidelines
- المعايير الدولية المنظمة لحجم مساحات اللمس وترتيب التركيز وتباين الألوان في عناصر الواجهة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ وسم <nav aria-label="Blog pages"> يضم قائمة .pagination متوسطة بـ .justify-content-center تحتوي زر سابق معطلاً برمز، والصفحة 1 نشطة بوسم <span> وaria-current="page"، والصفحتين 2 و3، وزر تالٍ برمز متاح صوتياً.
-
افتح محرر التجربة وابنِ شريطي ترقيم: الأول بكلاس .pagination-lg الملائم لشاشات اللمس، والثاني مصغر بكلاسي .pagination-sm و.justify-content-end أسفل جدول بيانات.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.