Работа с изображениями в Bootstrap

По умолчанию все картинки в Bootstrap не являются отзывчивыми, т.е. не меняют свой размер в зависимости от экрана, но такая возможность. Для этого к каждой картинке нужно добавить специальный класс img-responsive

<img src="img/jumbotron.jpg" class="img-responsive">

Теперь, если мы уменьшим размеры экрана, то наша картинка будет уменьшаться. А прежде чем смотреть демо или качать урок, давайте рассмотрим еще 3 интересных класса.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
  1. img-rounded — отвечает за скругление углов картинки
  2. img-circle — полностью скругляет картинку, делая ее круглой или овальной
  3. img-thumbnail — делает у картинки рамочку

А теперь можно взглянуть и демо. Как видим, у нас применены все рассмотренные классы и каждая картинка теперь отзывчивая (уменьшите для этого окно браузера).

Скачать урок

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Scroll Up