آموزش صفحه بندی یا Pagination در CSS

مقدمه

صفحه‌بندی (Pagination) در طراحی وب به شما امکان می‌دهد محتوای طولانی را در صفحات کوچک‌تر تقسیم کنید و تجربه کاربری را بهبود دهید. با استفاده از CSS می‌توان دکمه‌ها و لینک‌های صفحه‌بندی را طراحی و افکت‌دهی کرد. برای یادگیری کامل CSS و طراحی Pagination حرفه‌ای، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی Pagination

Pagination شامل مجموعه لینک‌ها یا دکمه‌ها است که صفحات مختلف محتوا را نمایش می‌دهند. CSS امکان استایل‌دهی، افکت‌ها و نمایش واکنش‌گرا برای Pagination را فراهم می‌کند.

• استفاده از display: flex یا inline-block برای چیدمان
• استفاده از margin و padding برای فاصله‌دهی بین لینک‌ها
• افکت‌های hover برای تعامل بهتر کاربر
• طراحی واکنش‌گرا برای نمایش صحیح در موبایل و تبلت

مثال عملی با کد

Pagination افقی ساده:

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.pagination li a:hover {
  background-color: #3498db;
  color: white;
}

Pagination با شماره فعال:

.pagination li.active a {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
}

Pagination واکنش‌گرا:

@media (max-width: 768px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

نکات مهم و توضیحات تکمیلی

• استفاده از flex و inline-block برای چیدمان آسان و واکنش‌گرا ضروری است.
• افکت‌های hover باعث بهبود تعامل کاربر می‌شوند.
• تعیین active state باعث شناسایی صفحه جاری می‌شود.
• در طراحی موبایل، Pagination باید قابل اسکرول یا wrap شود.

ادامه آموزش CSS

برای یادگیری کامل ماژول Grid Layout و طراحی شبکه‌ای حرفه‌ای صفحات، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.