Bootstrap - Nhóm danh sách
Mục đích của thành phần nhóm danh sách là hiển thị nội dung phức tạp và tùy chỉnh trong danh sách. Để có một nhóm danh sách cơ bản -
Thêm lớp học .list-group thành phần tử <ul>.
Thêm lớp học .list-group-item đến <li>.
Ví dụ sau đây chứng minh điều này -
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>
Thêm huy hiệu vào nhóm danh sách
Chúng tôi có thể thêm thành phần huy hiệu vào bất kỳ mục nhóm danh sách nào và nó sẽ tự động được định vị ở bên phải. Chỉ cần thêm<span class = "badge">trong phần tử <li>. Ví dụ sau đây chứng minh điều này -
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">
<span class = "badge">New</span>
24*7 support
</li>
<li class = "list-group-item">Renewal cost per year</li>
<li class = "list-group-item">
<span class = "badge">New</span>
Disocunt Offer
</li>
</ul>
Liên kết các mục trong nhóm danh sách
Bằng cách sử dụng các thẻ liên kết thay vì các mục danh sách, chúng ta có thể liên kết các nhóm danh sách. Chúng ta cần sử dụng <div> thay cho phần tử <ul>. Ví dụ sau đây chứng minh điều này -
<a href = "#" class = "list-group-item active">
Free Domain Name Registration
</a>
<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>
Thêm nội dung tùy chỉnh vào nhóm danh sách
Chúng tôi có thể thêm bất kỳ nội dung HTML nào vào các nhóm danh sách liên kết ở trên. Ví dụ sau đây chứng minh điều này -
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Starter Website Package
</h4>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
24*7 support
</h4>
<p class = "list-group-item-text">
We provide 24*7 support.
</p>
</a>
</div>
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Business Website Package
</h4>
</a>
<a href = "#" class="list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">24*7 support</h4>
<p class = "list-group-item-text">We provide 24*7 support.</p>
</a>
</div>