Нет самоуважения дизайнеров веб-страниц,
сегодня бы дизайн веб-страниц без включения
какой-либо формы изображений или средств массовой информации на их веб-сайтах.
Исключение составляют профессора информатики.
На данном этапе вы, вероятно, ожидаете,
что я скажу это, но это не то, что я собираюсь сказать.
Я собираюсь сказать:
«Фотография стоит $12 на iStockPhoto.com.
Bootstrap обеспечивает широкую поддержку для включения
изображений и различных видов мультимедиа на ваших веб-сайтах и веб-страницах.
HTML-тег изображения, очевидно, будет использоваться для включения изображений в веб-страницы.
Bootstrap также предоставляет кучу классов, которые вы можете применить к
тегу изображения, чтобы еще больше улучшить способ включения изображений в вашу веб-страницу.
Таким образом, вы можете использовать класс изображения под названием img-fluid, который сделает ваши изображения отзывчивыми,
что означает, что размер изображения будет автоматически подстраиваться под разные размеры экрана.
Вы также можете использовать img-миниатюру, которая поместит белую границу вокруг вашего изображения.
Вы также можете иметь дело с формами и размерами изображений, как вы
видите на этом рисунке, так что вы можете иметь изображения, для которых вы создаете закругленные углы,
либо все четыре угла,
либо любую выбранную пару углов.
Таким образом, вы можете применить класс вокруг него, чтобы
создать изображение с закругленными углами, или вы можете увидеть
закругленный дефис сверху слева или справа, чтобы поместить
закругленные углы в любом из этих четырех краев вашего изображения.
Также можно применить округленный круг для создания круглых изображений.
Таким образом, когда вы
посещаете веб-сайты, вы увидите изображения, используемые многими из этих способов уже.
Вы помните, что мы видели класс карты в предыдущем уроке и упражнении.
Здесь я иллюстрирую использование класса Card с включенным изображением.
Таким образом, в этом случае мы включаем изображение с картой класса сверху, и если вы
включаете достаточно большой размер изображение, которое будет включено
вверху, а затем заключено внутри карты, как это.
Если изображение слишком маленькое,
то оно может быть помещено в один угол карты.
Поэтому используйте достаточно большое изображение, чтобы иметь возможность определить чистую карту, как это.
Итак, здесь вы увидите изображение, описанное с,
классы, применяемые к этому, включая верхнюю часть изображения карты
и img-fluid, чтобы сделать изображение отзывчивым автоматически.
Таким образом, вы можете использовать изображения с классом Card
для определения карт, которые вы используете на ваших веб-страницах.
Другой способ включения изображений и соответствующего контента в веб-страницы является медиа-объект.
Медиа-объект позволяет указать изображение, которое можно
разместить либо слева, либо справа от описания.
Кроме того, вы можете включить тело носителя, которое
содержит описание, которое идет вместе с изображением.
Таким образом, как вы видите в этом примере,
само тело носителя включает в себя любой HTML-форматированный контент здесь.
Поэтому здесь я использую h2 и h4 вместе с
классом p внутри тела медиа, чтобы определить фактический контент.
Мы будем использовать медиаобъект в следующем упражнении.
Вы также можете сделать адаптивную вставку контента.
Так, например, если у вас есть видео, которое вы хотите заключить на вашей веб-странице,
вы можете использовать класс iframe для
кадрирования видео, а затем заключить его внутри div с классами,
встроенными адаптивными дающими размеры, чтобы вы могли
отображать содержимое 16by9, 4by3 или видео.
Таким образом, отзывчивый встраивание, вы можете использовать
теги embed или iframe или video или object HTML, а затем заключить его внутри div.
Применение встраиваемого адаптивного, а также вместе с встраиваемым адаптивным,
указав размеры, которые вы хотите использовать для измерений 4by3 или 16b9.
Таким образом, вы также можете поместить видео контент в свои веб-страницы.
Теперь, когда мы видели поддержку изображений и средств массовой информации,
пришло время перейти к упражнению, где мы рассмотрим, как мы можем включить
изображения в веб-страницу или веб-сайт, над которым мы работаем.
Мы внешим некоторые изменения на странице index.html,
включив некоторые изображения и контент с помощью медиа-объекта.