Загрузка

RUS | ANG | |

StepkinBlog.ru

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

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

21.09.2016


08:50


4578


пока нет


Изображение. Основы 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. Как задать цвет в CSS. Основы CSS для начинающих. Урок №8
  2. Цикл FOR. Основы PHP с нуля. Урок №12
  3. Коды цвета в CSS - / R G B / HTML. Основы CSS для начинающих. Урок №7
  4. Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5
  5. Шрифты в CSS. Основы CSS для начинающих. Урок №6

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

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

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

;-) :| :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 чел/сутки

Статистика:

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

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?