Trong bài học Bootstrap dưới đây Taimienphi.vn sẽ giới thiệu cho bạn về hình ảnh trong Bootstrap, cách định dạng hình ảnh và cách tạo hình ảnh đáp ứng (responsive image) và video trong Bootstrap.
Bài học dưới đây Taimienphi.vn sẽ giới thiệu cho bạn về hình ảnh trong Bootstrap. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học Bootstrap đã có trên Taimienphi.vn để tìm hiểu thêm về Button Group trong Bootstrap.
Hình ảnh trong Bootstrap sử dụng như thế nào?
1. Định dạng hình ảnh trong Bootstrap
Hình ảnh là yếu tố không thể thiếu trong thiết kế web hiện đại. Vì vậy việc định dạng và chọn vị trí hình ảnh hiển thị trên các trang web là khâu cực kỳ quan trọng, để cải thiện trải nghiệm người dùng.
Bằng cách sử dụng các lớp được tích hợp sẵn trong Bootstrap, chúng ta có thể dễ dàng định dạng hình ảnh theo các kiểu dáng khác nhau, chẳng hạn như tạo hình ảnh với 4 góc bo tròn, ....
Ví dụ: ví dụ dưới đây minh họa cách định dạng hình ảnh trong Bootstrap theo các kiểu dáng khác nhau:
Kết quả đầu ra có dạng như dưới đây:
2. Tạo hình ảnh đáp ứng và video trong Bootstrap
Trong Bootstrap, chúng ta có thể tạo các hình ảnh đáp ứng bằng cách thêm lớp .img-fluid vào thẻ img. Lớp này áp dụng style max-width: 100%; và height: auto; cho hình ảnh để chia tỷ lệ cho phù hợp với phần tử chứa, trong trường hợp nếu chiều rộng của hình ảnh lớn hơn phần tử chứa.
Ví dụ: ví dụ dưới đây minh họa cách tạo hình ảnh đáp ứng và video trong Bootstrap:
Kết quả đầu ra có dạng như dưới đây:
Lưu ý: Khi tạo bố cục trang web responsive đừng quên tạo hình ảnh đáp ứng, nếu không chiều rộng hình ảnh có thể lớn hình chiều rộng của phần tử cha, khi đó hình ảnh sẽ bị tràn và phá vỡ bố cục trang web.
Ngoài ra chúng ta cũng có thể tạo video hoặc slide trình chiếu được nhúng trong trang web đáp ứng mà không ảnh hưởng đến tỷ lệ khung hình gốc. Để làm được điều này chúng ta chỉ cần gói phần nhúng bất kỳ chẳng hạn như iframe hoặc video trong phần tử div và áp dụng lớp .embed-responsive và lớp tỷ lệ khung hình như .embed-responsive-16by9.
Thậm chí là áp dụng lớp con .embed-responsive-item trên phần tử nhúng để phù hợp với định dạng các thuộc tính khác như trong ví dụ dưới đây:
Trong ví dụ trên chúng ta tạo 4 video đáp ứng với 4 tỷ lệ khung hình khác nhau (21:9, 16:9, 4:3 và 1:1) bằng cách sử dụng các lớp .embed-responsive-21by9, .embed-responsive-16by9, .embed-responsive-4by3 và lớp .embed-responsive-1by1.
Mẹo: Tỷ lệ khung hình của hình ảnh mô tả mối quan hệ giữa tỷ lệ giữa chiều rộng và chiều cao. Hai tỷ lệ khung hình quay video phổ biến nhất là 16:9 và 4:3.
3. Căn chỉnh hình ảnh trong Bootstrap
Để căn chỉnh hình ảnh sang trái hoặc phải, chúng ta sử dụng các lớp .pull-left hoặc lớp .pull-right. Hoặc sử dụng các lớp căn chỉnh text như .text-left, .text-right và .text-center trên các phần tử chứa phần tử cha để căn chỉnh hình ảnh nội tuyến sang trái, phải hoặc chính giữa.
Để căn giữa hình ảnh dạng khối, chúng ta sử dụng lớp tiện ích căn lề .mx-auto.
Ví dụ: Trong ví dụ dưới đây minh họa cách căn chỉnh hình ảnh trong Bootstrap:
Kết quả đầu ra có dạng như dưới đây:
https://thuthuat.taimienphi.vn/hinh-anh-trong-bootstrap-51116n.aspx
Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn về hình ảnh trong Bootstrap. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Card trong Bootstrap.