Buzz
Để hiểu cách tạo Danh sách nhóm trong Bootstrap, bạn hãy theo dõi bài học Bootstrap dưới đây của Mytour.
Danh sách nhóm trong Bootstrap
1. Tạo Danh sách nhóm trong Bootstrap
Danh sách nhóm trong Bootstrap được sử dụng để hiển thị các phần tử trong danh sách một cách thú vị và thu hút hơn. Trong hầu hết các định dạng cơ bản, danh sách nhóm chỉ đơn giản là kiểu danh sách không theo thứ tự với lớp .list-group, hoặc các mục danh sách có lớp .list-group-item.
Ví dụ: Dưới đây là minh họa cách tạo danh sách nhóm trong Bootstrap:
Kết quả trả về sẽ có dạng như dưới đây:
2. Danh sách nhóm với các liên kết
Chúng ta có thể sử dụng các list-group-item như là liên kết với một số thay đổi trong HTML.
Chỉ cần thay thế thẻ li bằng thẻ a và sử dụng các phần tử div làm phần tử cha thay vì ul. Ngoài ra, chúng ta có thể thêm các lớp icon và badge cho danh sách nhóm.
Ví dụ 1: Trong ví dụ dưới đây, chúng ta thêm các lớp icon và badge cho danh sách nhóm:
Kết quả xuất hiện như sau:
Mẹo: Nếu muốn, bạn cũng có thể sử dụng danh sách nhóm trong Bootstrap để tạo menu điều hướng, chẳng hạn như menu hiển thị các danh mục hoặc sản phẩm trên trang web của mình.
Bổ sung thêm, chúng ta cũng có thể thêm các phần tử HTML khác như tiêu đề (heading) và đoạn văn bản (paragraph) trong danh sách nhóm.
Ví dụ 2: Dưới đây là ví dụ minh họa cách thêm các phần tử heading và paragraph trong HTML:
Kết quả hiển thị như sau:
3. List Group với các lớp theo ngữ cảnh
Tương tự như các yếu tố khác, chúng ta có thể áp dụng các lớp theo ngữ cảnh vào list-group-item để làm nổi bật.
Ví dụ: Dưới đây là ví dụ minh họa việc sử dụng các lớp theo ngữ cảnh cho List Group:
Kết quả xuất hiện như sau:
Tương tự, chúng ta có thể áp dụng các lớp theo ngữ cảnh cho list-group-item dưới dạng liên kết. Để xác định list-group-item đang được kích hoạt, chúng ta sử dụng lớp .active.
Tham khảo ví dụ dưới đây, trong đó chúng ta sử dụng các lớp theo ngữ cảnh cho list-group-item là liên kết:
Kết quả hiển thị như sau:
Trong bài học này, Mytour đã chia sẻ với bạn về List Group trong Bootstrap. Trong bài học tiếp theo, Mytour sẽ hướng dẫn cách tạo form trong Bootstrap.
