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

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

Поширити у Фейсбуці
Надіслати у Messenger
Зберегти в Pocket
Надіслати в Telegram
Надіслати у WhatsApp

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

2 коментаря

спочатку нові
за рейтингом спочатку нові за хронологією

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

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