Bootstrap 4 - Демонстрация компонента media


Медиа-компонент, в котором медиа-объект (изображение) располагается относительно блока с содержимым слева


Заголовок media-компонента

Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum. Quod maxime placeat, facere possimus, omnis dolor sit, amet, consectetur, adipisci velit.


Медиа-компонент, в котором медиа-объект (изображение) располагается относительно блока с содержимым справа


Заголовок media-компонента

Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum. Quod maxime placeat, facere possimus, omnis dolor sit, amet, consectetur, adipisci velit.


Медиа-блок, выровненный в вертикальном направлении по верхнему краю контента (по умолчанию)


Заголовок media-компонента

Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum. Quod maxime placeat, facere possimus, omnis dolor sit, amet, consectetur, adipisci velit. Minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda. Quod maxime placeat, facere possimus. Quos dolores et harum quidem rerum necessitatibus saepe.

Vitae dicta sunt, explicabo totam rem aperiam eaque ipsa. Voluptate velit esse, quam nihil impedit, quo voluptas nulla vero eos. Necessitatibus saepe eveniet, ut enim ad minima veniam, quis nostrum exercitationem ullam. Accusamus et dolore magnam aliquam quaerat voluptatem accusantium doloremque laudantium totam.


Медиа-блок, выровненный в вертикальном направлении посередине блока, содержащего контент (.media-middle)


Заголовок media-компонента

Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum. Quod maxime placeat, facere possimus, omnis dolor sit, amet, consectetur, adipisci velit. Minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda. Quod maxime placeat, facere possimus. Quos dolores et harum quidem rerum necessitatibus saepe.

Vitae dicta sunt, explicabo totam rem aperiam eaque ipsa. Voluptate velit esse, quam nihil impedit, quo voluptas nulla vero eos. Necessitatibus saepe eveniet, ut enim ad minima veniam, quis nostrum exercitationem ullam. Accusamus et dolore magnam aliquam quaerat voluptatem accusantium doloremque laudantium totam.


Медиа-блок, выровненный в вертикальном направлении по нижнему краю контента (.media-bottom)

Заголовок media-компонента

Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum. Quod maxime placeat, facere possimus, omnis dolor sit, amet, consectetur, adipisci velit. Minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda. Quod maxime placeat, facere possimus. Quos dolores et harum quidem rerum necessitatibus saepe.

Vitae dicta sunt, explicabo totam rem aperiam eaque ipsa. Voluptate velit esse, quam nihil impedit, quo voluptas nulla vero eos. Necessitatibus saepe eveniet, ut enim ad minima veniam, quis nostrum exercitationem ullam. Accusamus et dolore magnam aliquam quaerat voluptatem accusantium doloremque laudantium totam.


Один медиа-компонент вложенный в другой


Заголовок media-компонента

Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum. Quod maxime placeat, facere possimus, omnis dolor sit, amet, consectetur, adipisci velit.

Заголовок media-компонента

Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum. Quod maxime placeat, facere possimus, omnis dolor sit, amet, consectetur, adipisci velit.


Медиа-компоненты в виде списка


  • Заголовок media-компонента

    Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum. Quod maxime placeat, facere possimus, omnis dolor sit, amet, consectetur, adipisci velit.

    Заголовок media-компонента

    Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum. Quod maxime placeat, facere possimus, omnis dolor sit, amet, consectetur, adipisci velit.

    Заголовок media-компонента

    Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum.

    Заголовок media-компонента

    Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum. Quod maxime placeat, facere possimus, omnis dolor sit, amet, consectetur, adipisci velit.

  • Заголовок media-компонента

    Lorem ipsum dolor sit amet. Quae ab illo inventore veritatis et iusto odio. Delectus, ut labore et harum. Ipsam voluptatem, quia non provident, similique sunt. Suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor repellendus veniam, quis nostrum. Quod maxime placeat, facere possimus, omnis dolor sit, amet, consectetur, adipisci velit.