[Bootstrap] Phần 14: Nhóm danh sách

Nội dung bài viết là các lớp trong Bootstrap để mô tả các nhóm danh sách.

Nhóm danh sách cơ bản
Nhóm danh sách phổ biến nhất là 1 danh sách không theo thứ tự chứa các phần tử con. Để tạo 1 nhóm danh sách, chúng ta dùng phần tử ul với lớp .list-group, và phần tử li với lớp .list-group-item.

<div class="container">
  <h2>Nhóm danh sách cơ bản</h2>
  <ul class="list-group">
    <li class="list-group-item">Phần tử thứ 1</li>
    <li class="list-group-item">Phần tử thứ 2</li>
    <li class="list-group-item">Phần tử thứ 3</li>
  </ul>
</div>

Danh sách với badge (huy hiệu)
Chúng ta có thể thêm các badge vào danh sách như sau ví dụ sau.

<div class="container">
  <h2>Nhóm danh sách cơ bản</h2>
  <ul class="list-group">
    <li class="list-group-item">Phần tử thứ 1</li>
    <li class="list-group-item">Phần tử thứ 2</li>
    <li class="list-group-item">Phần tử thứ 3</li>
  </ul>
</div>

Nhóm danh sách với các liên kết
Chúng ta có thể thêm thẻ a vào từng phần tử con trong danh sách để tạo các liên kết.

<div class="container">
	<div class="list-group">
		<h3>Danh sách với các liên kết - dammio.com</h3>
		<a href="#" class="list-group-item">Phần tử thứ 1</a>
		<a href="#" class="list-group-item">Phần tử thứ 2</a>
		<a href="#" class="list-group-item">Phần tử thứ 3</a>
	</div>
</div>

Trạng thái kích hoạt, vô hiệu hóa phần tử trong danh sách
Để kích hoạt hay vô hiệu hóa phần tử nào đó trong danh sách, chúng ta cũng dùng 2 lớp .active và .disabled.

<div class="container">
	<div class="list-group">
		<h3>Danh sách với phần tử được kích hoạt và vô hiệu hóa</h3>
		<h4>bằng hai lớp .active và .disabled - dammio.com</h4>
		<a href="#" class="list-group-item active">Phần tử thứ 1</a>
		<a href="#" class="list-group-item">Phần tử thứ 2</a>
		<a href="#" class="list-group-item disabled">Phần tử thứ 3</a>
	</div>
</div>

Nhóm danh sách với màu sắc khác nhau
Chúng ta cũng có thể sử dụng các lớp .list-group-item-success, list-group-item-info, list-group-item-warning, và .list-group-item-danger để thể hiện nhóm danh sách với các màu sắc khác nhau.

<div class="container">
	<div class="list-group">
		<h3>Danh sách với các màu sắc khác nhau - dammio.com</h3>
		<li class="list-group-item list-group-item-success">Phần tử thứ 1 .list-group-item-success</li>
		<li class="list-group-item list-group-item-info">Phần tử thứ 2 .list-group-item-info</li>
		<li class="list-group-item list-group-item-warning">Phần tử thứ 3 .list-group-item-warning</li>
		<li class="list-group-item list-group-item-danger">Phần tử thứ 4 .list-group-item-danger</li>
	</div>
</div>

Tùy chọn nội dung
Bạn có thêm các nội dung HTML vào nhóm các danh sách bằng 2 lớp .list-group-item-heading và .list-group-item-text như ví dụ sau.

<div class="container">
	<div class="list-group">
		<h3>Danh sách chứa văn bản HTML - dammio.com</h3>
		<a href="#" class="list-group-item active">
			<h4 class="list-group-item-heading">Tiêu đề nhóm 1</h4>
			<p class="list-group-item-text">Văn bản nhóm 1</p>
		</a>
		<a href="#" class="list-group-item">
			<h4 class="list-group-item-heading">Tiêu đề nhóm 2</h4>
			<p class="list-group-item-text">Văn bản nhóm 2</p>
		</a>
	</div>
</div>

Kết luận: bài viết đã nêu ra cách sử dụng các lớp trong Bootstrap để thể hiện cho các danh sách nhóm.