Trong bài học dưới đây Taimienphi.vn sẽ giới thiệu cho bạn về cách tạo List Group trong Bootstrap, ngoài ra bạn đọc có thể tham khảo thêm một số bài học Bootstrap khác trên Taimienphi.vn để tìm hiểu cách tạo danh sách bằng Bootstrap như thế nào nhé.
Để tìm hiểu cách tạo List Group trong Bootstrap như thế nào, bạn đọc cùng tham khảo tiếp bài học Bootstrap dưới đây của Taimienphi.vn.
List Group trong Bootstrap
1. 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:
Kết quả trả về có dạng như dưới đây:
2. List Group với các link
Chúng ta có thể sử dụng các list-group-item là hyperlink bao gồm 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 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:
Kết quả trả về có dạng như dưới đây:
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:
Kết quả trả về có dạng như dưới đây:
3. 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:
Kết quả trả về có dạng như dưới đây:
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:
Kết quả trả về có dạng như dưới đây:
https://thuthuat.taimienphi.vn/list-group-trong-bootstrap-51109n.aspx
Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn về List Group trong Bootstrap. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn cách tạo form trong Bootstrap.