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

Изображения в 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% середньостатистичної статті,
або ж пів дня роботи нашого сервера

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

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

Алексей

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