Bootstrap 4 - CSS для HTML элемента figure

Александр Мальцев
11K
1
Bootstrap 4 - CSS для HTML элемента figure
Содержание:
  1. Назначение HTML элемента figure
  2. Классы Bootstrap, добавляющие к элементу figure стили
  3. Выравнивание текстовой надписи
  4. Комментарии

В этой статье познакомимся с классами фреймворка Bootstrap 4, предназначенными для добавления базовых CSS стилей к HTML элементу figure.

Назначение HTML элемента figure

Элемент figure был добавлен в HTML5 и предназначен для разметки контента (изображения, таблицы, фрагмента кода), смысл которого может быть понятен и вне документа, в котором он расположен.

Обычно контент элемента figure сопровождается текстовой надписью, которая размечается с помощью HTML элемента figcaption.

Классы Bootstrap, добавляющие к элементу figure стили

В Bootstrap 4 имеются стили для базового оформления HTML элемента figure.

В качестве примера рассмотрим элемент figure, состоящий из изображения (img) и текстового заголовка (figure-caption).

Для применения этих стилей необходимо выполнить следующее:

  • добавить класс figure к html-элементу figure;
  • добавить класс figure-img к элементу img;
  • добавить класс figure-caption к элементу figure-caption.

Элемент figure, имеющий базовое оформление:

<!-- Элемент figure, к которому добавлен Bootstrap класс figure -->
<figure class="figure">
    <!-- Изображение -->
    <img src="image.png" class="img-fluid figure-img" alt="">
    <!-- Текстовая надпись -->
    <figcaption class="figure-caption">Описание рисунка</figcaption>
</figure>
Bootstrap 4 - Figures

Во фреймворке Bootstrap 4 изображение, помещённое в HTML-элемент figure, автоматически не становится адаптивным. Поэтому, кроме figure-img к тегу img необходимо добавить ещё класс img-fluid.

HTML код элемента figure, изображение которого имеет скруглённые углы:

<figure class="figure">
    <!-- Углы изображения скруглены с помощью стилей, добавленных к нему посредством класса rounded -->
    <img src="image.png" class="img-fluid figure-img rounded" alt="">
    <figcaption class="figure-caption">Описание рисунка</figcaption>
</figure>

Выравнивание текстовой надписи

Выровнять надпись figcaption относительно изображения, расположенного в figure, можно с помощью одного из следующих классов:

  • text-left (по левому краю);
  • text-center (по центру);
  • text-right (по правому краю).

Например, figure с текстовой надписью, выровненной по правому краю:

<figure class="figure">
    <img src="image.png" class="img-fluid figure-img" alt="">
    <!-- Надпись, выровненная по правому краю -->
    <figcaption class="figure-caption text-right">...</figcaption>
</figure>
Bootstrap 4 - Figure с текстовой надписью, выровненной по правому краю

Figure с текстовой надписью figcaption, выровненной по центру:

<figure class="figure">
    <img src="image.png" class="img-fluid figure-img" alt="">
    <!-- Надпись, выровненная по правому краю -->
    <figcaption class="figure-caption text-center">...</figcaption>
</figure>

Комментарии ()

  1. Михаил
    15 мая 2020, 11:48
    Кто нибудь мне может объяснить для чего нужны все эти супер-пупер «семантические» теги? тот же figure, вот зачем он? все что он делает можно сделать с таким же успехом и без него, причем с такими же трудозатратами, если не меньше.
    1. Александр Мальцев
      15 мая 2020, 16:41
      Когда пользователь просматривает сайт в браузере ему, конечно, нет разницы с помощью каких HTML элементов была создана разметка. Но кроме пользователя сайт ещё посещают поисковые роботы. Когда они «изучают» веб-страницу им нужно понять, где у вас навигация, футер, какой контент более важен, а какой нет и т.д. Выполняя семантическую разметку, вы делаете контент более понятным поисковым работам. Семантическая разметка – это один из винтиков в поисковой оптимизации сайта (SEO).

      Кроме поисковых роботов семантическая разметка ещё используется в различных вспомогательных программах (например, программах чтения с экрана). Такая разметка позволяет программе более точно понять, что и где у вас расположено. В результате, это позволяет пользователю более просто и удобно с ней взаимодействовать. Эти программы, например, используют люди с ограниченными возможностями.
      1. Михаил
        15 мая 2020, 18:10
        Хорошо, это можно отнести к части новых тегов, но конкретно «фигура» — какое она имеет значение как для ридеров так и для поисковиков?
        1. Александр Мальцев
          16 мая 2020, 14:54
          Алгоритмы поисковых роботов и программ могут меняться, то, что не используется сегодня, может использоваться завтра. Если вы хотите сделать сайт немного более понятным для поисковых ботов и программ, то разметку следует сделать более смысловой. Т.е. не просто, например, использовать практически везде div, а применять в каждой ситуации какой-то определенный специфический для этого случая элемент из HTML 5, который будет придавать контенту больше смысла.

          Если вам это не нужно, то можете не размечать так. Тут уже решайте сами, нужно ли вам это или нет. Например, он используется на zen.yandex.ru.

          В HTML спецификации элемент figure предлагают использовать для разметки содержимого, которое является важным, но его положение в тексте тесно не связано с предыдущим и последующим содержимым. Его можно перенести в другое место основного содержимого документа. Это его семантический смысл. Т.е. если контент удовлетворяет этому смыслу, то его следует разметить с помощью figure. Кроме этого, он часто используется в сочетании с элементом figcaption. Figcaption используется для разметки текста, который используется в качестве заголовка или описания для figure.
          Он применяется не только для изображений, с помощью него вы можете также выделять диаграммы, аудио, графики, таблицы, код и т.д.
    Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.