Мини - Курс "Фреймворк Bootstrap 4. Быстрый старт"

Описание
Программа курса
Видео
События

Тематика
Веб – разработка | Создание сайтов и блогов

Издательство

WebForMySelf

Автор

Андрей Кудлай

БЕСПЛАТНО

ПРОЙТИ ОБУЧЕНИЕ

ПОДРОБНОЕ ОПИСАНИЕ

Автор(ы): Андрей Кудлай

Представляем вам мини-курс «Bootstrap 4. Быстрый старт». Курс включает в себя 9 небольших уроков общей продолжительностью почти 2 часа. В курсе показана верстка макета из PSD с применением CSS-фреймворка Bootstrap 4. Bootstrap – это популярнейший на сегодняшний день CSS фреймворк, который позволяет быстро и просто верстать ровные и аккуратные макеты сайтов. Первая версия фреймворка увидела свет в 2011 году. С тех пор фреймворк развивался и сегодня актуальна уже четвертая версия Bootstrap. Посмотрев уроки предлагаемого курса, вы получите представление о Bootstrap и увидите, насколько данный фреймворк упрощает верстку сайта и позволяет сверстать полностью адаптивную страничку реального сайта в разы быстрее, по сравнению с версткой без использования CSS фреймворков. В уроках будут затронуты такие темы, как работа с сеткой Bootstrap и использование некоторых из компонентов фреймворка, например, Navbar и Carousel.

Фреймворк Bootstrap 4. Быстрый старт. Урок №1. Стартовый шаблон Bootstrap. (Андрей Кудлай - Webformyself)
- Урок №1. Стартовый шаблон Bootstrap
В этом видео вы увидите подготовку к верстке шаблона с использованием CSS фреймворка Bootstrap версии 4. В частности, в видео будет проанализирован шаблон PSD, будет взят стартовый шаблон Bootstrap, который предлагается в качестве заготовки для верстки в документации фреймворка, будут подключены шрифты с сервиса шрифтов Google Fonts. Также в уроке будет рассказано о вариантах подключения Bootstrap к шаблону и о преимуществах использования CSS фреймворков для верстки.
- Урок №2. Компонент Navbar
Используемый в уроках шаблон предполагает наличие в шапке навигационной панели, в левой части которой находится логотип, а в правой части – меню сайта. Эту структуру можно очень быстро получить, если воспользоваться одним из готовых компонентов Bootstrap – это компонент Navbar. В уроке вы увидите, как использовать компонент Navbar, как выравнивать элементы в нем, как можно кастомизировать содержимое навигационной панели. Также в видео будет показан вариант симпатичного эффекта анимации для меню.
- Урок №3. Компонент Carousel
Практически на любом сайте можно встретить различные типовые элементы, одним из которых является слайдер. Для реализации слайдеров можно подыскать какой-нибудь jQuery плагин и подключить его к сайту. Однако, используя Bootstrap, этого делать не обязательно. Bootstrap предлагает из коробки компонент карусели, который позволяет получить симпатичный слайдер. В данном видео вы увидите использование компонента Carousel из набора Bootstrap и варианты его настройки под себя.
- Урок №4. Одиночный пост
В этом видеоуроке будет показана верстка и оформление секции с одиночным постом. Это довольно простая секция, в которой находится наименование статьи, краткое ее содержание и ссылка на полный текст статьи.
- Урок №5. Сетка постов
Следующая секция макета, которая будет сверстана в этом видео, это секция с сеткой постов. Статьи выводятся по два в ряд и представлены они в виде карточек. Соответственно, для оформления этих статей можно будет использовать компонент карточки, который появился в четвертой версии Bootstrap. В этом видео вы увидите использование компонента Card, а также один из вариантов выравнивания изображений разной высоты в карточке.
- Урок №6. Кнопка Load More
В макете, верстка которого показана в данных уроках, имеется кнопка Load More, смысл которой – получение записей при клике по кнопке. Делается это при помощи AJAX’a. Из этого видео вы узнаете, как можно решить эту задачу. Также в видео показано использование нового для Bootstrap компонента – это компонент Spinners. Используя его, можно добавить для кнопки эффект анимации, который даст понять пользователю, что происходит загрузка данных.
- Урок №7. Секция с формой
Последней секцией макета, верстка которой показана в этом уроке, будет секция с формой. Среди прочего, Bootstrap предлагает различные варианты оформления для форм, один из которых и будет использован в этом уроке. Посмотрев данное видео, вы узнаете, как можно дополнительно стилизовать поля формы. Также в видео будет показано интересное решение для реализации кнопки формы, в качестве которой будет использована иконка из таблицы символов Юникода.
- Урок №8. Футер сайта
Неотъемлемым элементом практически любого макета сайта является его футер. В этом видео будет показана верстка футера, а также использование классов-помощников Bootstrap для выравнивания элементов футера.
- Урок №9. Адаптивность сайта
Одним из плюсов использования CSS фреймворка Bootstrap является тот факт, что, применяя в верстке сетку Bootstrap, мы должны получить адаптивный сайт из коробки. Однако, это не избавляет полностью от необходимости дополнительного использования медиа-запросов. Так или иначе приходится писать дополнительные CSS правила для определения поведения тех или иных элементов на различных устройствах. В этом видео будет показано написание таких медиа-запросов для того, чтобы все элементы сайта хорошо смотрелись на различной ширине экрана.
Фреймворк Bootstrap 4. Быстрый старт. Урок №1. Стартовый шаблон Bootstrap. (Андрей Кудлай - Webformyself)
06 августа 2019
Летняя распродажа 2019 года от команды WebForMySelf