Уроки по программированию

Резиновая шапка, адаптированная шапка Bootstrap 3.0.

Резиновая шапка, адаптированная шапка, адаптивный фон или еще как-нибудь по другому все, то что необходимо для адаптивного фона. В этом уроке я покажу как адаптировать фоновое изображение под различные виды устройств. Bootstrap позволяет сделать свой фон для каждого вида дизайна (настольный компьютеры, планшеты, телефоны). Я буду адаптировать фоновое изображение шапки.

Пример того что я хочу сделать.

Адаптивная шапка

Реализовать такое перевоплощение фона можно используя css. В Boostrap 3.0 4 уровня адаптации шаблона и для каждого уровня можно подобрать свои параметры (отступы, ширина, высота и прочее).

.otstup{
	margin-top:30px;
}
.shapka{
	background:url(../images/shapka3.jpg) center center no-repeat;
	height:100px;
}
@media(min-width:768px){ /*Изменения будут внесены только для шаблона шириной свыше 767px*/ 
	.shapka{
		background:url(../images/shapka2.jpg) center center no-repeat;
		height:134px;
	}
}
@media(min-width:992px){/*Изменения будут внесены только для шаблона шириной свыше 992px*/
	.shapka{
		background:url(../images/shapka.jpg) center center no-repeat;
		height:201px;
	}
}
@media(min-width:1200px){/*Изменения будут внесены только для шаблона шириной свыше 1200px*/
	.shapka{
		background:url(../images/shapka.jpg) center center no-repeat;
		height:201px;
	}
}

Вся необходимая информация есть в комментариях. Для того чтобы увидеть результат нужно скачать готовый пример и по экспериментировать шириной браузера. При уменьшение ширины браузера фоновое изображение будет тоже уменьшаться.

Выкладываю готовый пример. Скачать

Комментарии к статье

  • Аватарка 04.01.2014
    Ответить Андрей

    Только вот вопрос, как это связано с Bootstrap? Это ж css media queries. Они и без Bootstrap’a будут работать

    • Аватарка 04.01.2014

      Да будут работать, когда я писал пост я предполагал, что люди будут искать как адаптировать шапку при использование bootstrap и размеры min-width взяты с основного файла стилей bootstrap. Иногда простые вещи, если не знаешь как их реализовать доставляют массу хлопот. Надеюсь что этот пост кому-нибудь да поможет.

  • Аватарка 12.01.2015

    думал у меня проблемы с именами классов. Ан нет, тут ещё лучше

  • Аватарка 07.04.2015
    Ответить Kirill Zhukovskiy

    используйте img {width: 100%; height: auto; } — и не нужно будет делать копии картинок под разные разрешения.

  • Аватарка 17.09.2015
    Ответить Алексей Грофт

    Спасибо за статью.
    Но если мы говорим именно про Bootstrap, то значительно проще использовать класс img-responsive:

  • Аватарка 30.01.2016
    Ответить Алексей Голягин

    (:cry:) Мда, верстальщик из тебя автор не какой) Не проще картинке в шапке задать класс к примеру img-heder () , и затем в css прописать к этому классу стили .img-heder{width: 100%; height: auto;}

    • Аватарка 31.01.2016
      Ответить Александр

      Есть всего одна возможная причина использовать такой подход. Если разрешение маленькое — нет смысла использовать графику высокого разрешения, можно существенно уменьшить вес всей страницы применяя маленькое изображение под маленький экран. Хотя и в этом случае все не так идеально как могло бы быть.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *