صفحه بندی در Bootstrap ورژن 4

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

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

برای ایجاد یک صفحه بندی ساده، کلاس .pagination را به عنصر <ul> اضافه کنید. سپس عنصر .page را به هر عنصر <li> و یک صفحه پیوند لینک به هر لینک داخل <li> اضافه کنید.

صفحه بندی ساده
 <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"><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> 
مشاهده مثال

وضعیت فعال

کلاس ".activeبرای برجسته کردن صفحه فعلی استفاده می شود:

وضعیت فعال در صفحه بندی
 <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> 
مشاهده مثال

وضعیت غیر فعال

کلاس .disabled برای لینک هایی که به نظر می رسد غیر قابل کلیک است استفاده می شود:

<

وضعیت غیرفعال در صفحه بندی
 <ul class="pagination">
  <li class="page-item disabled"><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>
</ul> 
مشاهده مثال

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

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

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

اندازه صفحه بندی
 <ul class="pagination pagination-lg">
  <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>
</ul>

<ul class="pagination pagination-sm">
  <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>
</ul> 
مشاهده مثال

کلاس breadcrumb

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

کلاسهای breadcrumb و .breadcrumb-item موارد مکان جاری صفحه را در سلسله مراتب ناوبری نشان می دهد:

کلاس Breadcrumbs
 <ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Photos</a></li>
  <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  <li class="breadcrumb-item"><a href="#">Italy</a></li>
  <li class="breadcrumb-item active">Rome</li>
</ul> 
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای وبساز