Вложенный медиа-объект Bulma

Bulma — это бесплатный CSS-фреймворк с открытым исходным кодом, основанный на Flexbox. Он богат компонентами, совместим и хорошо документирован. Он очень отзывчив по своей природе. Он использует классы для реализации своего дизайна.

Bulma Media Object — это компонент, который очень актуален для использования в интерфейсе социальных сетей как часть общего раздела комментариев. Но это чрезвычайно полезно также в электронной коммерции, а также на сайтах блогов и сайтах GeeksforGeeks. Вложение также является неотъемлемой частью использования медиа-объекта в качестве раздела комментариев, потому что вложение помогает нам добавлять и отображать часть пользовательского интерфейса ответа на комментарий.

Классы вложенных медиа-объектов Bulma:

• media: этот класс добавляется в контейнер медиа-объектов .
• media-left: этот класс используется для добавления изображения, значка или текста слева от содержимого медиа-объекта.
• media-content: этот класс добавляется в контейнер контента к медиа-контенту.
• content: этот класс используется для указания содержимого медиа-объекта.
• поле: этот класс используется для добавления поля/текстовой области к медиа-объекту.

Синтаксис:

<article class="media">
    <figure class="media-left">
        <p>
            ...
        </p>
    </figure>
    <div class="media-content">
        <div class="content">
            <p>
                ...
            </p>
        </div>
    </div>
</article>

Пример 1. В приведенном ниже коде показано вложение медиа-объектов с использованием указанных выше классов.

Выход:

Пример 2. В приведенном ниже коде показано вложение медиа-объектов с использованием указанных выше классов и добавление пустой текстовой области для добавления другого комментария.

Выход:

Ссылка: https://bulma.io/documentation/layout/media-object/#nesting