Фреймворк Bootstrap 4. Быстрый старт

Урок 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. Руководство по адаптивной верстке»

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

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

Отказ от ответственности | Политика конфиденциальности | Согласие с рассылкой

Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения

Copyright, 2023 ИП Рог Виктор Михайлович, команда WebForMySelf.com Все права защищены.