Практика по CSS в Bootstrap. Отзывы покупателей
Разметка адаптивных отзывов покупателей и добавление аватаров в комментарии пользователей
-
- Уроки
- Верстка шаблонов на Bootstrap
- CSS
- Практика по CSS в Bootstrap. Отзывы покупателей
Сергей
22.08.2017
2852
4.3 из 5.0 (17)
Оцените материал:
Цель урока
Научиться выводить адаптивные отзывы и комментарии покупателей на страницах товаров и в гостевой книге.
В данном уроке мы будем работать с шаблоном «Вид комментариев»:
Этот шаблон применяется во всех контентных модулях на страницах материалов/товаров, а также в модуле гостевая книга.
С помощью шаблона отображается следующее:
- информация о пользователе: имя, аватар, ссылка на соц.сеть;
- информация о комментарии: дата добавления, текст комментария, рейтинг (на основе голосов других пользователей), ответ администрации;
- панель модератора для пользователей с правом редактирования комментариев.
Ниже представлен код, который вы можете отредактировать по своему усмотрению:
В результате должно получиться следующее:
Упражнения
- Скопируйте код и примените для отзывов на своем сайте
- Попробуйте заменить класс img-circle на img-rounded
- Разберитесь, как работает комбинация классов col-xs-3 col-sm-2 col-md-1
Оцените материал:
Расскажите друзьям и коллегам о полезной статье: