CSS পেজিনেশন ইনস্ট্যান্স

CSS ব্যবহার করে রেসপন্সিভ পেজিনেশন তৈরি করতে শিখুন。

সহজ পেজিনেশন

যদি ওয়েবসাইটে অনেক পৃষ্ঠা থাকে, তবে আপনি প্রতিটি পৃষ্ঠায় কোনো পেজিনেশন ফাংশন যোগ করতে চাইবেন:

ইনস্ট্যান্স

❯
  .pagination {
}
.pagination a {
  color: black;
  display: inline-block;
  padding: 8px 16px;
  float: left;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

text-decoration: none;

অগ্রগতির পৃষ্ঠাবদ্ধতা .active ক্লাস মান চিহ্নিত পৃষ্ঠাসূচক ও মাউস ওভার হওয়ার সময় ব্যবহার করুন: :hover প্রতিশব্দযুক্ত পৃষ্ঠাসূচক লিঙ্কের রঙ পরিবর্তন করুন:

ইনস্ট্যান্স

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

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

বৃত্তাকার অগ্রগতির পৃষ্ঠাবদ্ধতা

যদি আপনি বৃত্তাকার "active" ও "hover" বাটন চান, তাহলে এই প্রতিশব্দ যোগ করুন: border-radius margin

ইনস্ট্যান্স

.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; /* উপর ও নীচের বাহ্যিক মাপ ০, স্বাধীনভাবে পরিবর্তন করা যায় */

পৃষ্ঠাবদ্ধতা মাপ font-size পৃষ্ঠাবদ্ধতার মাপ পরিবর্তন করতে, এই প্রতিশব্দ ব্যবহার করুন:

ইনস্ট্যান্স

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

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

মধ্যস্থানীয় পৃষ্ঠাবদ্ধতা

যদি মধ্যস্থানীয় পৃষ্ঠাবদ্ধতা করতে হয়, তাহলে ব্যবহার করুন যেমন সংযোজিত হওয়ার জন্য: text-align:center এটি অবরূপ উপাদান (যেমন <div>) ঘিরে থাকে:

ইনস্ট্যান্স

.center {}}
  text-align: center;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

আরও ইনস্ট্যান্স

ইনস্ট্যান্স

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

মহলা নাম

পেজিনেশনের আরেকটি রূপ হল মহলা নাম (breadcrumbs):

ইনস্ট্যান্স

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";
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন