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

Видео урок: Улучшение дизайна миниатюр при помощи заголовков

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

На данный момент у нас уже есть самый базовый код для галереи миниатюр и модальных окон. Итак, на этой странице у нас есть фотографии нескольких людей. Если мы нажмем на одну из них, то откроется модальное окно. Как я уже говорила, оформление не блещет, но функциональность на месте. Теперь на данной странице меня беспокоит еще кое-что. Как мне кажется, это очень загадочная страница. Я вижу фотографии этих прекрасных людей, но понятия не имею, кто они, и почему мне следует нажимать на их фотографии.

Так что было бы неплохо добавить к каждой миниатюре объяснение, кто эти люди. Может быть, подпись и кнопку с надписью вроде "читать далее". Что ж, об этом я и хотела бы поговорить в данном видео. Давайте перейдем к Sublime Text и прокрутим страницу до кода для миниатюр. Таким образом, мы возвращаемся на строку 44, на которой начинается первый элемент этого списка. В данный момент у нас здесь есть только код ссылки, внутри которого находится тег изображения.

И это, по сути, все. Теперь я немного отформатирую эти элементы. Вы можете оставить ссылку вокруг тега изображения, если хотите. Или вы можете ее переместить. Затем после тега изображения я собираюсь добавить блок div с классом caption. Внутри этого блока мы добавим следующую информацию. Я создам тег h3, например, с именем человека - Далия Лэндон, а затем также укажу здесь ее должность, которая, вероятно, заинтересует пользователей и побудит их нажать на ее фотографию, а не на чью-либо еще.

Президент и главный исполнительный директор. Вы можете добавить к амперсанду буквы amp и точку с запятой. Когда вы используете в тексте амперсанд с последующими буквами amp и точкой с запятой, то это, фактически, код HTML для амперсанда. Затем я добавлю сюда ссылку с текстом "Read more". По сути, мы собираемся создать такую же ссылку, что и здесь. Я просто скопирую весь этот код и добавлю к нему класс btn и btn-primary.

Таким образом, здесь у нас будет кнопка. Мы также можем добавить к ней тег role со значением button. Опять же, это для целей доступности. Затем мы введем "Read more", закроем ссылку и закроем абзац. Таким образом, этот код теперь будет отображать кликабельное изображение плюс имя сотрудника, его должность, и кнопку "Read more". Что ж, давайте сохраним эту страницу. И теперь, если вы перейдете в браузер и обновите ее, вы увидите, что миниатюра для Далии Лэндон выглядит совершенно по-другому.

Итак, у нас есть ее фотография, под ней - должность, "Президент и СЕО", и кнопка "Read more". Если мы нажмем кнопку "Read more", у нас откроется модальное окно, то же, что появляется при нажатии на фотографию. Таким образом, эта дополнительная информация, как я считаю, действительно улучшает страницу, потому что, опять же, сообщает пользователям, кто эти люди, почему им следует узнать больше о любом из них, а также она облегчит нам поисковую оптимизацию, потому что теперь на странице у нас есть хоть какой-нибудь текст. Итак, теперь я собираюсь добавить те же элементы, что и для Далии Лэндон, ко всем миниатюрам, а в следующем видео мы перейдем к новой теме.