Бесплатный видеокурс "Фреймворк Bootstrap 4. Быстрый старт". (Андрей Кудлай - Webformyself)

Это электронный видеокурс
692
Бесплатный видео урок

Полная информация

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

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

    • Урок №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 правила для определения поведения тех или иных элементов на различных устройствах. В этом видео будет показано написание таких медиа-запросов для того, чтобы все элементы сайта хорошо смотрелись на различной ширине экрана.

  • ВСЕ МАТЕРИАЛЫ АВТОРА

    Видеокурс
    Видеокурс "Обработк...

    Видеокурс
    Видеокурс "Telegram...

    Видеокурс
    Видеокурс "Bootstra...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Видеокурс
    Видеокурс "Laravel....

    Бесплатный видеокурс
    Бесплатный видеокур...

    Видеокурс
    Видеокурс "Django. ...

    Бесплатный видеокурс
    Бесплатный видеокур...

    Видеокурс
    Видеокурс "Фреймвор...

    Бесплатный видео урок
    Бесплатный видеокур...

    Видео урок
    Видеокурс "Python. ...

    Видео урок
    Видеокурс "Фреймвор...

    Бесплатный видео урок
    Бесплатный видеокур...

    Видео урок
    Видеокурс "WordPres...

    Бесплатный видео урок
    Бесплатный видеокур...

    Видео урок
    Видеокурс "1С-Битри...

    Бесплатный видео урок
    Бесплатный видеокур...

    Видео урок
    Видеокурс "PHP-Маст...

    Видео урок
    Видеокурс "Интернет...

    Бесплатный видео урок
    Бесплатный видеокур...

    Видео урок
    Видеокурс "Фреймвор...

    Бесплатный видео урок
    Бесплатный видеокур...

    Видео урок
    Видеокурс "Фреймвор...

    Видео урок
    Видеокурс "Фреймвор...

    Бесплатный видео урок
    Бесплатный видеокур...

    Бесплатный видео урок
    Бесплатный видеокур...

    Видео урок
    Видеокурс "WordPres...

    Видео урок
    Видеокурс "WordPres...

    Видео урок
    Видеокурс "Премиум ...

    Видео урок
    Видеокурс "Премиум ...

    Видео урок
    Видеокурс "Премиум ...

    Бесплатный видео урок
    Бесплатный видеокур...

    Видео урок
    Видеокурс "Интернет...

  • СМОТРИТЕ БЕСПЛАТНЫЕ МИНИ - КУРСЫ АВТОРА

    Мини-курс
    Мини-курс "Фреймвор...

    Мини-курс
    Мини-курс "Django. ...

    Мини-курс.
    Мини-курс. "Фреймво...

    Мини-курс. Фреймворк Bootstrap 4. Быстрый старт. (Андрей Кудлай - Webformyself)
    Мини-курс. Фреймвор...

    CMS 1C-Битрикс быстрый старт, первые результаты. (Андрей Кудлай - Webformyself)
    Мини-курс. CMS 1C-Б...

    PHP. Прием платежей на сайте. (Андрей Кудлай - Webformyself)
    Мини-курс. PHP. При...

    OpenCart: быстрый старт. (Андрей Кудлай - Webformyself)
    Мини-курс. OpenCart...

    Фреймворк Yii2: теория и первая практика. (Андрей Кудлай - Webformyself)
    Мини-курс. Фреймвор...

    CakePHP - мощь и гибкость современного PHP-фреймворка. (Андрей Кудлай - Webformyself)
    Мини-курс. CakePHP ...

    Фреймворк Bootstrap. Верстаем адаптивно. (Андрей Кудлай - Webformyself)
    Мини-курс. Фреймвор...

    Премиум уроки по WordPress. (Андрей Бернацкий, Андрей Кудлай - Webformyself)
    Мини-курс. Премиум ...

    Создание интернет-магазина. (Андрей Бернацкий, Андрей Кудлай - Webformyself)
    Мини-курс. Создание...