Bootstrap Pagination
فهرس الصفحات في BootStrap
ستتعلم في هذا الدرس عمل pagination وهو ترقيم الصفحات او فهرس الصفحات داخل صفحة للتنقل بينهم بشكل اسهل عن طريق bootstrap.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap Pagination
فهرس الصفحات في BootStrap
</>
Bootstrap Pagination
فهرس الصفحات في bootstrap
- يستخدم pagination فهرس الصفحات في حالة وجود موقع يحتوي على العديد من الصفحات ونريد تسهيل عملية التنقل بينهم عن طريق وضع ترقيم لها.
- لانشاء pagination نقوم بانشاء عنصر <ul> قائمة ونضيف له كلاس pagination بهذا الشكل <"ul class= "pagination>. ثم نقوم باضافة كلاس page-item داخل كل عنصر <li> في القائمة.
- بداخل كل عنصر <li> نضع عنصر <a> لينك ونضيف له كلاس page-link.
BootStrap Pagination
عمل فهرس للصفحات في bootstrap
<div class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li> </div>
</>
BootStrap Pagination Active and Disabled State
الحالة النشطة والغير نشطة لفهرس الصفحات في bootstrap
- كلاس active يضاف الى عنصر <li> ويستخدم لاعطاء خلفية لهذا الزر لتمييزه عن باقي الازرار.
- لتعطيل الازرار الموجودة في pagination نقوم باضافة كلاس disabled داخل عنصر <li>, فيصبح الزر غير قابلا للضغط عليه.
Pagination Active State
استخدام كلاس active لتمييز احد الازرار في pagination.
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li> </ul>
Pagination Disabled State
استخدام كلاس disabled لايقاف تشغيل احد الازرار في pagination.
<ul class="pagination"> <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="#">Next</a></li> </ul>
</>
BootStrap Pagination Sizing
تغيير حجم فهرس الصفحات في bootstrap
Pagination Sizing
تكبير وتصغير حجم pagination.
<ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> </ul> <!-- Default --> <ul class="pagination pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul>
</>
BootStrap Pagination Breadcrumbs
المسار التفصيلي لفهرس الصفحات في bootstrap
- breadcrumbs هو list افقية من links تعرض تفرع الصفحة الحالية من سلسلة صفحات الموقع,ويعتبر احد صور pagination.
- يستخدم breadcrumb بنفس طريقة pagination حيث يتم اضافة كلاس breadcrumb الى عنصر <ul>, ثم نضيف كلاس breadcrumb-element بداخل عناصر <li>.
BootStrap Breadcrumbs
عمل مسار تفصيلي لاحد الصفحات باستخدام كلاس breadcrumb.
<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Photos</a></li> <li class="breadcrumb-item active">Rome</li> </ul>
ملاحظة
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
