Курс по Фреймворк Bootstrap 4 2017

Предлагаем вашему вниманию курс «Фреймворк Bootstrap 4». Как следует из названия, курс будет посвящен изучению одного из наиболее популярных CSS фреймворков – Bootstrap. На момент записи курса актуальна версия Bootstrap v.4.0.0-alpha.6, именно с этой версией мы и будем работать здесь.
Основной фишкой курса будет являться тот факт, что кроме изучения актуальной версии фреймворка, мы значительное внимание будем уделять также и предыдущей, третьей версии Bootstrap. В частности, при изучении сетки мы будем сравнивать обе версии Bootstrap, чтобы увидеть, насколько удобнее в работе Bootstrap 4.
Относительное содержания курса, вот лишь некоторый список вопросов, которые мы будем рассматривать:

- варианты установки Bootstrap и какой из вариантов в каком случае выбрать;
- основные отличия Bootstrap 3 от Bootstrap 4;
- сетка Bootstrap 4 и ее отличия от сетки предыдущей версии;
- новые классы сетки Bootstrap;
- работа с компонентами;
- варианты кастомизации Bootstrap;
и т.д…

Итак, жду вас в новой серии уроков, посвященных замечательному CSS фреймворку – Bootstrap 4.

Урок 1. Фреймворк Bootstrap 4. Что такое Bootstrap. Отличия Bootstrap 3 от Bootstrap 4:
От автора: этим уроком мы открываем небольшой цикл по изучению CSS фреймворка Bootstrap. В уроке мы с вами ответим на вопрос – что такое Bootstrap, рассмотрим преимущества использования фреймворка по сравнению с нативной версткой, а также поговорим о некоторых отличиях Bootstrap 4 от Bootstrap 3.
В данном курсе, к слову, мы будем работать с последней на момент записи версией фреймворка Bootstrap 4.


Урок 2. Фреймворк Bootstrap 4. Установка Bootstrap 4. Варианты установки:
От автора: в этом уроке мы установим фреймворк Bootstrap. При этом мы установим сразу две его версии: Bootstrap 3 и Bootstrap 4. Предыдущая версия фреймворка нам пригодится для сравнения старой и новой версии в процессе изучения сетки Bootstrap.
В уроке мы рассмотрим два варианта установки, а также проанализируем стартовый шаблон Bootstrap.


Урок 3. Фреймворк Bootstrap 4. Сетка Bootstrap 4. Часть 1:
От автора: в этом уроке мы приступим к изучению ключевой возможности любого CSS фреймворка вообще и фреймворка Bootstrap 4 в частности – речь идет о сетке. Именно сетка Bootstrap позволяет нам создавать ровные и аккуратные макеты, которые уже изначально являются адаптивными и отлично смотрятся на любом устройстве, будь то десктоп, планшет или смартфон. В этом уроке мы рассмотрим теорию сеток CSS фреймворков.


Урок 4. Фреймворк Bootstrap 4. Сетка Bootstrap 4. Часть 2:
От автора: в этом уроке мы продолжим изучение сетки Bootstrap 4 и работу с этим замечательным инструментом. В уроке мы рассмотрим опции сетки, понятие контрольных точек (breakpoints), а также рассмотрим ключевые классы сетки. Практически все они работают как в четвертой, так и в третьей версии фреймворка, поэтому урок будет полезен, если вы хотите изучить обе версии Bootstrap.


Урок 5. Фреймворк Bootstrap 4. Сетка Bootstrap. Часть 3. Колонки одной ширины:
От автора: в этом уроке мы продолжим изучение сетки Bootstrap и работу с этим замечательным инструментом. В уроке мы познакомимся с новой возможностью в Bootstrap – создание колонок одинаковой ширины. Этой возможности порой недоставало в предыдущей версии Bootstrap.


Урок 6. Фреймворк Bootstrap 4. Сетка Bootstrap. Часть 4. Выравнивание:
От автора: в этом уроке мы продолжим изучение сетки Bootstrap и работу с этим замечательным инструментом. В уроке мы познакомимся с новыми классами Bootstrap 4, благодаря которым мы легко можем выравнивать блоки относительно горизонтальной или вертикальной оси. Например, используя лишь два класса, мы сможем быстро решить задачу центрирования элемента как по горизонтали, так и по вертикали.


Урок 7. Фреймворк Bootstrap 4. Сетка Bootstrap. Часть 5. Порядок колонок:
От автора: в этом уроке мы продолжим изучение сетки Bootstrap и работу с этим замечательным инструментом. В уроке мы познакомимся с классами Bootstrap 4, используя которые, мы сможем изменять порядок колонок. Например, классической задачей может быть изменение порядка сайдбара и контента на мобильной версии сайта.


Урок 8. Фреймворк Bootstrap 4. Сетка Bootstrap. Часть 6. Responsive utilities:
От автора: в этом уроке мы продолжим изучение сетки Bootstrap и работу с этим замечательным инструментом. В уроке мы познакомимся с набором классов, которые позволяют скрывать или показывать элементы в зависимости от используемого брейкпойнта. Это очень полезная возможность, которую предлагает нам набор классов responsive utilities.


Урок 9. Фреймворк Bootstrap 4. Медиа объект Bootstrap:
От автора: в этом уроке мы познакомимся с примерами использования компонента медиа объект (media object) в Bootstrap. Данный компонент представляет из себя небольшое изображение в левой части строки и некоторый текст в правой части. Соответственно, медиа объект хорошо подойдет для реализации таких вещей, как комментарии, например.


Урок 10. Фреймворк Bootstrap 4. Адаптивные изображения и видео в Bootstrap:
От автора: В этом уроке мы узнаем, как реализовать адаптивность изображений и видео в Bootstrap 4. Благодаря всего нескольким классам мы с легкостью получим адаптивные изображения и видео в Bootstrap.


Урок 11. Фреймворк Bootstrap 4. Таблицы в Bootstrap:
От автора: в этом уроке мы поработаем с таблицами в Bootstrap. По умолчанию таблицы без классов не оформлены и выглядят не очень презентабельно. Однако, стоит добавить таблице всего-навсего один класс table, как таблица преобразится и будет выглядеть достаточно интересно. Также Bootstrap предлагает ряд дополнительных классов, позволяющих оформлять и украшать таблицы. Кроме того, мы рассмотрим новый класс Bootstrap 4, который позволят реализовать симпатичную темную таблицу.


Урок 12. Фреймворк Bootstrap 4. Кнопки в Bootstrap:
От автора: одним из часто используемых на сайте элементов являются кнопки. В Bootstrap 4 кнопки фактически остались теми же, что и в предыдущей версии, но появились и новые возможности. Получить симпатичную кнопку в Bootstrap очень просто – достаточно использовать ключевой класс btn и дополнительный класс для цветового оформления кнопки. При этом добавлять эти классы мы можем не только кнопкам, но и, к примеру, ссылкам. В результате ссылка ничем не будет отличаться от кнопки.


Урок 13. Фреймворк Bootstrap 4. Компонент карточки в Bootstrap:
От автора: одним из новых компонентов Bootstrap 4 являются карточки. Это достаточно полезный компонент, который можно использовать для различных сайтов. Например, в интернет-магазине данный компонент можно использовать для карточки товара, который выводится в списке других товаров. В блоге данный компонент идеально подойдет для ленты постов. В этом уроке мы с вами рассмотрим различные варианты работы с компонентом карточка в Bootstrap.


Урок 14. Модальные окна Bootstrap:
От автора: данный урок мы посвятим работе с компонентом модального окна в Bootstrap. Благодаря модальным окнам мы можем компактно разместить любые данные нашего сайта, спрятав их изначально и показывая в модальном окне при клике или же по какому-то событию. В уроке мы рассмотрим варианты вызова модального окна при клике и программно.


Урок 15. Кастомизация Bootstrap:
От автора: в этом уроке мы рассмотрим два варианта кастомизации Bootstrap. Первый вариант заключается в создании файла темы, который фактически будет переопределять нужные правила Bootstrap. Например, изменение цвета кнопок, радиуса скругления и т.п. Второй способ заключается в изменении переменных исходников Bootstrap и компиляции нового css файла фреймворка из измененных исходников.