X

X

X

CSS পেজিনেশন


এই অধ্যায়ে শিখবেন কিভাবে সিএসএস ব্যবহার করে রেসপনসিভ পেজিনেশন তৈরি করা যায়।


সাধারণ পেজিনেশন

থরুণ আপনার একটি ব্লগ ওয়েবসাইট রয়েছে। ব্লগ পেজে আপনি অনেকগুলো ব্লগ পোস্ট সংক্ষিপ্ত আকারে উপস্থাপণ করতে চান। কিন্তু এক পেজে অনেকগুলো ব্লগপোস্টকে সঠিকভাবে উপস্থাপণ করা সম্ভব না। এক্ষেত্রে পেজিনেশন খুব গুরুত্বপূর্ণ। নিচে দুইটি সিম্পল পেজিনেশনের উদাহরণ দেওয়া হলো:

Code Example

.pagination {
    display: inline-block;
}

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Active এবং Hoverable পেজনিশেন

একটি .active class ব্যবহার করে পেজিনেশনের একটি আইটেমকে হাইলাইট করুন, এবং :hover selector ব্যবহার করে বাকি আইটেমগুলোতে হোভার ইফেক্ট যুক্ত করুন:

Code Example

.pagination {
    display: inline-block;
}

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

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

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Rounded Active এবং Hoverable Button

Add the border-radius property if you want a rounded “active” and “hover” button:

Code Example

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

.pagination a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Hoverable Transition Effect

মাউস হোভার করার সাথে সাথে transition effect যুক্ত করার জন্য transition property ব্যবহার করতে হবে:

Code Example

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

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বর্ডারযুক্ত Pagination

border property ব্যবহার করে পেজিনেশন আইটেমগুলোতে বর্ডার যুক্ত করা যায়:

Code Example

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Rounded Borders

টিপস: পেজিনেশনের প্রথম ও শেষ আইটেমে বৃত্তাকার বর্ডার যুক্ত করুন। তাহলে দেখতে সুন্দর লাগবে:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Space Between Links

টিপস: যদি পেজিনেশন আইটেমগুলোকে গ্রুপ আকারে প্রকাশ করতে না চান তবে, margin property ব্যবহার করে প্রতিটি আইটেমের চারপাশে মার্জিন যুক্ত করুন:

Code Example

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 4px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Pagination Size

font-size property ব্যবহার করে পেজিনেশেন আইটেমের সাইজ পরিবর্তন করতে পারবেন:

Code Example

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    font-size: 22px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Centered Pagination

পেজিনেশন আইটেমগুলোকে পেজের মাঝ বরাবর উপস্থাপন করার জন্য, সবগুলো আইটেমকে একটি কন্টেইনার ইলামেন্ট (যেমন, <div>) এর ভেতরে প্রবেশ করান, তারপর এর text-align:center সেট করুন:

Code Example

.center {
    text-align: center;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরও কিছু উদাহরণ

উদাহরণ

Try it Yourself »


Breadcrumbs

পেজিনেশনের আরেকটি ভার্শন হচ্ছে “breadcrumbs”। নিচের উদাহরণে “breadcrumbs” তৈরি করার পদ্ধতি বর্ণনা করা হলো:

Code Example

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";
}
ul.breadcrumb li a {color: green;}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।