Запустить
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 - Медиа объект</title> <!-- Bootstrap --> <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- Контент страницы --> <div class="container"> <h1 class="h3 text-center page-header">Bootstrap 3 - Медиа объект</h1> <!-- Контейнер медиа объектов --> <ul class="media-list"> <!-- Первый медиа объект --> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object" src="/examples/images/media-image-1.png" alt=""> </a> </div> <!-- Контент первого медиа объекта --> <div class="media-body"> <h4 class="media-heading">Текст заголовка</h4> Дорогие друзья, социально-экономическое развитие создаёт предпосылки качественно новых шагов для новых предложений. Не следует, однако, забывать о том, что социально-экономическое развитие в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач... <!-- Второй медиа объект --> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" src="/examples/images/media-image-2.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading">Текст заголовка</h4> Дорогие друзья, социально-экономическое развитие создаёт предпосылки качественно новых шагов для новых предложений. Не следует, однако, забывать о том, что социально-экономическое развитие в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач... <!-- Третий медиа объект --> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" src="/examples/images/media-image-3.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading">Текст заголовка</h4> Дорогие друзья, социально-экономическое развитие создаёт предпосылки качественно новых шагов для новых предложений. Не следует, однако, забывать о том, что социально-экономическое развитие в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач... </div> </div> </div> </div> <!-- Четвертый медиа объект --> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" src="/examples/images/media-image-4.png" alt=""> </a> </div> <div class="media-body"> <h4 class="media-heading">Текст заголовка</h4> Дорогие друзья, социально-экономическое развитие создаёт предпосылки качественно новых шагов для новых предложений. Не следует, однако, забывать о том, что социально-экономическое развитие в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач... </div> </div> </div> </li> </ul> </div> </body> </html>