آموزش کار با فریمورک رایگان بوت استرپ / قسمت نهم
صفحه بندی در بوت استرپ (Bootstrap Pagination)
آیا مطالب در وب سایت شما صفحات زیادی دارد؟ نمی دانید چطور آنها را به صورت مرتب در چند صفحه نشان دهید به طوری که شماره صفحات به صورت مرتب در هر صفحه دیده بشه.
این خواسته را می توانید با استفاده از صفحه بندی بوت استرپ بر آورده کنید. برای آشنایی ونحوه استفاده از صفحه بندی بوت استرپ با ما همراه باشید.
صفحه بندی پایه
اگر شما یک وب سایت با تعداد زیادی از صفحات دارید، ممکن است مایل به اضافه کردن برخی مرتب ساز ها بر اساس صفحه بندی به هر صفحه باشید.
صفحه بندی پایه در بوت استرپ شبیه این است:
برای ایجاد یک صفحه بندی پایه، کلاس .pagination را به عنصر ul اضافه کنید.
مثال:
۱
۲
۳
۴
۵
۶
۷
|
< 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 را اضافه کنید تا به کاربر اجازه دهید بداند در کدام صفحه است.
مثال:
۱
۲
۳
۴
۵
۶
۷
|
< 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 را اضافه کنید:
مثال:
۱
۲
۳
۴
۵
۶
۷
|
< 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 برای بلوک های کوچکتر استفاده کنید:
مثال:
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
|
< 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 محل صفحه فعلی را در یک سلسله مراتب navigational نشان می دهد:
مثال:
۱
۲
۳
۴
۵
۶
|
< 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 > |