Этот небольшой урок будет посвящён изображениям. В бутстрапе есть три встроенных класса для оформления изображений и один для того, чтобы изображение имело динамическую ширину и корректно отображалось на мобильных устройствах.

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

Скруглённые углы

Круг или овал

Превью изображения

bootstrap image example
bootstrap image example
bootstrap image example

Классы для изображений

Класс Описание
.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 пикселям. Успехов!

Коменти

Иван

Привет! Никак не могу разобраться как поставить картинку посередине блока без применения отступов. Подскажете, Дедушка?

Алексей

это работает, круто!