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

یادگیری Bootstrap

تعداد بازدید : 1883

تاریخ و ساعت انتشار : پنج شنبه 23 آذر 1396 06:03

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

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

برای ایجاد یک صفحه بندی ساده، کلاس .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>

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.