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

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط