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

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

  • БЕСПЛАТНО

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

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

    Представляем вам мини-курс «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)

ПОХОЖИЕ ТОВАРЫ