Картинки бутстрап их позиционирование и обтекание

А сделав дополнение к классу для картинки, не влезая в стилевое оформление, вы можете отобразить вашу фотографию уже с закруглёнными краями, в овальном виде, или с готовой рамкой (обводкой).
Давайте рассмотрим всё на примерах.
Примеры картинки на бутстрап
Код для адаптивной картинки:
htmlCOPY<img class="img-responsive" src="foto.jpg" alt="картинка бутстрап">
Прописывайте постоянно вышеуказанный класс class="img-responsive" для картинок и они будут грамотно отображаться на любом устройстве.
Чтобы отобразить картинку с закруглёнными краями, нужно добавить к уже имеющему классу этот код:
Чтобы отобразить картинку с закруглёнными краями, нужно добавить к уже имеющему классу этот код:
Код для картинки бутстрап с закруглёнными краями.

htmlCOPY<img class="img-responsive img-rounded" src="foto.jpg" alt="картинка бутстрап">
Овальная картинка бутстрап.

Для отображения овальной картинки, добавьте этот класс:
htmlCOPY<img class="img-responsive img-circle" src="foto.jpg" alt="картинка бутстрап">
Картинка бутстрап в рамке.

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

Обтекание картинки работает чётко, и у меня один вопрос:
После обтекающего текста у меня идёт заголовок, и он к сожалению то же отображается в обтекающей области.
Что нужно добавить, чтобы этот заголовок к обтекающей области не примыкал, то есть был уже сам по себе.
Заранее, спасибо!
После обтекающего текста у меня идёт заголовок, и он к сожалению то же отображается в обтекающей области.
Что нужно добавить, чтобы этот заголовок к обтекающей области не примыкал, то есть был уже сам по себе.
Заранее, спасибо!
1 августа 2018 10:17

Если я правильно понял, то вы хотите отменить в определённом месте обтекание картинки.
Это делается просто: вставляете, например код параграфа, допустим с таким классом:
<p class="chistka"></p>
---
А в стилевом файле для этого класса пропишите следующее:
Это делается просто: вставляете, например код параграфа, допустим с таким классом:
<p class="chistka"></p>
---
А в стилевом файле для этого класса пропишите следующее:
Данный код отменит все ваши обтекания с любой стороны.htmlCOPY<style> .chistka{ margin:0; padding:0; line-height:0; clear:both; } </style>
19 апреля 2019 12:09

Спасибо большое!
Добавить комментарий