Изображение. Основы bootstrap 3 для начинающих. Урок №15

Всем привет!
На сегодняшнем уроке вы научитесь работать с изображением (картинкой) в bootstrap 3, а именно, делать изображение адаптивным, выравнивать по левому, правому краях или по центру, придавать картинке другую форму.
Начнем с адаптации.

Как сделать изображение (картинка) адаптивным

Чтобы сделать картинку адаптивной, добавьте к изображению (к тегу img) класс «img-responsive»:

<img src="kartinka.png" class="img-responsive">

К картинке будут применены такие CSS свойства для адаптивности,  как «max-width:100%» и «height:auto».

Если вы хотите применить адаптивность ко всем картинкам без исключений, тогда нужно прописать общий CSS стиль для всех изображений. Я вам пока не рассказывал, как подключить свой CSS-файл, но в конце уроков я обязательно расскажу, как это сделать. А сейчас просто для общего ознакомления с тем, что такое возможно сделать, вот готовый код:

img {
display: block;
height: auto;
max-width: 100%;
}

Как изменить форму картинки

В Twitter Bootstrap 3 с помощью готовых CSS классов можно сделать изображение с:
закругленными углами – класс «img-rounded»
в рамке – «img-thumbnail»
форма круга «img-circle».

<img src="kartinka.png" alt="закругленные углами" class="img-rounded">
<img src="kartinka.png" alt="форма круга" class="img-circle">
<img src="kartinka.png" alt="в рамке" class="img-thumbnail">

Результат:

Расположение картинки

Картинку можно разместить по левую или правую стороны или по центру:

«pull-left» - слева
«pull-right» - справа
«center-block» по центру

Пример:

<img src="kartinka.png" class="pull-left" alt="слева">
<img src="kartinka.png" class="pull-right" alt="с права">
<img src="kartinka.png" class="center-block" alt="по центру">

Картинку по центру можно выровнять и вот таким способом:

<div class="text-center">
<img src="kartinka.png" class="img-rounded" alt="по центру">
</div>

Жду вас на следующих уроках по изучению Bootstrap 3.