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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

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

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

مثال
 1 .pagination {
 2   display: inline-block;
 3 }
 4 
 5 .pagination a {
 6   color: black;
 7   float: left;
 8   padding: 8px 16px;
 9   text-decoration: none;
10 }


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

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

مثال
1 .pagination a.active {
2   background-color: #4CAF50;
3   color: white;
4 }
5 
6 .pagination a:hover:not(.active) {background-color: #ddd;}


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

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

مثال
1 .pagination a {
2   border-radius: 5px;
3 }
4 
5 .pagination a.active {
6   border-radius: 5px;
7 }


جلوه Transition از نوع Hoverable

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

مثال
.pagination a {
  transition: background-color .3s;
}


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

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

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


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

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

مثال
1 .pagination a:first-child {
2   border-top-left-radius: 5px;
3   border-bottom-left-radius: 5px;
4 }
5 
6 .pagination a:last-child {
7   border-top-right-radius: 5px;
8   border-bottom-right-radius: 5px;
9 }


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

نکته: در صورتی که نمی‌خواهید لینک‌های صفحه را گروه‌بندی کنید، ویژگی 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" نامیده می‌شود:

مثال
 1 ul.breadcrumb {
 2   padding: 8px 16px;
 3   list-style: none;
 4   background-color: #eee;
 5 }
 6 
 7 ul.breadcrumb li {display: inline;}
 8 
 9 ul.breadcrumb li+li:before {
10   padding: 8px;
11   color: black;
12   content: "/\00a0";
13 }



منابع آموزشی