Không có nhà thiết kế trang web tự tôn trọng,
hôm nay sẽ thiết kế các trang web mà không bao gồm
một số hình thức của hình ảnh hoặc phương tiện truyền thông trên trang web của họ. Các
giáo sư khoa học máy tính là một ngoại lệ.
Ở giai đoạn này, có lẽ bạn đang mong đợi tôi nói điều này,
nhưng đó không phải là điều tôi sẽ nói.
Tôi sẽ nói rằng,
“Một bức ảnh có giá trị $12 trên IstockPhoto.com.
Bootstrap cung cấp hỗ trợ rộng rãi cho việc bao gồm
hình ảnh và các loại phương tiện khác nhau trong các trang web của bạn và các trang web của bạn.
Thẻ HTML hình ảnh rõ ràng là sẽ được sử dụng để bao gồm hình ảnh trong các trang web của bạn.
Bootstrap cũng cung cấp một loạt các lớp học mà bạn có thể áp dụng cho
thẻ hình ảnh để tăng cường hơn nữa cách hình ảnh được bao gồm trong trang web của bạn.
Vì vậy, bạn có thể sử dụng một lớp hình ảnh gọi là img-fluid mà sẽ làm cho hình ảnh của bạn đáp ứng,
có nghĩa là kích thước của hình ảnh sẽ tự động điều chỉnh theo kích thước màn hình khác nhau.
Bạn cũng có thể sử dụng một hình thu nhỏ img-thumbnail mà sẽ đặt một đường viền màu trắng xung quanh hình ảnh của bạn.
Bạn cũng có thể đối phó với các hình dạng và kích thước của hình ảnh như bạn
thấy trong bức ảnh này ở đây để bạn có thể có hình ảnh mà bạn tạo ra các góc tròn,
hoặc tất cả bốn góc,
hoặc bất kỳ cặp góc nào được chọn.
Vì vậy, bạn có thể áp dụng các lớp xung quanh nó để
tạo ra một hình ảnh với góc tròn hoặc bạn có thể nhìn thấy
một dấu nối tròn trên cùng bên trái hoặc bên phải để đặt
các góc tròn trong bất kỳ một trong bốn cạnh của hình ảnh của bạn.
Bạn cũng có thể áp dụng vòng tròn tròn để tạo hình ảnh tròn.
Vì vậy, khi bạn truy cập các trang web,
bạn sẽ thấy hình ảnh đang được sử dụng theo nhiều cách này.
Bạn sẽ nhớ rằng chúng tôi đã thấy lớp Thẻ trong bài học trước và bài tập.
Ở đây, tôi minh họa việc sử dụng lớp Card với một hình ảnh được bao gồm.
Vì vậy, trong trường hợp này, chúng tôi bao gồm một hình ảnh với hình ảnh lớp thẻ đầu và nếu bạn
bao gồm kích thước đủ lớn hình ảnh mà hình ảnh sẽ được bao gồm
ở trên cùng và sau đó kèm theo bên trong một thẻ như thế này.
Nếu hình ảnh quá nhỏ,
sau đó nó có thể được đặt ở một góc trong thẻ của bạn.
Vì vậy, sử dụng một hình ảnh đủ lớn để có thể xác định một thẻ sạch như thế này.
Vì vậy, ở đây bạn sẽ thấy hình ảnh được mô tả với,
các lớp học được áp dụng cho đó bao gồm hình ảnh thẻ đầu
và img-fluid để làm cho hình ảnh đáp ứng tự động.
Vì vậy, đây là cách bạn có thể sử dụng các hình ảnh với lớp thẻ
để xác định thẻ mà bạn sử dụng trên các trang web của bạn.
Một cách khác để bao gồm hình ảnh và nội dung liên quan trong các trang web của bạn là một đối tượng phương tiện.
Một đối tượng phương tiện cho phép bạn chỉ định một hình ảnh mà bạn có thể
định vị ở bên trái hoặc bên phải của mô tả.
Ngoài ra, bạn có thể bao gồm một cơ quan phương tiện có
chứa mô tả đi cùng với hình ảnh.
Vì vậy, như bạn thấy trong ví dụ này ở đây,
cơ thể phương tiện truyền thông chính nó bao gồm bất kỳ nội dung định dạng HTML ở đây.
Vì vậy, ở đây tôi đang sử dụng một h2 và h4 cùng với
một lớp p bên trong cơ thể phương tiện truyền thông để xác định nội dung thực tế.
Chúng tôi sẽ sử dụng đối tượng phương tiện truyền thông trong bài tập sau.
Bạn cũng có thể thực hiện một nhúng phản hồi của nội dung.
Vì vậy, ví dụ, nếu bạn có một video mà bạn muốn kèm theo trong trang web của bạn,
sau đó bạn có thể sử dụng một lớp iframe để khung video,
và sau đó kèm theo nó bên trong div với các lớp học
nhúng đáp ứng cho kích thước
để bạn có thể 16by9, 4by3 hoặc video, nội dung được hiển thị.
Vì vậy, đáp ứng nhúng, bạn có thể sử dụng các
thẻ HTML nhúng hoặc iframe hoặc video hoặc đối tượng và sau đó kèm theo nó bên trong một div.
Áp dụng tính năng đáp ứng nhúng và cũng cùng với tính năng đáp ứng nhúng,
xác định kích thước mà bạn muốn sử dụng cho kích thước 4by3 hoặc 16by9.
Vì vậy, đây là cách bạn cũng có thể kèm theo nội dung video trong các trang web của bạn.
Bây giờ, chúng ta đã thấy sự hỗ trợ cho hình ảnh và phương tiện truyền thông,
đó là thời gian để đi vào một bài tập nơi chúng ta sẽ xem xét làm thế nào chúng ta có thể bao gồm
hình ảnh trong trang web hoặc trang web mà chúng tôi đã làm việc trên.
Chúng tôi sẽ thực hiện một số thay đổi đối với trang index.html bằng cách
bao gồm một số hình ảnh và nội dung bằng cách sử dụng đối tượng phương tiện.