Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Component Table Và List Trong Bootstrap (Phần 5)

Component Table Và List Trong Bootstrap (Phần 5)


Ngày 30 Tháng 3 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component table và list trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Component Table

Bảng(Table) được tạo thành bằng cách sắp xếp dữ liệu theo hàng và cột giúp chúng ta tra cứu giá trị một cách nhanh chóng, so sánh giá trị của nhiều dạng dữ liệu khác nhau, giúp người dùng có cái nhìn trực quan và dễ hiểu hơn. Trong Bootstrap có cung cấp cho bạn một class table giúp làm giao diện bảng đẹp và rõ ràng hơn. Để hiểu rõ hơn các bạn hãy cùng mình xem đoạn code dưới đây nhé:

Ví dụ về bảng Bootstrap:

See the Pen Table bootstrap example by haycuoilennao19 (@haycuoilennao19) on CodePen.

Như bạn thấy là cấu trúc hoàn toàn giống với một bảng HTML bình thường (nếu các bạn cần xem lại bảng trong HTML thì nhấn vào đây nhé Bảng HTML). Và chúng ta chỉ cần đặt class table trong thẻ table là có thể gọi ra component table trong bootstrap. Ngoài ra sẽ có một vài class giúp bạn dễ dàng tinh chỉnh component table này hợp với ý mình hơn.

Đầu tiên là class table-bordered có tác dùng là tạo đường viền giữa các ô trong bảng. Để hiểu rõ hơn các bạn xem đoạn code sau đây nhé:

Class table-bordered:

See the Pen table-bordered Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thứ hai là khi người dùng xem bảng của bạn thì sẽ rất khó đọc nếu nó có quá nhiều dòng vì vậy Bootstrap cung cấp một class table-striped làm cho màu nền của hai dòng kế tiếp nhau sẽ có màu hơi khác nhau một tí. Để hiểu rõ hơn các bạn xem ví dụ sau đây nhé:

Class table-striped:

See the Pen table-striped bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn không muốn chia màu như class table-striped như trên thì Bootstrap cung cấp cho chúng ta một class tên là table-hover giúp người dùng khi hover(di chuyển chuột lên) dòng nào trong bảng thì nó sẽ có màu khác so với các dòng còn lại. Để hiểu rõ hơn các bạn xem ví dụ dưới đây nhé:

Class table-hover:

See the Pen table-hover bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nhìn các bảng ở trên hơi đơn điệu nhỉ, giờ hãy cùng mình sử dụng các class màu của Bootstrap để tạo màu nền cho các dòng trong bảng bằng cách sử dụng class table-(color). Color ở đây có thể là primary, success... và chúng ta gắn với các thẻ tr (dòng) mà mình muốn nhé ví dụ <tr class="table-primary">. Nếu các bạn chưa nắm màu trong Bootstrap thì có thể xem ở đây nhé Màu Bootstrap.

Class table-(color):

See the Pen background-row Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bootstrap cũng cung cấp màu chữ và màu nền cho thẻ thead bằng cách gọi thead-dark cho màu tối và thead-light cho màu sáng. Để hiểu rõ hơn hãy xem ví dụ của mình sau đây nhé:

Class thead-dark và thead-light:

See the Pen thead-dark vs thead-light by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bạn có thể sử dụng trang trí cho bảng như hai màu trên bằng cách đổi như sau table-dark và table-light nhé. Điều cuối cùng mình muốn giới thiệu về component này là nếu bạn muốn các chữ trong cột không bị rớt dòng ở những màn hình nhỏ thì ta có thể sử dung class table-responsive để tạo thanh cuộn ngang khi độ rộng của bảng lớn hơn màn hình hiển thị trang web. Ngoài ra bạn có thể dùng table-responsive-sm, table-responsive-md, table-responsive-lg, table-responsive-xl cho từng màn hình mà mình muốn. Để hiểu rõ hơn hãy xem ví dụ mình dưới đây nhé:

Class table-responsive:

See the Pen table-responsive bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Component List:

Như bạn đã biết thì danh sách (list) thường được cấu tạo từ thẻ ul, ol, dl, Bootstrap cung cấp cho chúng ta một số class để làm việc với thẻ này. Để hiểu rõ hơn mình hãy đi vào cụ thể nhé.

Đầu tiên là nhiều khi bạn muốn loại bỏ kiểu(style) mặc định cho các thẻ danh sách ol, ul thì ta có thể sử dụng class list-unstyled. Để hiểu rõ hơn hãy cùng xem ví dụ nhé:

Class list-unstyled:

See the Pen list-unstyled bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Mình có một lưu ý nhỏ là khi bạn sử dụng class list-unstyled cho thẻ danh sách nào thì nó mới chịu ảnh hưởng nha ví dụ ở đây thẻ cha mình thiết lập class này nhưng thẻ danh sách con ở Sản Phẩm sẽ không bị ảnh hưởng nhé.

Bạn để ý là với thẻ danh sách ul, ol thì các phần tử con sẽ theo chiều dọc từ trên xuống vậy để nằm ngang thì Bootstrap cung cấp cho ta một class là list-inline. Cái này mình để ý hay được sử dụng trong navbar(nơi chứa các đường dẫn nằm ở đầu trang). Để hiểu rõ hơn hãy xem đoạn code dưới đây nhé:

Class list-inline:

See the Pen list-inline Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây ngoài bạn đặt class list-inline cho thẻ ul thì mình cũng phải đặt class list-inline-item cho thẻ li thì nó mới hoạt động nhé.

Ngoài thẻ ul, ol thì chúng ta còn một thẻ danh sách ít được sử dụng đó là thẻ dl. Nếu các bạn muốn xem lại hay tìm hiểu thêm về thẻ này thì xem ở đây nha Thẻ dl. Ở đây Bootstrap giúp chúng ta xác định danh sách theo hướng ngang như ví dụ trên cho thẻ dl. Nào cùng mình xem ví dụ nhé:

Thẻ DL:

See the Pen Thẻ DL nằm ngang by haycuoilennao19 (@haycuoilennao19) on CodePen.

Như ta thấy thì nó sẽ chia theo dòng cho thẻ dl và cột cho thẻ dt. Còn nếu muốn bình thường thì bạn bỏ các class dòng và cộ trong Bootstrap là được nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các nắm được component table(bảng) và list(danh sách) trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!