Để tìm hiểu cáchtạo List Group trong Bootstrapnhư thế nào, bạn đọc cùng tham khảo tiếp bàihọc Bootstrapdưới đây của hiepsiit.com.
Tạo List Group Trong Bootstrap
List Group trong Bootstrap được sử dụng để hiển thị các phần tử trong danh sách trông bắt mắt hơn. Trong hầu hết các định dạng cơ bản, list group 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ụ:ví dụ dưới đây minh họa cách tạo list group trong Bootstrap:
- Pictures
- Documents
- Music
- Videos
Xem ví dụ
List Group Với Các Link
Chúng ta có thể sử dụng cáclist-group-itemlàhyperlinkbao gồm một số thay đổi trong HTML.
Chỉ cần thay thế thẻlibằng thẻavà sử dụng các phần tửdivlà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 list group.
Ví dụ 1:trong ví dụ dưới đây chúng ta thêm các lớp icon và badge cho list group:
Xem ví dụ
Mẹo:Nếu muốn, bạn cũng có thể sử dụng list group 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.
Ngoài ra chúng ta có thể thêm các phần tử HTML khác chẳng hạn như heading [tiêu đề] và paragraph [đoạn văn bản] trong list group.
Ví dụ 2:trong ví dụ dưới đây minh họa cách thêm các phần tử heading và paragraph trong HTML:
Asteroid detected near earth
1 days agoPulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante.
Scientists found massive black hole
2 days agoVestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.
NASA launches solar probe
3 days agoLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.
Xem ví dụ
List Group Với Các Lớp Theo Ngữ Cảnh
Cũng giống như các thành phần khác, chúng ta có thể sử dụng các lớp theo ngữ cảnh trong list-group-item để nhấn mạnh thêm.
Ví dụ:trong ví dụ dưới đây chúng ta sử dụng các lớp theo ngữ cảnh cho List Group:
- A simple default list group item
- A simple primary list group item
- A simple secondary list group item
- A simple success list group item
- A simple danger list group item
- A simple warning list group item
- A simple info list group item
- A simple light list group item
- A simple dark list group item
Xem ví dụ
Tương tự, chúng ta có thể sử dụng các lớp theo ngữ cảnh cho list-group-item là link. Để chỉ định list-group-item đang hoạt động, chúng ta sử dụng lớp.active.
Tham khảo ví dụ dưới đây, trong ví dụ dưới đây chúng ta sử dụng các lớp theo ngữ cảnh cho list-group-item là link:
Xem ví dụ