List Group trong Bootstrap, tác dụng và cách tạo

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

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:

list group trong bootstrap

Kết quả trả về có dạng như dưới đây:

list group trong bootstrap 2

2. List Group với các link

Chúng ta có thể sử dụng các list-group-itemhyperlink 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:

list group trong bootstrap 3

Kết quả trả về có dạng như dưới đây:

list group trong bootstrap 4

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:

list group trong bootstrap 5

Kết quả trả về có dạng như dưới đây:

list group trong bootstrap 6

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:

list group trong bootstrap 7

Kết quả trả về có dạng như dưới đây:

list group trong bootstrap 8

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:

list group trong bootstrap 9

Kết quả trả về có dạng như dưới đây:

list group trong bootstrap 10

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.

Tác giả: Ngọc Link     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Pagination trong Bootstrap, cách tạo và sử dụng
Học Bootstrap, khái niệm và cách sử dụng
Media Object trong Bootstrap, khái niệm và cách sử dụng
Cách tạo và sử dụng Button Group trong Bootstrap
Number trong C++
Từ khoá liên quan:

List Group trong Bootstrap

, tạo List Group trong Bootstrap, Bootstrap,

SOFT LIÊN QUAN
  • Lập trình C++

    Giáo trình lập trình C++

    Lập trình C++ là tài liệu hướng dẫn học lập trình C++ - ngôn ngữ lập trình hướng đối tượng mở rộng từ ngôn ngữ C, cung cấp đến bạn các kiến thức về cách thức và tư duy lập trình. Đây là tài liệu rất hữu ích cho những ai ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá