List Group trong Bootstrap 4

25-06-2020 13:39:44
by: baobinhnet

Chào các bạn, trong bài học này, chúng ta cùng đến với các class list-group của bootstrap 4. Đây là nhóm class hỗ trợ xây dựng list danh sách nhanh, gọn, dễ sử dụng và không cần sử dụng đến ul li bạn vẫn có thể xây dựng lên một list danh sách. Bây giờ thì chúng ta cùng đến với bài học nhé.

List Group

Mục đích của Bootstrap khi tạo ra List Group là để hiển thị 1 nội dung dưới dạng danh sách. Thực tế, chỉ với HTML thì bạn cũng có thể tạo ra 1 danh sách bằng cách sử dụng các thẻ danh sách ul li nhưng sẽ phức tạp hơn việc sử dụng Bootstrap. Bootstrap cung cấp các class .list-group và .list-group-item như 1 tiêu chuẩn để tạo ra các danh sách phức tạp hơn HTML thông thường.

.list-group & .list-group-item

Sử dụng class .list-group áp dụng cho thẻ <ul> và class .list-group-item áp dụng cho thẻ <li>, như sau:

See the Pen <a href="https://codepen.io/longfullstack/pen/bGERrOw">Bootstrap 4 List group</a> by longfullstack (<a href="https://codepen.io/longfullstack">@longfullstack</a>) on <a href="https://codepen.io">CodePen</a>.

Ngoài ra, với 2 class này các bạn có thể tạo ra 1 danh sách mà không cần phải sử dụng cặp thẻ danh sách ul li, như sau:

See the Pen <a href="https://codepen.io/longfullstack/pen/gOPRxEa">Bootstrap 4 List group with div</a> by longfullstack (<a href="https://codepen.io/longfullstack">@longfullstack</a>) on <a href="https://codepen.io">CodePen</a>.

List Group kết hợp với Link

Sau đây là ví dụ đơn giản với các list group là các link:

See the Pen <a href="https://codepen.io/longfullstack/pen/WNrOEWp">Bootstrap 4 List group link</a> by longfullstack (<a href="https://codepen.io/longfullstack">@longfullstack</a>) on <a href="https://codepen.io">CodePen</a>.

List Group kết hợp với Color

Có một vài lớp bổ xung cho để sử dụng cùng với .list-group-item giúp bạn thiết lập màu nền hoặc màu chữ cho list-group-item, nó nên được sử dụng với các ngữ cảnh khác nhau trong ứng dụng.

.list-group-item-primary
.list-group-item-secondary
.list-group-item-success
.list-group-item-danger
.list-group-item-warning
.list-group-item-info
.list-group-item-light
.list-group-item-dark
.list-group-item-muted
.list-group-item-white

See the Pen <a href="https://codepen.io/longfullstack/pen/RwrgZmN">Bootstrap 4 list group color</a> by longfullstack (<a href="https://codepen.io/longfullstack">@longfullstack</a>) on <a href="https://codepen.io">CodePen</a>.

Tùy biến List Group

Bạn có thể tạo một List Group tùy biến, trong đó các List-group-item có nội dung HTML, hãy nhớ rằng Bootstrap hỗ trợ 2 lớp .list-group-item-heading & .list-group-item-text, chúng có ích trong trường hợp này.

Ví dụ:

See the Pen <a href="https://codepen.io/longfullstack/pen/OJMgjeX">Bootstrap list group with text content</a> by longfullstack (<a href="https://codepen.io/longfullstack">@longfullstack</a>) on <a href="https://codepen.io">CodePen</a>.

Kết luận

Như vậy các bạn đã được làm quen với các class List Group trong Bootstrap 4 cũng như các ví dụ code sử dụng đến list group. Rất mong các bạn sẽ ứng dụng được nhiều trong thực tế. Hẹn các bạn trong bài tới, chúc các bạn học tốt.

Xem thêm: bootstrap bootstrap 4 list group bootstrap list group bootstrap 4

Posted by baobinhnet
2020-06-25 13:39:44

Danh Mục Lập Trình

Baobinh.net

Học Bootstrap 4