Trong bài học này, chúng ta sẽ tìm hiểu về các kiểu tạo phong cách cho Hình ảnh trong Bootstrap 4.

Các kiểu hiển thị hình ảnh trong Bootstrap 4

Bootstrap bo góc hình ảnh

Để bo góc hình ảnh, chúng ta sử dụng lớp .rounded (tuy nhiên trình duyệt IE8 không hỗ trợ lớp này).

Hình ảnh trong Bootstrap 4

Bootstrap bo tròn hình ảnh

Khi sử dụng lớp .rounded-circle, hình ảnh sẽ hiển thị theo kiểu bo tròn (tuy nhiên trình duyệt IE8 không hỗ trợ lớp này).

Hình ảnh trong Bootstrap 4

Bootstrap hiển thị hình ảnh thumbnail

Để tạo hình ảnh thumbnail với viền ở ngoài, chúng ta sử dụng lớp .img-thumbnail.

Hình ảnh trong Bootstrap 4

Căn chỉnh vị trí hình ảnh

Trong Bootstrap 4, khi chúng ta sử dụng lớp .float-left, hình ảnh sẽ tự động đẩy về bên trái. Ngược lại, với lớp .float-right , hình ảnh sẽ tự động đẩy về bên phải.

Hình ảnh trong Bootstrap 4

Để căn giữa hình ảnh, Bootstrap 4 hỗ trợ các lớp hữu dụng để làm việc này: .mx-auto (margin: auto) và .d-block (display: block).

Hình ảnh trong Bootstrap 4

Hình ảnh đáp ứng

Hình ảnh có nhiều kích cỡ, cũng giống như màn hình vậy. Hình ảnh đáp ứng sẽ tự động điều chỉnh để phù hợp với kích thước của màn hình. Tạo hình ảnh đáp ứng bằng lớp .img-fluid trong thẻ <img>. Hình ảnh sẽ chia đúng tỷ lệ theo lớp cha của nó. Mặc định, lớp .img-fluid cung cấp max-width: 100% height: auto.

Dịch từ: https://www.w3schools.com/bootstrap4/bootstrap_images.asp

Đăng ký nhận bộ tài liệu học Java trên 2 trang giấy tại đây

Xem thêm: Java Coding Bootcamp là gì? Tổng quan về Java Coding Bootcamp


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.