» Как сделать картинку на бутстрап

Как сделать картинку на бутстрап

2 348

картинки на бутстрап

Чтобы сделать картинку бутстрап на странице 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="картинка бутстрап">

Похожие новости

Светлана
  • 0
User: СветланаОбтекание картинки работает чётко, и у меня один вопрос:
После обтекающего текста у меня идёт заголовок, и он к сожалению то же отображается в обтекающей области.
Что нужно добавить, чтобы этот заголовок к обтекающей области не примыкал, то есть был уже сам по себе.
За ранее, спасибо!
  • 27 марта 2017 09:44
Админ
  • 0
User: Admin→ Светлана
Если я правильно понял, то вы хотите отменить в определённом месте обтекание картинки.
Это делается просто:
вставляете, например код параграфа, допустим с таким классом:
 class="chistka"
 
А в стилевом файле для этого класса пропишите следующее:
.chistka {
 margin:0;
 padding:0;
 line-height: 0;
 clear: both;
}
Данный код отменит все ваши обтекания с любой стороны.
  • 27 марта 2017 09:58