29 Березень 2015
Рубрика: уроки

Уроки по Bootstrap. Урок №8: отзывчивые изображения, создание превью

Из этого урока вы узнаете, как легко создать превью при помощи Bootstrap, как скруглить углы и сделать изображение отзывчивым. Нет, не милым и душевным, а правильно отображающимся на мобильных экранах.

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

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

Тепер я хочу бачити коментарі 2