Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Изображения в Bootstrap

Настройка стиля для изображений: фото товаров и статей в интернет магазине на Bootstrap

Сергей    14.02.2017    596    4.6 из 5.0 (9)

Оцените материал:

Цель урока

Познакомиться со стилями вывода изображений в Bootstrap. Обзор классов для изменения фигур изображений: окружность, прямоугольник со скругленными углами.

«Отзывчивые» изображения

Чтобы изображения подстраивались под ширину экрана и не вылезали за его пределы, создавая горизонтальную полосу прокрутки, в Bootstrap предусмотрен класс img-responsive. Используется он очень просто:

<img src="..." class="img-responsive" alt="Отзывчивое изображение">

Этот класс добавляет следующие стили: max-width: 100%;, height: auto; и display: block;. В результате изображения масштабируются под размер родительского контейнера.

Пример:

Отзывчивое изображение

Может возникнуть вопрос, как центрировать такие изображения. Забегая вперед, скажу, что для этого используется класс .center-block вместо .text-center, который мы рассматривали ранее.

Фигуры изображений

Изображениям можно задать разную форму. Для этого в Bootstrap предусмотрены специальные классы img-thumbnail, img-rounded, img-circle:

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Пример:

Фото в каталоге и на странице товара

Чтобы задать класс для фото на странице товара, найдите переменные, которые отвечают за его отображение. Обычно это $PHOTO$ и $THUMB$. Тогда, оно может быть использовано следующим образом:

<img id="ipreview" src="$PHOTO$" class="gphoto img-responsive img-thumbnail" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="0">

Аналогичным образом происходит добавление классов в шаблоне "Вид товара в каталоге":

<img src="$THUMB$" class="gphoto img-responsive img-thumbnail" id="$BLOCK_PREF$-gphoto-$ID$">

Фото в таблице заказа

В таблице с товарами на странице заказа мы не можем прописать класс для изображения. Поэтому необходимо задать стили в CSS магазина. Можно использовать следующий код:

/* .img-circle */
#order-table .order-item-img img {
 border-radius: 50%;
}
/* .img-rounded */
#order-table .order-item-img img {
 border-radius: 6px;
}
/* .img-thumbnail */
#order-table .order-item-img img {
 display: inline-block;
 max-width: 100%;
 height: auto;
 padding: 4px;
 line-height: 1.42857143;
 background-color: #fff;
 border: 1px solid #ddd;
 border-radius: 4px;
 -webkit-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
/* .img-responsive */
#order-table .order-item-img img {
 display: block;
 max-width: 100%;
 height: auto;
}

Используйте один из трех способов настройки внешнего вида изображения совместно с img-responsive.

Упражнения

  1. Изучите способы стилизации изображений в Bootstrap
  2. Используйте масштабируемые изображения
  3. Попробуйте применить стилизация Bootstrap для изображения товаров на своем сайте
  4. В качестве дополнительного задания, попробуйте использовать класс img-circle для аватаров пользователей в отзывах


Оцените материал:


Расскажите друзьям и коллегам о полезной статье:

Обсуждение

Всего комментариев: 0

Изображения в Bootstrap
Изображения в Bootstrap