Этот небольшой урок будет посвящён изображениям. В бутстрапе есть три встроенных класса для оформления изображений и один для того, чтобы изображение имело динамическую ширину и корректно отображалось на мобильных устройствах.
Изображения в Bootstrap
Скруглённые углы
Круг или овал
Превью изображения
Классы для изображений
| Класс | Описание |
|---|---|
.img-rounded |
Добавление изображению скруглённых углов (IE9+) |
.img-circle |
Полное скругление углов изображения до овала или круга (IE9+) |
.img-thumbnail |
Создание превью (серые границы с отступами) |
.img-responsive |
Создание отзывчивого изображения: в результате изображение будет растягиваться до ширины родительского элемента |
Отзывчивые изображения
Класс .img-responsive, добавленный к изображению, растянет его до ширины родительского элемента. Это аналогично коду max-width: 100%; and height: auto;, вот вам пример такого класса:
<img src="img.jpg" class="img-responsive" alt="Отзывчивое изображение в Bootstrap">
Задание
Чтобы лучше разобраться с уроком, сделайте следующее: создайте превью с изображением, модифицируйте стандартные стили для превью, поменяйте цвет границ на красный и сделайте отступ равным 10 пикселям. Успехов!
Привет! Никак не могу разобраться как поставить картинку посередине блока без применения отступов. Подскажете, Дедушка?
это работает, круто!