বুটস্ট্র্যাপ লিস্ট গ্রুপ্স (Bootstrap List Groups)

নাম-শরিফুল ইসলাম

Job category-Php Coder

 

basic list group তৈরি করার জন্য আমাদের <ul> এর মধ্যে .list-group ব্যবহার করতে হবে। এবং <li> এর মধ্যে .list-group-item ব্যবহার করতে হবে।


<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

ফলাফল :

 

আমরা list-group এর সাথে badges যুক্ত করতে পারি। এইগুলো অটোমেটিক ভাবে ডান দিকে পজিশন নেয়। badge তৈরি করার জন্য span এর সাথে badge ক্লাস যোগ করতে হবে।


<ul class="list-group">
  <li class="list-group-item"><span class="badge">12</span> New</li>
  <li class="list-group-item"><span class="badge">5</span> Deleted</li>
  <li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul>

ফলাফল :

 

লিস্ট গ্রুপ এর মধ্যে আইটেম গুলোকে hyperlink করা যাবে। এই জন্য আমাদের <ul> এর পরিবর্তে div ব্যবহার করতে হবে। এবং <li>এর পরিবর্তে <a> ব্যবহার করতে হবে।


<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

ফলাফল :

 

কোন আইটেম কে disable করে রাখার জন্য


<div class="list-group">
  <a href="#" class="list-group-item disabled">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

ফলাফল :

 

Contextual classes ব্যবহার করার জন্য আমাদের .list-group-item-success, list-group-item-info, list-group-item-warning, এবং .list-group-item-danger এই ক্লাস গুলো ব্যবহার করতে হবে


<ul class="list-group">
  <li class="list-group-item list-group-item-success">First item</li>
  <li class="list-group-item list-group-item-info">Second item</li>
  <li class="list-group-item list-group-item-warning">Third item</li>
  <li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>

ফলাফল :

 

Bootstrap এ .list-group-item-heading এবং .list-group-item-text ক্লাস গুলো ব্যবহার করে কোড নিম্মরুপ


<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">First List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
</div>

ফলাফল :

 

 

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%b2%e0%a6%bf%e0%a6%b8%e0%a7%8d%e0%a6%9f-%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a7%81%e0%a6%aa/