CSS – صفحه‌بندی (Pagination)

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

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

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>
.pagination {
  display: inline-block;
}

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

صفحه‌بندی فعال و قابل واکنش

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

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

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

دکمه‌های فعال و قابل واکنش با گوشه‌های گرد

برای ایجاد دکمه‌های گرد، از ویژگی border-radius استفاده کنید:

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

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

افکت انتقال در هنگام هاور

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

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

صفحه‌بندی با حاشیه

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

.pagination a {
  border: 1px solid #ddd; /* خاکستری */
}

حاشیه‌های گرد برای اولین و آخرین لینک

برای ایجاد حاشیه‌های گرد برای اولین و آخرین لینک، از این استایل استفاده کنید:

.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 و برای چپ و راست 4px */
}

تغییر اندازه صفحه‌بندی

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

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

صفحه‌بندی مرکزی

برای مرکز کردن صفحه‌بندی، می‌توانید یک عنصر کانتینر مانند <div> را دور صفحه‌بندی قرار داده و ویژگی text-align: center را به آن اضافه کنید:

<div class="center">
  <div class="pagination">
    <!-- لینک‌ها -->
  </div>
</div>
.center {
  text-align: center;
}

نان‌ریزه‌ها (Breadcrumbs)

یک نوع دیگر از صفحه‌بندی که به “نان‌ریزه‌ها” معروف است:

<ul class="breadcrumb">
  <li><a href="#">خانه</a></li>
  <li><a href="#">تصاویر</a></li>
  <li><a href="#">تابستان 15</a></li>
  <li>ایتالیا</li>
</ul>
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: "/0a0";
}

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.