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

Component Card Và Hình Ảnh Trong Bootstrap (Phần 4)


Ngày 29 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 card và hình ảnh trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Component Card

Component Card theo mình thấy được sử dụng khá phổ biến đặc biệt là trong miêu tả hình ảnh và thông tin sản phẩm. Nó sẽ được chia thành 3 phần là:

  • Header: dùng để tên sản phẩm, hình ảnh sản phẩm...
  • Body: nội dung miêu tả về sản phẩm...
  • Footer: dùng để đặt đường dẫn liên kết...

Để hiểu rõ hơn bạn hãy cùng mình gọi thử một component card bằng đoạn code sau đây nhé:

See the Pen Card Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để gọi component card thì mình tạo một thẻ div với class là card và trong thẻ div này sẽ chia tiếp thành 3 phần là header, body, footer bằng 3 thẻ div với class là card-header, card-body, card-footer. Nào để cho nó sống động hơn thì mình sẽ thêm nội dung cho card và chỉ sử dụng body cho nó thôi nhé. Để hiểu rõ hơn bạn hãy theo dõi đoạn code dưới đây:

See the Pen Card content by haycuoilennao19 (@haycuoilennao19) on CodePen.

  • Class bg-light dùng để thiết lập màu nền cho component card.
  • Để sử dụng hình ảnh trong component card chúng ta sẽ sử dụng class card-img-top để hình nằm trên cùng trong card ngoài ra chúng ta còn hai class nữa là card-img-bottom, card-img-overlay...
  • Class card-title dùng để bạn đặt tiêu đề cho sản phẩm.
  • Class card-text dùng để chứa nội dung miêu tả sản phẩm.

Ở đây mình cũng nói cho bạn về màu nền cơ bản mà Bootstrap cung cấp cho chúng ta sử dụng là:

class="bg-light"

class="bg-primary"

class="bg-success"

class="bg-info"

class="bg-warning"

class="bg-danger"

class="bg-secondary"

class="bg-dark"

Và để sử dùng màu có sẵn này cho chữ thì mình chỉ cần thay bg -> text trong class trên thì sẽ có màu tương ứng. Ví dụ bạn muốn màu primary thì chúng ta sẽ gọi class là text-primary. Để tìm hiểu thêm hãy xem ở đây nhé Màu trong Bootstrap

Để bạn hiểu rõ hơn hình ảnh thì mình sẽ tạo các cách hiển thị hình ảnh khác nhau trong component card với class card-img-bottom, card-img-overlay. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

See the Pen Card content by haycuoilennao19 (@haycuoilennao19) on CodePen.

Một chú ý nhỏ là với thẻ div sử dụng class card-img-overlay bạn sẽ thay thế cho thẻ div có class card-body thì nó mới hiển thị như trên nhé. Với các ví dụ trên mình sử dụng style="width:18rem" để xác định độ rộng cho component card, như vậy thì sẽ rất khó responsive cho những thiết bị màn hình khác nhau, do đó Bootstrap cung cấp cho chúng ta một class card-columns có chức năng giống như class col trong hệ thống lưới. Để nắm rõ hơn hãy xem ví dụ dưới đây nhé:

See the Pen card-columns by haycuoilennao19 (@haycuoilennao19) on CodePen.

Như trên thì mình sẽ gọi thẻ div với class card-columns sau đó bạn chỉ cần gọi các card mình muốn là được nhé. Để thấy sự thấy đổi trên các màn hình thì bạn nhấn trên screen codepen tuần tự là 1x, 0.5x, 0.25x. Nếu bạn chú ý thì tại sao card thứ 1 lại có nội dung nhiều hơn so với các nội dung khác?
Mục đích của mình là trong thực tế các nội dung của sản phẩm không giống nhau thì phải làm sao cho các card có độ rộng và độ cao bằng nhau. Thật ra Bootstrap cung cấp cho chúng ta một class gọi là card-deck để giải quyết vấn đề trên. Để hiểu rõ hơn hãy xem code ở dưới đây nhé:

See the Pen card-deck by haycuoilennao19 (@haycuoilennao19) on CodePen.

Các bạn phải nhấn screen trong codepen là 0.5x hay 0.25x mới thấy sự thay đổi nhé.

Xử lý hình ảnh trong Bootstrap

Phần này mình sẽ giới thiệu về những class hỗ trợ về xử lý hình ảnh cũng như video khi thêm vào trang web. Bootstrap cung cấp cho chúng ta một số kiểu hình ảnh như là thumbnail, làm tròn hoặc bo góc hình ảnh. Để hiểu rõ hơn các bạn xem đoạn code sau đây nhé:

See the Pen Image Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu muốn nhiều hiệu ứng hơn thì bạn có thể sử dụng thêm CSS để điều chỉnh nhé. Hình ảnh thước có kích thước cố định nên làm sao chúng ta có thể thiết lập những kích cỡ ảnh khác nhau cho từng màn hình thiết bị? Thực ra là bạn có thể sử dụng CSS thiết lập thuộc tính cho hình ảnh với width:100%; height:auto. Thì lúc này kích thước hình sẽ dựa vào độ rộng của trang mà điều chỉnh cho hợp lý. Boostrap cũng cung cấp cho bạn một class giải quyết vấn đề trên là img-fluid. Để hiểu rõ hơn hãy xem đoạn code dưới đây nhé:

See the Pen img-fluid Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để thấy sự thấy đổi trên các màn hình thì bạn nhấn trên screen codepen tuần tự là 1x, 0.5x, 0.25x. Bootstap còn cung cấp cho chúng ta chỉnh vị trí hình ảnh như chữ bằng cách sử dụng các class căn trái, căn phải, canh giữa: class="text-left", class="text-center", class=""text-right". Để hiểu rõ hơn mình cùng tìm hiểu qua ví dụ dưới đây nhé:

See the Pen image-align by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra thì bạn có thể sử dụng các thuộc tính khác để xác định vị trí hình ảnh trong thẻ div bằng cách sau đây:

See the Pen Other-position-image by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây mình sử dụng thuộc tính float-left và float-right để sử dụng căn trái và phải cho hình ảnh. Còn căn giữa thì mình sử dụng thuộc tính là mx-auto. Tùy vào những trường hợp mà bạn sử dụng những cách trên nhé. Sau này có thời gian mình sẽ đi sâu vào phần này hơn nói rõ về vị trí hình ảnh với chữ.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các nắm được component card và cách xử lý hình ảnh 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!