Как сделать картинку на бутстрап
Чтобы сделать картинку бутстрап на странице html адаптивной, достаточно в код картинки добавить определённый класс, и ваши фотки будут всегда корректно отображаться на сайте.
А сделав дополнение к классу для картинки, не влезая в стилевое оформление, вы можете отобразить вашу фотографию уже с закруглёнными краями, в овальном виде, или с готовой рамкой (обводкой).
Давайте рассмотрим всё на примерах.
Примеры картинки на бутстрап
Код для адаптивной картинки бутстрап выглядит следующим образом:
<img class="img-responsive" src="foto.jpg" alt="картинка бутстрап">Прописывайте постоянно вышеуказанный класс class="img-responsive" для картинок и они будут грамотно отображаться на любом устройстве.
Чтобы отобразить картинку с закруглёнными краями, нужно добавить к уже имеющему классу этот код:
Код для картинки бутстрап с закруглёнными краями.
<img class="img-responsive img-rounded" src="foto.jpg" alt="картинка бутстрап">Для отображения овальной картинки, добавьте этот класс:
Код для овальной картинки бутстрап.
<img class="img-responsive img-circle" src="foto.jpg" alt="картинка бутстрап">А для того, что бы ваша картинка была обрамлена в рамку, пропишите вот этот класс:
Код для картинки бутстрап в рамке.
<img class="img-responsive img-thumbnail" src="foto.jpg" alt="картинка бутстрап">Для позиционирования ваших картинок бутстрап: слева, по центру и справа, необходимо добавить ещё один класс и прописать для него в стилевом файле определённые параметры с необходимыми значениями.
Обтекание картинки слева, например с имеющейся овальной формой.
Код для картинки слева.
<!-- Код для css -->
<style>
.img-left {
margin: 0 20px 10px 0;
padding: 0;
float: left;
}
</style>
<!-- Код для html -->
<img class="img-responsive img-circle img-left" src="foto.jpg" alt="картинка бутстрап">В этом и последующих примерах имя дополненного класса img-left прописываете любое своё.
Код для картинки по центру.
<!-- Код для css -->
<style>
.img-centr {
margin: 0 auto;
padding: 0;
}
</style>
<!-- Код для html -->
<img class="img-responsive img-centr" src="foto.jpg" alt="картинка бутстрап">Код для обтекания картинки справа.
<!-- Код для css -->
<style>
.img-right {
margin: 0 0 10px 20px;
padding: 0;
float: right;
}
</style>
<!-- Код для html -->
<img class="img-responsive img-right" src="foto.jpg" alt="картинка бутстрап">Думаю сложного в понимание, - как установить картинку бутстрап и прописать для неё код, у вас не будет, а если возникнут вопросы, то пишите их в комментариях и мы это обсудим.
