1
00:00:03,250 --> 00:00:07,080
Không có nhà thiết kế trang web tự tôn trọng,

2
00:00:07,080 --> 00:00:10,990
hôm nay sẽ thiết kế các trang web mà không bao gồm

3
00:00:10,990 --> 00:00:15,665
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

4
00:00:15,665 --> 00:00:19,055
giáo sư khoa học máy tính là một ngoại lệ.

5
00:00:19,055 --> 00:00:23,390
Ở giai đoạn này, có lẽ bạn đang mong đợi tôi nói điều này,

6
00:00:23,390 --> 00:00:26,270
nhưng đó không phải là điều tôi sẽ nói.

7
00:00:26,270 --> 00:00:29,255
Tôi sẽ nói rằng,

8
00:00:29,255 --> 00:00:33,425
“Một bức ảnh có giá trị $12 trên IstockPhoto.com.

9
00:00:33,425 --> 00:00:38,060
Bootstrap cung cấp hỗ trợ rộng rãi cho việc bao gồm

10
00:00:38,060 --> 00:00:42,800
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.

11
00:00:42,800 --> 00:00:49,040
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.

12
00:00:49,040 --> 00:00:55,170
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

13
00:00:55,170 --> 00:01:02,215
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.

14
00:01:02,215 --> 00:01:08,535
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,

15
00:01:08,535 --> 00:01:15,195
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.

16
00:01:15,195 --> 00:01:22,585
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.

17
00:01:22,585 --> 00:01:29,480
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

18
00:01:29,480 --> 00:01:36,635
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,

19
00:01:36,635 --> 00:01:38,995
hoặc tất cả bốn góc,

20
00:01:38,995 --> 00:01:42,020
hoặc bất kỳ cặp góc nào được chọn.

21
00:01:42,020 --> 00:01:45,595
Vì vậy, bạn có thể áp dụng các lớp xung quanh nó để

22
00:01:45,595 --> 00:01:49,450
tạo ra một hình ảnh với góc tròn hoặc bạn có thể nhìn thấy

23
00:01:49,450 --> 00:01:53,130
một dấu nối tròn trên cùng bên trái hoặc bên phải để đặt

24
00:01:53,130 --> 00:01:57,905
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.

25
00:01:57,905 --> 00:02:02,780
Bạn cũng có thể áp dụng vòng tròn tròn để tạo hình ảnh tròn.

26
00:02:02,780 --> 00:02:05,170
Vì vậy, khi bạn truy cập các trang web,

27
00:02:05,170 --> 00:02:10,310
bạn sẽ thấy hình ảnh đang được sử dụng theo nhiều cách này.

28
00:02:10,310 --> 00:02:16,000
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.

29
00:02:16,000 --> 00:02:21,085
Ở đâ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.

30
00:02:21,085 --> 00:02:27,320
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

31
00:02:27,320 --> 00:02:30,760
bao gồm kích thước đủ lớn hình ảnh mà hình ảnh sẽ được bao gồm

32
00:02:30,760 --> 00:02:35,030
ở trên cùng và sau đó kèm theo bên trong một thẻ như thế này.

33
00:02:35,030 --> 00:02:36,860
Nếu hình ảnh quá nhỏ,

34
00:02:36,860 --> 00:02:41,245
sau đó nó có thể được đặt ở một góc trong thẻ của bạn.

35
00:02:41,245 --> 00:02:47,315
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.

36
00:02:47,315 --> 00:02:52,030
Vì vậy, ở đây bạn sẽ thấy hình ảnh được mô tả với,

37
00:02:52,030 --> 00:02:56,035
các lớp học được áp dụng cho đó bao gồm hình ảnh thẻ đầu

38
00:02:56,035 --> 00:03:00,510
và img-fluid để làm cho hình ảnh đáp ứng tự động.

39
00:03:00,510 --> 00:03:04,470
Vì vậy, đây là cách bạn có thể sử dụng các hình ảnh với lớp thẻ

40
00:03:04,470 --> 00:03:08,525
để xác định thẻ mà bạn sử dụng trên các trang web của bạn.

41
00:03:08,525 --> 00:03:16,605
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.

42
00:03:16,605 --> 00:03:20,740
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ể

43
00:03:20,740 --> 00:03:26,225
định vị ở bên trái hoặc bên phải của mô tả.

44
00:03:26,225 --> 00:03:29,690
Ngoài ra, bạn có thể bao gồm một cơ quan phương tiện có

45
00:03:29,690 --> 00:03:32,880
chứa mô tả đi cùng với hình ảnh.

46
00:03:32,880 --> 00:03:35,110
Vì vậy, như bạn thấy trong ví dụ này ở đây,

47
00:03:35,110 --> 00:03:41,270
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.

48
00:03:41,270 --> 00:03:44,820
Vì vậy, ở đây tôi đang sử dụng một h2 và h4 cùng với

49
00:03:44,820 --> 00:03:49,755
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ế.

50
00:03:49,755 --> 00:03:54,240
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.

51
00:03:54,240 --> 00:03:57,670
Bạn cũng có thể thực hiện một nhúng phản hồi của nội dung.

52
00:03:57,670 --> 00:04:03,360
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,

53
00:04:03,360 --> 00:04:07,690
sau đó bạn có thể sử dụng một lớp iframe để khung video,

54
00:04:07,690 --> 00:04:10,760
và sau đó kèm theo nó bên trong div với các lớp học

55
00:04:10,760 --> 00:04:16,410
nhúng đáp ứng cho kích thước

56
00:04:16,410 --> 00:04:21,020
để bạn có thể 16by9, 4by3 hoặc video, nội dung được hiển thị.

57
00:04:21,020 --> 00:04:27,630
Vì vậy, đáp ứng nhúng, bạn có thể sử dụng các

58
00:04:27,630 --> 00:04:34,450
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.

59
00:04:34,450 --> 00:04:41,345
Á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,

60
00:04:41,345 --> 00:04:47,295
xác định kích thước mà bạn muốn sử dụng cho kích thước 4by3 hoặc 16by9.

61
00:04:47,295 --> 00:04:53,685
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.

62
00:04:53,685 --> 00:04:57,570
Bây giờ, chúng ta đã thấy sự hỗ trợ cho hình ảnh và phương tiện truyền thông,

63
00:04:57,570 --> 00:05:02,230
đó 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

64
00:05:02,230 --> 00:05:07,310
hình ảnh trong trang web hoặc trang web mà chúng tôi đã làm việc trên.

65
00:05:07,310 --> 00:05:11,345
Chúng tôi sẽ thực hiện một số thay đổi đối với trang index.html bằng cách

66
00:05:11,345 --> 00:05:17,200
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.