Запустить
<!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"> <style> html { font-size: 16px; } .media-body .author { display: block; font-size: 1rem; color: #fff; font-weight: 700; } .media-body .metadata { display: block; color: #fff; font-size: .8125rem; } .title-comments { font-size: 1.4rem; font-weight: bold; line-height: 1.5rem; color: rgba(0, 0, 0, .87); margin-bottom: 1rem; padding-bottom: .25rem; border-bottom: 1px solid rgba(34, 36, 38, .15); } .media-left img { width: 50px; } .media { margin-top: 0px; } </style> </head> <body> <div class="container"> <h1 class="h3 text-center page-header">Bootstrap - Сниппет комментариев (3 вариант)</h1> </div> <div class="container"> <div class="comments"> <h3 class="title-comments">Комментарии (6)</h3> <ul class="media-list"> <!-- Комментарий (уровень 1) --> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-rounded" src="/examples/images/avatar1.jpg" alt="..."> </a> </div> <div class="media-body"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="author">Дима</div> <div class="metadata"> <span class="date">16 ноября 2015, 13:43</span> </div> </div> <div class="panel-body"> <div class="media-text text-justify">Lorem ipsum dolor sit amet. Blanditiis praesentium voluptatum deleniti atque. Autem vel illum, qui blanditiis praesentium voluptatum deleniti atque corrupti. Dolor repellendus cum soluta nobis. Corporis suscipit laboriosam, nisi ut enim. Debitis aut perferendis doloribus asperiores repellat. sint, obcaecati cupiditate non numquam eius. Itaque earum rerum facilis. Similique sunt in ea commodi. Dolor repellendus numquam eius modi. Quam nihil molestiae consequatur, vel illum, qui ratione voluptatem accusantium doloremque. </div> </div> <div class="panel-footer"> <a class="btn btn-primary" href="#">Ответить</a> </div> </div> <!-- Вложенный медиа-компонент (уровень 2) --> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-rounded" src="/examples/images/avatar2.jpg" alt=""> </a> </div> <div class="media-body"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="author">Пётр</div> <div class="metadata"> <span class="date">19 ноября 2015, 10:28</span> </div> </div> <div class="panel-body"> <div class="media-text text-justify">Dolor sit, amet, consectetur, adipisci velit. Aperiam eaque ipsa, quae. Amet, consectetur, adipisci velit, sed quia consequuntur magni dolores. Ab illo inventore veritatis et quasi architecto. Quisquam est, omnis voluptas nulla. Obcaecati cupiditate non numquam eius modi tempora. Corporis suscipit laboriosam, nisi ut labore et aut reiciendis. </div> </div> <div class="panel-footer"> <a class="btn btn-primary" href="#">Ответить</a> </div> </div> <!-- Вложенный медиа-компонент (уровень 3) --> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-rounded" src="/examples/images/avatar3.jpg" alt=""> </a> </div> <div class="media-body"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="author">Александр</div> <div class="metadata"> <span class="date">Вчера в 19:34</span> </div> </div> <div class="panel-body"> <div class="media-text text-justify">Amet, consectetur, adipisci velit, sed ut labore et dolore. Maiores alias consequatur aut perferendis doloribus asperiores. Voluptas nulla vero eos. </div> </div> <div class="panel-footer"> <a class="btn btn-primary" href="#">Ответить</a> </div> </div> </div> </div> <!-- Конец вложенного комментария (уровень 3) --> </div> </div> <!-- Конец вложенного комментария (уровень 2) --> <!-- Ещё один вложенный медиа-компонент (уровень 2) --> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-rounded" src="/examples/images/avatar4.jpg" alt=""> </a> </div> <div class="media-body"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="author">Сергей</div> <div class="metadata"> <span class="date">20 ноября 2015, 17:45</span> </div> </div> <div class="panel-body"> <div class="media-text text-justify">Ex ea voluptate velit esse, quam nihil impedit, quo minus id quod. Totam rem aperiam eaque ipsa, quae ab illo. Minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid. Iste natus error sit voluptatem. Sunt, explicabo deleniti atque corrupti, quos dolores et expedita. </div> </div> <div class="panel-footer"> <a class="btn btn-primary" href="#">Ответить</a> </div> </div> </div> </div> <!-- Конец ещё одного вложенного комментария (уровень 2) --> </div> </li> <!-- Конец комментария (уровень 1) --> <!-- Комментарий (уровень 1) --> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-rounded" src="/examples/images/avatar5.jpg" alt=""> </a> </div> <div class="media-body"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="author">Иван</div> <div class="metadata"> <span class="date">Вчера в 17:34</span> </div> </div> <div class="panel-body"> <div class="media-text text-justify">Eum iure reprehenderit, qui dolorem eum fugiat. Sint et expedita distinctio velit. Architecto beatae vitae dicta sunt, explicabo unde omnis. Qui aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto. Nemo enim ipsam voluptatem quia. Eos, qui ratione voluptatem sequi nesciunt, neque porro. A sapiente delectus, ut enim ipsam voluptatem, quia non recusandae architecto beatae. </div> </div> <div class="panel-footer"> <a class="btn btn-primary" href="#">Ответить</a> </div> </div> </div> </li> <!-- Конец комментария (уровень 1) --> <!-- Комментарий (уровень 1) --> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-rounded" src="/examples/images/avatar1.jpg" alt=""> </a> </div> <div class="media-body"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="author">Дима</div> <div class="metadata"> <span class="date">3 минуты назад</span> </div> </div> <div class="panel-body"> <div class="media-text text-justify">Tempore, cum soluta nobis est et quas. Quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in. Obcaecati cupiditate non recusandae impedit. Hic tenetur a sapiente delectus. Facere possimus, omnis dolor repellendus inventore veritatis et voluptates. Ipsa, quae ab illo inventore veritatis et quasi architecto beatae. In culpa, qui in culpa. Cum soluta nobis est laborum et aut perferendis doloribus. Vitae dicta sunt, explicabo perspiciatis. Amet, consectetur, adipisci velit, sed quia voluptas sit, aspernatur. Obcaecati cupiditate non provident, similique sunt in. Reiciendis voluptatibus maiores alias consequatur aut officiis debitis aut perferendis doloribus asperiores. Assumenda est, omnis dolor repellendus voluptas assumenda est omnis. </div> </div> <div class="panel-footer"> <a class="btn btn-primary" href="#">Ответить</a> </div> </div> </div> </li> <!-- Конец комментария (уровень 1) --> </ul> </div> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-3.2.1.min.js"></script> <!-- Bootstrap --> <script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>