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

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

نحوه ساخت یک صفحه بندی (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";
}

منابع آموزشی[ویرایش]