مثال‌های صفحه‌بندی

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

نحوه ساخت یک صفحه بندی (pagination) واکنش گرا را با CSS بیاموزید.[۱]

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

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

مثال

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}


صفحه بندی از نوع فعال و Hoverable

صفحه فعلی را با کلاس .active مشخص کنید، و از انتخابگر :hover برای تغییر رنگ لینک هر صفحه هنگام جا به جایی نشانه‌گر ماوس روی آنها استفاده کنید:

مثال

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}


دکمه‌های گرد شده از نوع فعال و Hoverable

اگر شما کلید گرد شده "active" و "hover" می خواهید، ویژگی border-radius را اضافه کنید:

مثال

.pagination a {
  border-radius: 5px;
}

.pagination a.active {
  border-radius: 5px;
}


جلوه Transition از نوع Hoverable

ویژگی transition را به لینک‌های صفحه اضافه کنید تا یک جلوه transition هنگام hover بسازید:

مثال

.pagination a {
  transition: background-color .3s;
}


صفحه بندی کادر دار

از ویژگی borderبرای اضافه‌کردن کادرها (border) به صفحه بندی استفاده کنید:

مثال

.pagination a {
  border: 1px solid #ddd; /* Gray */
}


کادرهای گرد شده

نکته: کادرهای گرد شده را به لینک‌های اول و آخر خود در صفحه بندی اضافه کنید.

مثال

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}


فضای بین لینک‌ها

نکته: در صورتی که نمی‌خواهید لینک‌های صفحه را گروه‌بندی کنید، ویژگی marginرا اضافه کنید:

مثال

.pagination a {
  margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}


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

اندازه صفحه بندی را با ویژگی font-size تغییر دهید:

مثال

.pagination a {
  font-size: 22px;
}


صفحه بندی وسط چین

برای وسط چین کردن صفحه بندی، آن را در یک عنصر نگه دارنده (مانند <div>) قرار دهید:text-align:center

مثال

.center {
  text-align: center;
}


مثال‌های بیشتر

صفحه بندی Navigation :

مشاهدهٔ نتیجه»


Breadcrumbs

نوع دیگری از صفحه بندی "breadcrubmbs" نامیده می‌شود:

مثال

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}


منابع آموزشی