Изображения

Cinque Terre
Заоблени ръбове
Cinque Terre
Кръг
Cinque Terre
Икони

Заоблени ръбове

Класа.img-rounded добавя заоблени ръбове на HTML изображенията

Опитайте сами »

Кръг

.img-circle  класа прави изображението на кръг:

Опитайте сами »

Икони

.img-thumbnail класа прави изображението на икона.

Опитайте сами »

Риспонсив изображения

Изображенията са в най-различни размери. За решаването на потенционални проблеми с тях трябва автоматично да се побират в прозорците и да се изобразяват коректно. Създават се риспонсив изображения с класа .img-responsive към тага <img>. В този случай изображението се оразмерява хубаво спрямо родителския му елемент. Този клас прилага следните стилове за изображението: display: block; max-width: 100%;  height: auto;

Опитайте сами »

Галерия

В комбинация на грид системата и класа за икони можем да създадем галерия.

Забележка: Ще научите повече за грид системата по-късно в този урок (как да създадете оформление с различно количество колони).

Опитайте сами »

Риспонсив вграждания

Също така можем да направим видеоклиповете или слайдове да се мащабират правилно на всяко устройство. Класовете могат да се прилагат директно към елементите iframe embed video и object Следният пример създава отзивчив видео елемент чрез добавяне на клас .embed-responsive-item към тага iframe(видеоклипът ще се мащабира добре спрямо родителския елемент). Съдържащият div дефинира съотношението на размера на видеото:

Опитайте сами »

Какво представлява съотношението?

Аспектното съотношение на изображението описва пропорционалната връзка между неговата ширина и височината. Често срещани съотношения на видеа са 4: 3 (универсалния видео формат на 20-ти век) и 16: 9.

Можете да избирате между два класа съотношения:

Опитайте сами »