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

Видео урок: Задача по стилизации миниатюр и модальных окон

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

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

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

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

Я намекну: проблема в том, что текст обтекает картинки. Так что нужно сделать, чтобы отменить обтекание? Скорее всего, эта задача займет у вас около десяти минут, а свое решение я покажу вам в следующем видео.