Урок 1. Стартовый шаблон Bootstrap

• Тема: Bootstrap
• Время ролика: 15:53
• Cложность: легкая
• Автор: Кудлай Андрей

В этом видео вы увидите подготовку к верстке шаблона с использованием CSS фреймворка Bootstrap версии 4. В частности, в видео будет проанализирован шаблон PSD, будет взят стартовый шаблон Bootstrap, который предлагается в качестве заготовки для верстки в документации фреймворка, будут подключены шрифты с сервиса шрифтов Google Fonts.

Также в уроке будет рассказано о вариантах подключения Bootstrap к шаблону и о преимуществах использования CSS фреймворков для верстки.

Урок 2. Компонент Navbar

• Тема: Bootstrap
• Время ролика: 18:30
• Cложность: легкая
• Автор: Кудлай Андрей

Используемый в уроках шаблон предполагает наличие в шапке навигационной панели, в левой части которой находится логотип, а в правой части – меню сайта. Эту структуру можно очень быстро получить, если воспользоваться одним из готовых компонентов Bootstrap – это компонент Navbar.

В уроке вы увидите, как использовать компонент Navbar, как выравнивать элементы в нем, как можно кастомизировать содержимое навигационной панели. Также в видео будет показан вариант симпатичного эффекта анимации для меню.

Урок 3. Компонент Carousel

• Тема: Bootstrap
• Время ролика: 10:29
• Cложность: легкая
• Автор: Кудлай Андрей

Практически на любом сайте можно встретить различные типовые элементы, одним из которых является слайдер. Для реализации слайдеров можно подыскать какой-нибудь jQuery плагин и подключить его к сайту. Однако, используя Bootstrap, этого делать не обязательно. Bootstrap предлагает из коробки компонент карусели, который позволяет получить симпатичный слайдер.

В данном видео вы увидите использование компонента Carousel из набора Bootstrap и варианты его настройки под себя.

Урок 4. Одиночный пост

• Тема: Bootstrap
• Время ролика: 06:29
• Cложность: легкая
• Автор: Кудлай Андрей

В этом видеоуроке будет показана верстка и оформление секции с одиночным постом. Это довольно простая секция, в которой находится наименование статьи, краткое ее содержание и ссылка на полный текст статьи.

Урок 5. Сетка постов

• Тема: Bootstrap
• Время ролика: 10:42
• Cложность: легкая
• Автор: Кудлай Андрей

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

В этом видео вы увидите использование компонента Card, а также один из вариантов выравнивания изображений разной высоты в карточке.

Урок 6. Кнопка Load More

• Тема: Bootstrap
• Время ролика: 16:33
• Cложность: легкая
• Автор: Кудлай Андрей

В макете, верстка которого показана в данных уроках, имеется кнопка Load More, смысл которой – получение записей при клике по кнопке. Делается это при помощи AJAX’a.

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

Урок 7. Секция с формой

• Тема: Bootstrap
• Время ролика: 15:00
• Cложность: легкая
• Автор: Кудлай Андрей

Последней секцией макета, верстка которой показана в этом уроке, будет секция с формой. Среди прочего, Bootstrap предлагает различные варианты оформления для форм, один из которых и будет использован в этом уроке.

Посмотрев данное видео, вы узнаете, как можно дополнительно стилизовать поля формы. Также в видео будет показано интересное решение для реализации кнопки формы, в качестве которой будет использована иконка из таблицы символов Юникода.

Урок 8. Футер сайта

• Тема: Bootstrap
• Время ролика: 09:40
• Cложность: легкая
• Автор: Кудлай Андрей

Неотъемлемым элементом практически любого макета сайта является его футер. В этом видео будет показана верстка футера, а также использование классов-помощников Bootstrap для выравнивания элементов футера.

Урок 9. Адаптивность сайта

• Тема: Bootstrap
• Время ролика: 08:00
• Cложность: легкая
• Автор: Кудлай Андрей

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

В этом видео будет показано написание таких медиа-запросов для того, чтобы все элементы сайта хорошо смотрелись на различной ширине экрана.

Видео презентация курса «Фреймворк Bootstrap 4. Руководство по адаптивной верстке»

• Тема: фреймворк Bootstrap
• Время курса: более 15 часов
• Cложность: легкая/средняя/сложная
• Автор: Кудлай Андрей

Представляю вам презентацию долгожданного курса «Фреймворк Bootstrap 4. Руководство по адаптивной верстке».