Văn bản hình ảnh bootstrap 4

Nếu bạn chưa tích hợp Bootstrap vào dự án của mình, vui lòng đọc cách sử dụng Bootstrap Framework trong Hướng dẫn HTML & CSS

Cách dễ nhất để đưa hình ảnh vào trang web như sau

Chèn hình ảnh

Hình ảnh phản hồi

Khi một trang web được hiển thị trên các màn hình khác nhau, bạn sẽ phải thu nhỏ hình ảnh trên các màn hình nhỏ hơn

Bootstrap cung cấp lớp CSS

6 sẽ tự động điều chỉnh hình ảnh để phù hợp với kích thước vùng chứa (đọc về hình ảnh phản hồi trong tài liệu Bootstrap)

Chèn một hình ảnh đáp ứng

Kích thước hình ảnh

Mặc dù, bạn có thể thu nhỏ hoặc phóng to hình ảnh bằng quy tắc CSS như

7, đây thường không phải là điều bạn muốn. Bạn phải luôn cố gắng tối ưu hóa kích thước tải xuống của trang web của mình. Nếu bạn cho người dùng tải xuống một hình ảnh rộng 400px và hiển thị ở 200px thì có thể rất lãng phí băng thông

Chuyển đổi độ phân giải

Nếu bạn muốn tối ưu hóa hơn nữa, bạn có thể cung cấp hình ảnh nhỏ cho màn hình nhỏ trong khi phân phát hình ảnh lớn cho màn hình lớn. Điều này được gọi là chuyển đổi độ phân giải cho hình ảnh phản hồi. Trong bài viết này về hình ảnh phản hồi, bạn có thể tìm hiểu cách thực hiện việc này bằng cách sử dụng thuộc tính

0

Căn chỉnh hình ảnh

Đồng thời xem Căn chỉnh hình ảnh trong tài liệu Bootstrap chính thức

Trung tâm

Với lớp CSS

1, bạn có thể căn giữa hình ảnh trong Bootstrap. Hình ảnh là các yếu tố nội tuyến theo mặc định. Chúng chỉ có thể được căn giữa nếu chúng ta biến nó thành một phần tử khối bằng cách thêm lớp

2

Căn giữa một hình ảnh

Ghi chú. Lớp

1 cũng có thể được sử dụng để căn giữa bất kỳ phần tử HTML nào. Nhưng đối với văn bản và các thành phần nội tuyến khác, bạn nên sử dụng

4 thay thế (xem định tâm theo chiều ngang và căn chỉnh văn bản)

Căn trái và phải

Hình ảnh có thể được căn chỉnh sang trái hoặc sang phải. Văn bản sau đó sẽ chảy xung quanh hình ảnh. Để làm điều này, chúng tôi sử dụng cái gọi là số float (đọc về số float trong tài liệu Bootstrap)

Di chuyển sang trái

________số 8

Di chuyển sang phải

Dòng mới sau khi nổi (Clearfix)

Khi nổi sang trái hoặc phải, tất cả các yếu tố sau được hiển thị bên cạnh hình ảnh. Nếu bạn muốn bắt đầu trên một dòng mới, bạn phải sử dụng lớp

5. Lớp này thường được thêm vào phần tử cha

6 (thêm thông tin về Clearfix trong tài liệu Bootstrap)

2

Lề xung quanh hình ảnh

Thông thường, bạn sẽ muốn có một số lề giữa hình ảnh và văn bản hoặc nội dung khác. Một cách đơn giản để thực hiện việc này là sử dụng Bootstrap Spacing Classes như

7. Nhưng bạn cũng có thể định nghĩa

8 trong CSS của mình

HTML cho Gap Right

5

hình ảnh hình dạng

Bootstrap cung cấp cách cho một số kiểu hình ảnh đơn giản. Bạn có thể bo tròn các góc, cắt hình tròn hoặc thêm khung tinh tế

---

Tìm hiểu cách đặt văn bản trên một hình ảnh

---

Văn bản hình ảnh

Tự mình thử »

---

Cách đặt văn bản trong hình ảnh

Bước 1) Thêm HTML

Thí dụ

 

 

Dưới cùng bên trái

 

Trên cùng bên trái

 

Trên cùng bên phải

 

Góc phải ở phía dưới

 

căn giữa

---

Bước 2) Thêm CSS

Thí dụ

/* Vùng chứa chứa hình ảnh và văn bản */
. vùng chứa {
  vị trí. tương đối;
  căn chỉnh văn bản. trung tâm;
  màu. trắng;
}

/* Văn bản dưới cùng bên trái */
. vị trí {
dưới cùng bên trái. tuyệt đối;
  dưới cùng. 8px;
  trái. 16px;
}

/* Văn bản trên cùng bên trái */
. trên cùng bên trái {
  vị trí. tuyệt đối;
  trên cùng. 8px;
  trái. 16px;
}

/* Văn bản trên cùng bên phải */
. vị trí {
trên cùng bên phải. tuyệt đối;
  trên cùng. 8px;
  phải. 16px;
}

/* Văn bản dưới cùng bên phải */
. {
  vị trí dưới cùng bên phải. tuyệt đối;
  dưới cùng. 8px;
  phải. 16px;
}

/* Văn bản được căn giữa */
. vị trí {
  chính giữa. tuyệt đối;
  trên cùng. 50%;
  còn lại. 50%;
  biến đổi. dịch(-50%, -50%);
}

Tự mình thử »

Để tìm hiểu thêm về cách tạo kiểu cho hình ảnh, hãy đọc hướng dẫn về Hình ảnh CSS của chúng tôi

Để tìm hiểu thêm về định vị CSS, hãy đọc hướng dẫn Vị trí CSS của bạn

Làm cách nào để văn bản trên hình ảnh trong Bootstrap 4?

Làm cách nào để đặt văn bản trên hình ảnh Bootstrap?

Làm cách nào để căn chỉnh văn bản với hình ảnh trong Bootstrap?

Làm cách nào để thêm chú thích vào hình ảnh trong Bootstrap?