বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ পেজিনেশন


বেসিক পেজিনেশন

যখন ওয়েবসাইটে অনেকগুলো পেজ থাকে, সেক্ষেত্রে পেজিনেশন ব্যবহার খুবি কার্যকর হয়।

বুটস্ট্রাপের বেসিক পেজিনেশন নিম্নরুপঃ

পেজিনেশন তৈরি করার জন্য <ul> এলিমেন্টের মধ্যে .pagination ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Pagination Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

  <body>

		<div class="container">
          <h2>পেজিনেশন</h2>
          <p>.pagination ক্লাসের মাধ্যমে পেজিনেশন লিংক তৈরি করা হয়:</p>
          <ul class="pagination">
            <li><a href="#">১</a></li>
            <li><a href="#">২</a></li>
            <li><a href="#">৩</a></li>
            <li><a href="#">৪</a></li>
            <li><a href="#">৫</a></li>
          </ul>
	    </div>

  </body>
</html>

ফলাফল




একটিভ স্টেট

ব্যবহারকারী বর্তমানে কোন পেজে আছেন তা বুঝানোর জন্য .active ক্লাস যুক্ত করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Pagination Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

  <body>

		<div class="container">
          <h2>পেজিনেশন - একটিভ স্টেট</h2>
          <p>ব্যবহারকারী কোন পেজে আছেন তা বুঝানোর জন্য .active ক্লাস যুক্ত করুনঃ</p>
          <ul class="pagination">
              <li><a href="#">১</a></li>
              <li><a href="#">২</a></li>
              <li class="active"><a href="#">৩</a></li>
              <li><a href="#">৪</a></li>
              <li><a href="#">৫</a></li>
            </ul>
	    </div>

  </body>
</html>

ফলাফল




Disabled স্টেট

Disabled লিংককে ক্লিক করা যায় না।

যদি কোনো লিংককে disabled করতে চান তাহলে ঐ লিংকে .disabled ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Pagination Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

  <body>

		<div class="container">
          <h2>পেজিনেশন - Disabled স্টেট</h2>
          <p>যদি কোনো লিংককে disable করতে চায় তাহলে .disabled ক্লাস ব্যবহার করুনঃ</p>
          <ul class="pagination">
              <li><a href="#">১</a></li>
              <li><a href="#">২</a></li>
              <li class="disabled"><a href="#">৩</a></li>
              <li><a href="#">৪</a></li>
              <li><a href="#">৫</a></li>
            </ul>
	    </div>

  </body>
</html>

ফলাফল




পেজিনেশনের আকার

পেজিনেশন সহজে ছোট বড় করা যায়। বড় ব্লকের পেজিনেশনের জন্য .pagination ক্লাসের সাথে .pagination-lg ক্লাস এবং ছোট ব্লকের পেজিনেশনের জন্য .pagination-sm ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Pagination Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

  <body>

		<div class="container">
          <h2>পেজিনেশন - আকার নির্ধারণ</h2>
          <p>বড় ব্লকের জন্য পেজিনেশনের জন্য .pagination-lg ক্লাস এবং ছোট ব্লকের পেজিনেশনের জন্য
              .pagination-sm ক্লাস ব্যবহার করুনঃ</p>
          <ul class="pagination pagination-sm">
              <li><a href="#">১</a></li>
              <li><a href="#">২</a></li>
              <li class="active"><a href="#">৩</a></li>
              <li><a href="#">৪</a></li>
              <li><a href="#">৫</a></li>
            </ul>
          <ul class="pagination pagination-lg">
              <li><a href="#">১</a></li>
              <li><a href="#">২</a></li>
              <li class="disabled"><a href="#">৩</a></li>
              <li><a href="#">৪</a></li>
              <li><a href="#">৫</a></li>
            </ul>
	    </div>

  </body>
</html>

ফলাফল




ব্রেডকাম্ব

ব্রেডকাম্বের মাধ্যমেও পেজিনেশন তৈরি করা যায়। .breadcrumb ক্লাসের মাধ্যমে ন্যাভিগেশন আকারে বর্তমান পেজের অবস্থান জানা যায়। ব্রেডকাম্ব তৈরি করার জন্য <ul> এলিমেন্টের মধ্যে .breadcrumb ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Pagination Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h2>বেডকাম্ব</h2>
          <p>ন্যাভিগেশনের আকারে বর্তমান পেজের অবস্থান জানার জন্য ব্রেডকাম্ব ব্যবহার করা হয়।</p>
          <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Images</a></li>
            <li class="active">Orientation</li>
          </ul>
	    </div>

   </body>
</html>

ফলাফল




একনজরে ব্রেডকাম্ব এবং পেজিনেশন সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

ক্লাস বর্ণনা
.breadcrumb একটি ব্রেডকাম্ব তৈরী করে।
.pager সাধারণ পেজিনেশন লিঙ্ক (পূর্ববর্তী/পরবর্তী) তৈরি করে।
.previous .pager দ্বারা তৈরিকৃত পেজিনেশন লিংকের "পূর্ববর্তী/Previous" বাটনটিকে পেজের বামপাশে এ্যালাইন করে।
.next .pager দ্বারা তৈরিকৃত পেজিনেশন লিংকের "পরবর্তী/Next" বাটনটিকে পেজের ডানপাশে এ্যালাইন করে।
.disabled একটি লিঙ্ককে আনক্লিক করে রাখার জন্য ব্যবহার করা হয়।
.pagination পেজিনেশন লিংক তৈরি করে।
.pagination-lg বড় আকারের পেজিনেশনের জন্য .pagination ক্লাসের সাথে একত্রে ব্যবহার করা হয়।
.pagination-sm ছোট আকারের পেজিনেশনের জন্য .pagination ক্লাসের সাথে একত্রে ব্যবহার করা হয়।
.disabled একটি unclickable লিংককে বুঝায়।
.active বর্তমান পেজকে একটিভ করার জন্য ব্যবহার করা হয়।