Bootstrap 5 ក្រុមតារាង

মৌলিক তালিকা গ্রুপ

মৌলিক তালিকা গ্রুপ হল যেমন তালিকা আইটেমসহ অসুসংগঠিত তালিকা:

যদি আপনি মৌলিক তালিকা গ্রুপ তৈরি করতে চান, তবে এই ক্লাস ব্যবহার করুন .list-group র <ul> উপাদান এবং ক্লাস হল: .list-group-item র <li> উপাদান:

উদাহরণ

<ul class="list-group">
  <li class="list-group-item">প্রথম আইটেম</li>
  <li class="list-group-item">দ্বিতীয় আইটেম</li>
  <li class="list-group-item">তৃতীয় আইটেম</li>
</ul>

আপনার নিজেই প্রয়োগ করুন

সক্রিয় অবস্থা

ব্যবহার করুন .active ক্লাস দ্বারা সুপরিচিত বর্তমান আইটেম উপলব্ধি করুন:

উদাহরণ

<ul class="list-group">
  <li class="list-group-item active">সক্রিয় আইটেম</li>
  <li class="list-group-item">দ্বিতীয় আইটেম</li>
  <li class="list-group-item">তৃতীয় আইটেম</li>
</ul>

আপনার নিজেই প্রয়োগ করুন

লিঙ্কিং আইটেমসহ তালিকা গ্রুপ

যদি আপনি লিঙ্কিং আইটেমসহ তালিকা গ্রুপ তৈরি করতে চান, তবে এই ক্লাস ব্যবহার করুন <div> প্রতিস্থাপন <ul>، যোগ করে <a> প্রতিস্থাপন <li>。সম্ভবত, আপনি হলস্ট গ্রে প্রেক্ষাপট করতে চান তবে, এটি যোগ করুন .list-group-item-action শ্রেণীঃ

উদাহরণ

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">প্রথম আইটেম</a>
  <a href="#" class="list-group-item list-group-item-action">দ্বিতীয় আইটেম</a>
  <a href="#" class="list-group-item list-group-item-action">তৃতীয় আইটেম</a>
</div>

আপনার নিজেই প্রয়োগ করুন

বন্ধ আইটেম

.disabled শ্রেণী বন্ধ আইটেমকে কমবেশি কমলা লেখার রঙ দেয়। যখন লিঙ্কের উপর ব্যবহার করা হয়, হলকা প্রভাব দেওয়া হয়:

উদাহরণ

<div class="list-group">
  <a href="#" class="list-group-item disabled">বন্ধ আইটেম</a>
  <a href="#" class="list-group-item disabled">বন্ধ আইটেম</a>
  <a href="#" class="list-group-item">তৃতীয় আইটেম</a>
</div>

আপনার নিজেই প্রয়োগ করুন

কান্তি হতে যাওয়া

ব্যবহার করা হয়: .list-group-flush শ্রেণী ব্যবহার করে কান্তি হোলা এবং বোল্ডার করা হল:

উদাহরণ

<ul class="list-group list-group-flush">
  <li class="list-group-item">প্রথম আইটেম</li>
  <li class="list-group-item">দ্বিতীয় আইটেম</li>
  <li class="list-group-item">তৃতীয় আইটেম</li>
  <li class="list-group-item">চতুর্থ আইটেম</li>
</ul>

আপনার নিজেই প্রয়োগ করুন

সংখ্যাযুক্ত তালিকা গোষ্ঠী

ব্যবহার করা হয়: .list-group-numbered শ্রেণী ব্যবহার করে সংখ্যাযুক্ত তালিকার আইটেম তৈরি করা যায়:

উদাহরণ

<ol class="list-group list-group-numbered">
  <li class="list-group-item">প্রথম আইটেম</li>
  <li class="list-group-item">দ্বিতীয় আইটেম</li>
  <li class="list-group-item">তৃতীয় আইটেম</li>
</ol>

আপনার নিজেই প্রয়োগ করুন

হলকা তালিকা গোষ্ঠী

যদি আপনি তালিকার আইটেমকে শ্রেণীবদ্ধ করে প্রদক্ষিণ দেখাতে চান (একসাথে নয় বরং ঢাকা ঢাকা), তবে .list-group-horizontal শ্রেণী যোগ করা হল: .list-group:

উদাহরণ

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">প্রথম আইটেম</li>
  <li class="list-group-item">দ্বিতীয় আইটেম</li>
  <li class="list-group-item">তৃতীয় আইটেম</li>
  <li class="list-group-item">চতুর্থ আইটেম</li>
</ul>

আপনার নিজেই প্রয়োগ করুন

পরিবেশ শ্রেণী

পরিবেশ শ্রেণী তালিকার আইটেমকে রঙ দেওয়ার জন্য ব্যবহার করা যেতে পারে:

তালিকার আইটেমকে রঙ দেওয়ার জন্য শ্রেণী হল:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

উদাহরণ

<ul class="list-group">
  <li class="list-group-item list-group-item-success">সাফল্য আইটেম</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

আপনার নিজেই প্রয়োগ করুন

কনটেক্স্ট ক্লাস সহ লিঙ্ক অবজেক্ট

উদাহরণ

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>

আপনার নিজেই প্রয়োগ করুন

ব্রেজযুক্ত তালিকা গুচ্ছ

যোগ করুন .badge শ্রেণী এবং utility/helper শ্রেণী মিলিয়ে ব্যবহার করলে, তালিকা গুচ্ছে ব্রেজ যোগ করা যায়:

উদাহরণ

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    গ্রাহকপত্র
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    বিজ্ঞাপন ইমেইল
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    বর্জ্যপত্র
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

আপনার নিজেই প্রয়োগ করুন