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

Изображения в 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 пикселям. Успехов!

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Підтримайте Токар
50 грн.

10% середньостатистичної статті,
або ж пів дня роботи нашого сервера

Підтримати
Ось вона, нагода стати причетним до розвитку незалежних медіа!
Коменти
Иван

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

Алексей

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