آموزش بوت استرپ

ایجاد صفحه بندی Pagination و Breadcrumbs بوت استرپ bootstrap

قبلی بعدی

ایجاد و ساخت صفحه بندی Pagination ، شماره گذاری صفحات سایت و Breadcrumbs با بوت استرپ bootstrap در این مقاله مثال های متعددی برای تفهیم بیشتر صفحه بندی با بوت استرپ زده خواهد شد.

صفحه بندی پایه

اگر شما یک وب سایت با تعداد زیادی صفحات داشته باشید، ممکن است بخواهید یک صفحه بندی را به هر صفحه اضافه کنید.

صفحه بندی  پیش فرض در Bootstrap به شکل زیر است:

برای ایجاد یک صفحه بندی اساسی، کلاس .pagination را به عنصر <ul> اضافه کنید:

مثال

Active State

حالت فعال نشان می دهد که صفحه فعلی چیست:

اضافه کردن کلاس .active برای اجازه دادن به کاربر می داند که کدام صفحه در آن است:

مثال

Disabled State

وقتی کلاس disable را به صفحه بندی اضافه می کنید. وقتی موس روی شماره صفحه جاری می رود ، بصورت غیر فعال نمایش میدهد و کاربر نمی تواند روی آن کلیک کند.

اگر یک لینک به دلایلی غیرفعال شده است، با  افزودن کلاس .disabled می توانید این کار را انجام دهید:

مثال

اندازه صفحه بندی

بلوک های صفحه بندی همچنین می تواند به اندازه بزرگتر یا کوچکتر تبدیل شونید:

اضافه کردن کلاس .pagination-lg برای بلوک های بزرگتر یا .pagination-sm برای بلوک های کوچکتر:

مثال

Breadcrumbs

شکل دیگری برای صفحه بندی،Breadcrumbs است:

کلاس .breadcrumb محل مکان فعلی را در یک سلسله مراتب ناوبری نشان می دهد:

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید

بستن
بستن