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

Видео урок: Планирование галереи миниатюр

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

Теперь, когда мы загрузили все файлы, установили Bootstrap, jQuery и интегрировали тренировочные файлы, мы можем просмотреть исходную страницу execs.html, чтобы понять, какой в ней содержится код, и как мы можем его изменить. Для этого нам в первую очередь нужно настроить Sublime Text. Если вы используете его в первый раз, ваш экран, вероятно, выглядит следующим образом. Для начала лучше всего настроить проект в Sublime Text. Для этого мы можем выбрать меню "Project -> Add Folder to Project", после чего перейдем на рабочий стол, найдем папку Bootstrap и нажмем "ОК".

У вас должен появиться список всех файлов и папок, которые лежат в папке Bootstrap, с левой стороны экрана. Очень удобно, когда все файлы, с которыми вы работаете, находятся прямо под рукой. Второе, что я хочу сделать, - это изменить цветовую схему, потому что, если вы откроете execs.html (просто дважды кликните по нему), вы увидите, что текущая цветовая схема немного давит на глаза. Итак, я хотела бы сменить ее на какую-нибудь другую, чтобы код стал немного более читабельным. Это можно сделать в меню "Preferences -> Color Scheme", и вы можете хоть час перебирать цветовые схемы в поиске наиболее подходящей, но моя любимая - iPlastic. В ней используется только синий и голубой, благодаря чему читать код довольно удобно.

Возможно, вы посчитаете, что шрифт для вашего компьютера немного мал или велик. Размер шрифта настраивается очень легко в меню "Preferences -> Font", или вы можете использовать горячие клавиши на клавиатуре (которые будут отличаться для Mac и ПК), чтобы сделать размер шрифта больше или меньше. Если вы используете ПК, то нажмите на клавиатуре клавишу Ctrl и знак плюса или минуса, который находится над маленькой цифровой клавиатурой справа.

Давайте сделаем это. Я внесу еще одно изменение в работу Sublime Text. Возможно, вам нравится шрифт, который используется по умолчанию. Я изменю у себя шрифт на Calynda. Calynda очень хорошо выглядит в сжатых видео, поэтому я его и выберу. Для этого нужно перейти в меню "Preferences -> Settings -> User", и у нас появится страница, на которой можно изменить некоторые настройки по умолчанию, которые уже установлены в меню.

Мы изменим шрифт. Итак, я поставлю запятую после font_size 16, а потом введу в двойных кавычках "font_face", поставлю двоеточие и введу название гарнитуры шрифта в кавычках, "Calynda". ОК, давайте сохраним эти настройки в меню "File -> Save", и вы увидите, что шрифт изменится в тот же момент. Если я просто закрою эту вкладку и вернусь к файлу execs.html, вы увидите, что все настройки применены.

И последнее изменение, которое мы собираемся сделать, будет связано с этой маленькой картой в правом углу. Она полезна тем, что с ее помощью вы можете быстро прокручивать страницу. Это удобно, если вы будете работать с действительно длинными файлами, но, вообще говоря, меня она немного отвлекает, и я хочу ее отключить. Карта называется "Minimap", и если вы зайдете в меню "View", то увидите, что по умолчанию она включена. Если вы хотите ее убрать, просто нажмите "Hide Minimap", и весь экран будет занимать только ваш код HTML. ОК. Теперь, когда мы настроили все, что нам нужно, давайте более внимательно изучим код этого конкретного файла.

Таким образом, как видите, вверху документа находится типичная секция head. Здесь у нас есть ссылки на таблицы стилей. На 8-й строке находится ссылка на минифицированную версию стилей Bootstrap, которую мы только что скачали. У нас также есть ссылка на пользовательскую таблицу стилей из тренировочных файлов. Немного ниже, на 12-й строке, начинается тело документа. В первую очередь на 13-й строке здесь находится блок div с классом container.

Он содержит весь код Bootstrap, который используется на данной странице. Первым в этом блоке находится заголовок, и я использовала здесь тег header, который, как я думаю, будет более семантически правильным. Вместо него можно было бы использовать тег div, но я использую семантически правильный тег header. Заголовок представляет собой табличный ряд (row), и внутри него у нас есть логотип отеля Лэндон, за которым следует его слоган. На 18-й строке начинается наша навигация, и весь этот ряд содержит панель навигации. Здесь много кода позаимствовано из курса "Bootstrap 3 для начинающих".

Таким образом, первая часть этого кода - это базовая часть панели навигации с кнопкой-переключателем. С 31-й строки начинается та часть навигационной панели, которая будет сворачиваться за кнопкой-гамбургером при меньшем разрешении страницы. И наконец, на 42-й строке начинается маркированный список миниатюр. Прямо сейчас они ни к чему не привязаны. Со временем мы это изменим. Далее у нас идет футер - это просто дисклеймер, который мы разместили в нижней части страницы.

Наконец, на 58-й строке находятся ссылки сначала на jQuery, а потом на Bootstrap. Если вы не переименовали у себя файл jQuery, убедитесь, что название вашего файла jQuery и имя, указанное в коде в нижней части этой страницы, совпадают. Для этого либо переименуйте свой файл jQuery, который вы загрузили с официального сайта, на jquery.min.js, или поместите в код HTML имя файла jQuery, с которым вы работаете.

Или вам нужно будет изменить эту строку кода так, чтобы она указывала на CDN - либо Google, либо jQuery, в которой находится ваша копия jQuery. Возможен любой из этих вариантов. В веб-разработке всегда необходимо проверять, соответствуют ли имена файлов в коде HTML названиям файлов на диске. Итак, теперь, когда мы ознакомились с кодом этой страницы, давайте посмотрим, как он отобразится в браузере. Если вы откроете эту страницу в браузере, вы увидите ряд изображений, расположенных вертикально, - это наши миниатюры.

Рядом с ними вы увидите маркеры. Их добавляет разметка неупорядоченного списка, которая сейчас используется на странице. Мы пока не добавили никаких специальных стилей Bootstrap, чтобы убрать их. Мы сделаем это в последующих видео. И внизу страницы вы увидите футер. Если мы сделаем эту страницу меньше, вы увидите, что размер табличной системы переключается с большого на средний, затем на малый, и наконец, все выстраивается вертикально. Таким образом, теперь наш логотип находится над слоганом, и как видите, меню никуда не делось. Оно скрыто за кнопкой-гамбургером, прямо здесь на странице. Наконец, последнее, что я хочу рассмотреть, - это таблица стилей custom.css, просто чтобы вы знали, что в ней есть. Вот несколько стилей, которые я написала специально для этого макета сайта. Они не включены в сам Bootstrap. И все они применяются в нашем исходном макете сайта. Итак, первый стиль - это logo. Кстати, эти первые стили - logo и tagline - применяются при малых разрешениях.

Помните, наш код в первую очередь ориентирован на мобильные устройства (принцип "mobile first"). Таким образом, это макет для самых маленьких разрешений, ниже 768 пикселей. За ними следует несколько стилей для футера. Они применяются при всех разрешениях. И наконец, внизу таблицы стилей у меня есть медиа-запрос, благодаря которому для ширины более 768 пикселей и больше будут применяться другие стили. В этом случае мы будем смещать логотип влево, слоган - вправо, также мы сделаем размер шрифта немного больше и увеличим внутренние границы элементов (свойство padding).

Вы можете увидеть, как это работает на данной странице. Здесь шрифт слогана немного меньше, а затем, когда я сделаю размер страницы больше, размер шрифта увеличится. Итак, теперь, надеюсь, вы знакомы с файлами custom.css и execs.html и готовы перейти к созданию галереи миниатюр.