Предыдущий ролик Следующий ролик  

Видео урок: Планирование карусели изображений и подготовка изображений

Bootstrap 3: добавь интерактивность на свой сайт

Нашим следующим шагом будет создание главной страницы для сайта. Клиент хочет, чтобы на ней отображалась карусель картинок с восемью фотографиями. На главной странице есть и другая информация. Справа у нас располагается маленькая колонка с описанием отелей. И внизу находится несколько отзывов. Все, что вы видите здесь, создано с помощью готовых стилей Bootstrap, включая оформление отзывов, для которых как раз используются теги blockquote и small.

О них вы можете прочитать в документации Bootstrap на сайте getbootstrap.com. Что же нам нужно сделать сейчас? Конечно, эти восемь фото на странице прекрасны, но сами они не превратятся в карусель картинок, так что ее мы сейчас и будем создавать. Итак, давайте кратко просмотрим исходный HTML для этой страницы. Зайдите в папку Bootstrap, с которой мы работали до сих пор, и откройте файл index.html, в котором и находится наш исходный HTML. Если вы начинаете смотреть курс с этого момента, то перейдите к папке Exercise Files, затем - 03_01/Start, и там вы найдете сайт со всеми изменениями, которые мы в него внесли на данный момент. Вы можете скопировать его в папку Bootstrap на рабочем столе и продолжать работать с ним.

Итак, на этой странице у нас находится практически тот же код, что и в предыдущих видео, по крайней мере, в начале. Секция head та же самая, и у нас по-прежнему есть логотип и слоган на строках 15 и 16. С 18-й строки начинается панель навигации. Единственное отличие между навигационной панелью на странице с членами команды и панелью здесь, в index.html, находится на 34-й строке. Как видите, здесь находится класс active, в то время как на странице с членами команды он был на строке 35.

Затем, если вы прокрутите еще немного вниз, до строки 42, то увидите основной контент этой страницы. Итак, что у нас здесь есть? У нас есть div с классом call-md-10. За ним следует еще один блок div, который начинается на строке 44 и заканчивается на строке 53. Это div с идентификатором locations. Опять же, мы будем использовать этот идентификатор в коде для карусели. А затем у нас идет ряд изображений, которые просто по порядку располагаются на странице.

Они не закодированы как список. На самом деле для карусели не используется разметка списка. Достаточно, чтобы изображения просто шли одно за другим. Далее у нас идет небольшой фрагмент текста. Мы не собираемся с ним ничего делать, но он хорошо дополняет страницу. Это отзывы о сайте, и мы уже обсуждали код для них. Затем на 64-й строке у нас есть блок div с классом col-md-2. Таким образом, это вторая колонка с правой стороны страницы, и она оформлена в виде панели с помощью класса Bootstrap panel.

Итак, на 65-й строке находятся классы panel и panel-primary. В данном случае панель состоит из двух частей. На 66-й строке находится заголовок панели, и на 69-й - тело панели. Как вы можете видеть здесь, класс panel содержит основные стили для панели, а panel-primary определяет цвет. Опять же, не забывайте, что primary в BootStrap обозначает приятный оттенок синего. Вместо него мы могли бы использовать panel-success, panel-warning, panel-info, panel-default -

вариантов много, и все они соответствуют стандартным цветам Bootstrap. Таким образом, если мы еще раз вернемся к этой странице, обратите внимание, что наша правая колонка оформлена в голубом цвете. Давайте посмотрим, что произойдет, если мы уменьшим страницу. Как видите, наша правая колонка начинает перекрывать изображения. Вы догадываетесь, почему это происходит? В любом случае, я просто вам скажу. Дело в том, что к этим изображениям для карусели не применен класс image-responsive.

Так как у них отсутствует класс image-responsive, их размер не меняется по мере того, как уменьшается мое окно браузера. Конечно, когда они станут частью карусели, они будут изменять размер, но на данный момент они остаются неизменными. Просто представьте, что эти картинки будут уменьшаться вместе со страницей, а правая колонка не будет их перекрывать. Далее, когда мы встретим эту точку перехода, опять же, хотя наши изображения не изменяются, но колонка с информацией об отелях сейчас смещается в самый низ страницы, как и следовало ожидать, потому что она находилась справа.

Теперь она находится под отзывами - запомните, отзывы у нас находятся в той же таблице, что и карусель. ОК, конечно, мы можем и дальше уменьшать страницу, но больше в макете ничего не изменится, за исключением заголовка и навигационной панели, что вы уже видели раньше. Таким образом, прежде чем начать, я хочу внести сюда одно изменение, которое касается стилей для правой панели. Она прекрасно смотрится в голубом цвете, но он не соответствует нашей цветовой схеме. Поэтому я хотела бы добавить дополнительные стили CSS в файл custom.css.

Они заменят цвета заголовка и рамки панели на фиолетовый. Если помните, в предыдущей главе мы изменили цвет кнопки "Read more" на фиолетовый (это было частью задачи). ОК, теперь я открою файл custom.css и прокручу его вниз. Здесь, сразу после стилей, которые мы добавили во второй главе, но до медиа-запроса, я добавлю стили для панели на главной странице.

Итак, .panel-primary и .panel-heading. Так они были записаны в HTML. Как видите, здесь, на строке 66, у нас есть блок div с классом panel-heading, он находится внутри блока div с классами panel и panel-primary. Итак, мы хотим, чтобы для всех блоков с классом panel-heading внутри блоков с классом panel-primary использовался цвет фона 602f8d и цвет рамки 603f8d.

Затем мы добавим сюда еще один стиль для панели. Но прежде чем ввести его, я хочу показать вам, что у нас есть на данный момент. Если вы сохраните файл CSS и обновите страницу, то увидите, что стиль для заголовка применен, но рамка осталась голубой. Эта синяя рамка определена в стиле panel. Таким образом, мы добавим здесь стиль panel. Все, что нам нужно сделать, - это изменить цвет панели, поэтому мы записываем свойство border-color со значением 602F8D.

Итак, мы добавили здесь всего лишь два стиля и записали один и тот же цвет уже три раза. И конечно, этот цвет будет появляться в нашем файле CSS еще много раз, если мы прокрутим эту страницу вверх или вниз. Поэтому по мере того, как мы будем создавать все больше стилей для нашего сайта, мы можем применить здесь файлы lass или sass, которые входят в Bootstrap. Вы можете изменить для этой страницы только один цвет - primary, чтобы заменить голубой фиолетовым в один прием.

Все элементы, к которым применен цвет primary, будут окрашены в фиолетовый.