Hình ảnh trong Bootstrap, cấu trúc và cách sử dụng

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.

hinh anh trong bootstrap

Hình ảnh trong Bootstrap sử dụng như thế nào?

 

Mục Lục bài viết:
1. Định dạng hình ảnh trong Bootstrap
2. Tạo hình ảnh đáp ứng và video trong Bootstrap
3. Căn chỉnh hình ảnh trong Bootstrap

 

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:

hinh anh trong bootstrap

Kết quả đầu ra có dạng như dưới đây:

hinh anh trong bootstrap 2

 

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%;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:

hinh anh trong bootstrap 3

Kết quả đầu ra có dạng như dưới đây:

hinh anh trong bootstrap 4

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:

hinh anh trong bootstrap 5

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 .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:

hinh anh trong bootstrap 6

Kết quả đầu ra có dạng như dưới đây:

hinh anh trong bootstrap 7

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.

Tác giả: Trần Thuỳ     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Number trong C++
Jumbotron trong Bootstrap, hiển thị nội dung trên web
Enum trong C# là gì? Cú pháp và cách khởi tạo
Typography trong Bootstrap, khái niệm và cách sử dụng
Tạo danh sách bằng Bootstrap như thế nào?
Từ khoá liên quan:

Hình ảnh trong Bootstrap

, Bootstrap, học Bootstrap,

SOFT LIÊN QUAN
  • Lập trình C++

    Giáo trình lập trình C++

    Lập trình C++ là tài liệu hướng dẫn học lập trình C++ - ngôn ngữ lập trình hướng đối tượng mở rộng từ ngôn ngữ C, cung cấp đến bạn các kiến thức về cách thức và tư duy lập trình. Đây là tài liệu rất hữu ích cho những ai ...

Tin Mới