1
00:00:03,250 --> 00:00:07,080
Нет самоуважения дизайнеров веб-страниц,

2
00:00:07,080 --> 00:00:10,990
сегодня бы дизайн веб-страниц без включения

3
00:00:10,990 --> 00:00:15,665
какой-либо формы изображений или средств массовой информации на их веб-сайтах.

4
00:00:15,665 --> 00:00:19,055
Исключение составляют профессора информатики.

5
00:00:19,055 --> 00:00:23,390
На данном этапе вы, вероятно, ожидаете,

6
00:00:23,390 --> 00:00:26,270
что я скажу это, но это не то, что я собираюсь сказать.

7
00:00:26,270 --> 00:00:29,255
Я собираюсь сказать:

8
00:00:29,255 --> 00:00:33,425
«Фотография стоит $12 на iStockPhoto.com.

9
00:00:33,425 --> 00:00:38,060
Bootstrap обеспечивает широкую поддержку для включения

10
00:00:38,060 --> 00:00:42,800
изображений и различных видов мультимедиа на ваших веб-сайтах и веб-страницах.

11
00:00:42,800 --> 00:00:49,040
HTML-тег изображения, очевидно, будет использоваться для включения изображений в веб-страницы.

12
00:00:49,040 --> 00:00:55,170
Bootstrap также предоставляет кучу классов, которые вы можете применить к

13
00:00:55,170 --> 00:01:02,215
тегу изображения, чтобы еще больше улучшить способ включения изображений в вашу веб-страницу.

14
00:01:02,215 --> 00:01:08,535
Таким образом, вы можете использовать класс изображения под названием img-fluid, который сделает ваши изображения отзывчивыми,

15
00:01:08,535 --> 00:01:15,195
что означает, что размер изображения будет автоматически подстраиваться под разные размеры экрана.

16
00:01:15,195 --> 00:01:22,585
Вы также можете использовать img-миниатюру, которая поместит белую границу вокруг вашего изображения.

17
00:01:22,585 --> 00:01:29,480
Вы также можете иметь дело с формами и размерами изображений, как вы

18
00:01:29,480 --> 00:01:36,635
видите на этом рисунке, так что вы можете иметь изображения, для которых вы создаете закругленные углы,

19
00:01:36,635 --> 00:01:38,995
либо все четыре угла,

20
00:01:38,995 --> 00:01:42,020
либо любую выбранную пару углов.

21
00:01:42,020 --> 00:01:45,595
Таким образом, вы можете применить класс вокруг него, чтобы

22
00:01:45,595 --> 00:01:49,450
создать изображение с закругленными углами, или вы можете увидеть

23
00:01:49,450 --> 00:01:53,130
закругленный дефис сверху слева или справа, чтобы поместить

24
00:01:53,130 --> 00:01:57,905
закругленные углы в любом из этих четырех краев вашего изображения.

25
00:01:57,905 --> 00:02:02,780
Также можно применить округленный круг для создания круглых изображений.

26
00:02:02,780 --> 00:02:05,170
Таким образом, когда вы

27
00:02:05,170 --> 00:02:10,310
посещаете веб-сайты, вы увидите изображения, используемые многими из этих способов уже.

28
00:02:10,310 --> 00:02:16,000
Вы помните, что мы видели класс карты в предыдущем уроке и упражнении.

29
00:02:16,000 --> 00:02:21,085
Здесь я иллюстрирую использование класса Card с включенным изображением.

30
00:02:21,085 --> 00:02:27,320
Таким образом, в этом случае мы включаем изображение с картой класса сверху, и если вы

31
00:02:27,320 --> 00:02:30,760
включаете достаточно большой размер изображение, которое будет включено

32
00:02:30,760 --> 00:02:35,030
вверху, а затем заключено внутри карты, как это.

33
00:02:35,030 --> 00:02:36,860
Если изображение слишком маленькое,

34
00:02:36,860 --> 00:02:41,245
то оно может быть помещено в один угол карты.

35
00:02:41,245 --> 00:02:47,315
Поэтому используйте достаточно большое изображение, чтобы иметь возможность определить чистую карту, как это.

36
00:02:47,315 --> 00:02:52,030
Итак, здесь вы увидите изображение, описанное с,

37
00:02:52,030 --> 00:02:56,035
классы, применяемые к этому, включая верхнюю часть изображения карты

38
00:02:56,035 --> 00:03:00,510
и img-fluid, чтобы сделать изображение отзывчивым автоматически.

39
00:03:00,510 --> 00:03:04,470
Таким образом, вы можете использовать изображения с классом Card

40
00:03:04,470 --> 00:03:08,525
для определения карт, которые вы используете на ваших веб-страницах.

41
00:03:08,525 --> 00:03:16,605
Другой способ включения изображений и соответствующего контента в веб-страницы является медиа-объект.

42
00:03:16,605 --> 00:03:20,740
Медиа-объект позволяет указать изображение, которое можно

43
00:03:20,740 --> 00:03:26,225
разместить либо слева, либо справа от описания.

44
00:03:26,225 --> 00:03:29,690
Кроме того, вы можете включить тело носителя, которое

45
00:03:29,690 --> 00:03:32,880
содержит описание, которое идет вместе с изображением.

46
00:03:32,880 --> 00:03:35,110
Таким образом, как вы видите в этом примере,

47
00:03:35,110 --> 00:03:41,270
само тело носителя включает в себя любой HTML-форматированный контент здесь.

48
00:03:41,270 --> 00:03:44,820
Поэтому здесь я использую h2 и h4 вместе с

49
00:03:44,820 --> 00:03:49,755
классом p внутри тела медиа, чтобы определить фактический контент.

50
00:03:49,755 --> 00:03:54,240
Мы будем использовать медиаобъект в следующем упражнении.

51
00:03:54,240 --> 00:03:57,670
Вы также можете сделать адаптивную вставку контента.

52
00:03:57,670 --> 00:04:03,360
Так, например, если у вас есть видео, которое вы хотите заключить на вашей веб-странице,

53
00:04:03,360 --> 00:04:07,690
вы можете использовать класс iframe для

54
00:04:07,690 --> 00:04:10,760
кадрирования видео, а затем заключить его внутри div с классами,

55
00:04:10,760 --> 00:04:16,410
встроенными адаптивными дающими размеры, чтобы вы могли

56
00:04:16,410 --> 00:04:21,020
отображать содержимое 16by9, 4by3 или видео.

57
00:04:21,020 --> 00:04:27,630
Таким образом, отзывчивый встраивание, вы можете использовать

58
00:04:27,630 --> 00:04:34,450
теги embed или iframe или video или object HTML, а затем заключить его внутри div.

59
00:04:34,450 --> 00:04:41,345
Применение встраиваемого адаптивного, а также вместе с встраиваемым адаптивным,

60
00:04:41,345 --> 00:04:47,295
указав размеры, которые вы хотите использовать для измерений 4by3 или 16b9.

61
00:04:47,295 --> 00:04:53,685
Таким образом, вы также можете поместить видео контент в свои веб-страницы.

62
00:04:53,685 --> 00:04:57,570
Теперь, когда мы видели поддержку изображений и средств массовой информации,

63
00:04:57,570 --> 00:05:02,230
пришло время перейти к упражнению, где мы рассмотрим, как мы можем включить

64
00:05:02,230 --> 00:05:07,310
изображения в веб-страницу или веб-сайт, над которым мы работаем.

65
00:05:07,310 --> 00:05:11,345
Мы внешим некоторые изменения на странице index.html,

66
00:05:11,345 --> 00:05:17,200
включив некоторые изображения и контент с помощью медиа-объекта.