নাম-শরিফুল ইসলাম
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>
ফলাফল :