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

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

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

Итак, как ваши дела? Вы справились с задачей? Давайте я покажу вам, как я подошла к ее решению. Вот моя страница с галереей миниатюр. Я взяла фиолетовый цвет для слогана, который я также использовала в других местах, например, в ​​ссылках и так далее. И изменила цвет кнопок "Read more" на фиолетовый. Теперь, если вы откроете любое модальное окно, вы также увидите, что футер находится там, где и должен - разделительная черта совпадает с нижней границей изображения, и кнопка "Close", конечно, того же фиолетового цвета.

И как видите, здесь все выровнено и выглядит гораздо лучше, чем прежде. Итак, позвольте мне показать вам, как я это сделала. Давайте вернемся в Sublime Text и откроем файл custom.css. Итак, после стилей для футера, но до стилей для медиа-запроса я добавила несколько стилей и оставила комментарий, чтобы сообщить вам, что это стили для миниатюр и модальных окон. Если вы захотите еще раз просмотреть пользовательские стили для моего решения, то можете открыть файл custom.css из папки final в тренировочных файлах для этой главы.

ОК. Таким образом, я написала здесь кучу стилей, но вы можете еще не понимать, откуда я их взяла. Как видите, здесь, в строке 39, у меня есть класс button-primary, который применяет к элементу фиолетовый цвет. Но как я определила, что мне нужно изменить стили именно для этого класса? Кроме того, начиная с 43-й строки и до 47-й строки есть целый ряд псевдо-селекторов: состояния hover, focus и active для класса btn-primary. Вас может заинтересовать, почему мне вообще пришло в голову написать такие стили.

Что ж, на самом деле они есть в исходном файле Bootstrap. Bootstrap.min.css читать практически невозможно, но bootstrap.css вполне читабельный. Таким образом, если вы откроете этот файл, нажмите Ctrl или Cmd + F, и у вас появится маленькое поле для поиска. В выпадающем меню также есть пункт, где можно выполнить поиск. Как мы знаем, класс btn содержит большую часть базовых стилей для кнопок, а btn-primary, -success, -warning и другие обычно отвечают за изменение цветов, как мы знаем из опыта работы с Bootstrap.

Я просто выполнила поиск для btn-primary и нашла стили, которые изначально есть в Bootstrap. Затем я просто скопировала эти стили и добавила их в мой файл custom.css. А потом я изменила цвета соответственно для фона и границы. ОК. Таким образом мы изменили стили для кнопок. Затем в теле модального окна у нас были фотографии.

Если помните, вот это полноразмерное изображение и текст находятся внутри блока div с классом modal-body. И мы знаем, что к изображениям применены классы pull-left или pull-right, в зависимости от того, в какой стороне страницы они находятся. Итак, здесь я просто объединила эти два класса. Для всех классов pull- внутри класса modal body я добавила небольшую внутреннюю границу справа или слева соответственно. И наконец, класс modal-footer относится к нашему следующему блоку div, который содержит кнопку "Close".

Я присвоила ему свойство clear со значением both. Таким образом я отменяю обтекание, которое задают классы pull-left и pull-right (стили для этого находятся в базовых файлах CSS Bootstrap). Если бы мы этого не сделали, то линия, отделяющая футер, была бы здесь, и кнопка "Close" оказалась бы здесь, а не под самим изображением. Так как я присвоила свойство clear блоку div с классом modal-footer, мне не пришлось добавлять дополнительную разметку, только чтобы отменить обтекание.

Так как в этом блоке у нас был футер, и мы в любом случае хотели, чтобы он располагался внизу, атрибут clear мне кажется хорошим выбором. Что ж, вот так я решила эту задачу. Определенно, ее можно было решить разными способами: применить к кнопке "Read morе" другие цвета, сохранив цветовую гамму, или иначе разрешить проблемы с выравниванием. Даже если вы выберете другой способ, вы сможете получить отличный результат. Ваша страница должна вам нравиться - это единственный показатель того, решили вы эту задачу или нет.