ایجاد صفحه بندی Pagination و Breadcrumbs بوت استرپ bootstrap
ایجاد و ساخت صفحه بندی Pagination ، شماره گذاری صفحات سایت و Breadcrumbs با بوت استرپ bootstrap در این مقاله مثال های متعددی برای تفهیم بیشتر صفحه بندی با بوت استرپ زده خواهد شد.
مقالات
صفحه بندی پایه
اگر شما یک وب سایت با تعداد زیادی صفحات داشته باشید، ممکن است بخواهید یک صفحه بندی را به هر صفحه اضافه کنید.
صفحه بندی پیش فرض در Bootstrap به شکل زیر است:
برای ایجاد یک صفحه بندی اساسی، کلاس .pagination را به عنصر <ul> اضافه کنید:
مثال
|
1 2 3 4 5 6 7 |
<ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> |
Active State
حالت فعال نشان می دهد که صفحه فعلی چیست:
اضافه کردن کلاس .active برای اجازه دادن به کاربر می داند که کدام صفحه در آن است:
مثال
|
1 2 3 4 5 6 7 |
<ul class="pagination"> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> |
Disabled State
وقتی کلاس disable را به صفحه بندی اضافه می کنید. وقتی موس روی شماره صفحه جاری می رود ، بصورت غیر فعال نمایش میدهد و کاربر نمی تواند روی آن کلیک کند.
اگر یک لینک به دلایلی غیرفعال شده است، با افزودن کلاس .disabled می توانید این کار را انجام دهید:
مثال
|
1 2 3 4 5 6 7 |
<ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="disabled"><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> |
اندازه صفحه بندی
بلوک های صفحه بندی همچنین می تواند به اندازه بزرگتر یا کوچکتر تبدیل شونید:
اضافه کردن کلاس .pagination-lg برای بلوک های بزرگتر یا .pagination-sm برای بلوک های کوچکتر:
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ul class="pagination pagination-lg"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> <ul class="pagination pagination-sm"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> |
Breadcrumbs
شکل دیگری برای صفحه بندی،Breadcrumbs است:
کلاس .breadcrumb محل مکان فعلی را در یک سلسله مراتب ناوبری نشان می دهد:
|
1 2 3 4 5 6 7 |
<ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Private</a></li> <li><a href="#">Pictures</a></li> <li class="active">Vacation</li> </ul> Try it Yourself » |
مطالب زیر را حتما مطالعه کنید
افزونه و کلاس Carousel در بوت استرپ bootstrap
کلاس collapse در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
دیدگاهتان را بنویسید