Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

21.09.2016


08:50


5833


2


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

Изображение. Основы 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">

Результат:

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

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

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

«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.



Случайные записи:

  1. Форма. Основы bootstrap 3 для начинающих. Урок №14
  2. Создание простого мини сайта. Практика по пройдённому материалу
  3. Пагинация (pagination) – Bootstrap3
  4. Форматирование текста в HTML. Основы HTML для начинающих. Урок №3
  5. Нам 1 годик! С Днем Рождения StepkinBlog.ru!!!

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

2 ответа(ов) на статью: “Изображение. Основы bootstrap 3 для начинающих. Урок №15”

  1. Владимир says:

    В теле объявления вертикальные фото отображаются не пропорционально, может подскажите как исправить? Спасибо

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    класс "img-responsive" не помог?

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 105
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 258