Фреймворк Bootstrap – верстаем адаптивно, просто, быстро (видеокурс)

«В этом небольшом курсе мы с вами познакомимся с CSS фреймворком Bootstrap, буквально совсем чуть-чуть прикоснувшись к его возможностям. И в качестве примера сверстаем простой макет сайта-портфолио, нарисованный в минималистичном стиле.» © Андрей Кудлай

Из предлагаемой серии уроков вы узнаете ответы на следующие вопросы:

• Что такое CSS фреймворки?
• Что из себя представляет фреймворк Bootstrap?
• Что такое адаптивная верстка?
• Что такое сетка Bootstrap?
• И, главное, как использовать Bootstrap на практике?

В процессе верстки сайта вы поймете, в чем заключается преимущество использования CSS фреймворков перед версткой без их использования.

Заключается это преимущество в следующем — Bootstrap позволяет ускорить процесс верстки и полученная верстка будет аккуратной, ровной и, главное, адаптивной, то есть будет хорошо смотреться на любых типах устройств: смартфонах, планшетах, ноутбуках и десктопах.

Содержание видеокурса «Фреймворк Bootstrap – верстаем адаптивно, просто, быстро»

Общая продолжительность всех уроков составила всего 2 часа. А это значит, что чистый процесс (без объяснений) верстки сайта уложился бы максимум в 1 час времени. Согласитесь, это отличный результат даже для столь простого макета.

Урок 1. CSS фреймворки. Установка фреймворка Bootstrap

Из этого урока вы узнаете, что такое CSS фреймворки, для чего они нужны и что из себя представляет фреймворк Bootstrap. Также мы узнаем, в чем заключаются преимущества использования фреймворка Bootstrap перед обычной версткой, без использования CSS фреймворков, а именно: Bootstrap позволяет ускорить процесс верстки и полученная верстка будет аккуратной, ровной и, главное, адаптивной, то есть будет хорошо смотреться на любых типах устройств – смартфонах, планшетах, ноутбуках и десктопах. Bootstrap изначально предполагает адаптивную верстку.

Как итог урока мы создадим базовый шаблон Bootstrap, подключим необходимые файлы фреймворка, а также подключим шрифт с сервиса Google Fonts. Т.е. произведем установку Bootstrap.

Урок 2. Верстка навигационной панели

Начиная с текущего урока, мы приступим непосредственно к верстке имеющего у нас макета – сайт-портфолио. И начнем мы с самого первого элемента – шапки нашего сайта. Шапка в макете представлена навигационной панелью, на которой находятся следующие элементы: логотип, меню и иконки. Навигационная панель, которую нам необходимо сверстать, довольно непроста, с учетом того, что итоговый результат должен быть полностью адаптивным. Однако Bootstrap позволит значительно ускорить процесс ее верстки. Наличие уже готового компонента navbar у фреймворка Bootstrap позволит просто скопировать код навигационной панели и вставить ее на верстаемую страницу.

Как итог урока мы создадим верстку навигационной панели – наиболее сложного элемента текущего макета. В следующем уроке мы приступим к ее оформлению.

Урок 3. Оформление навигационной панели. Часть 1

В предыдущем уроке мы создали разметку навигационной панели, использовав компонент Bootstrap под названием navbar. Благодаря наличию уже готового компонента весь процесс верстки навигационной панели фактически свелся к процедуре копипаста: мы скопировали уже готовый код навигационной панели из документации Bootstrap и добавили скопированный код на нашу страницу. Осталось немного поправить вставленную разметку и уже через несколько минут мы получили готовую разметку шапки с навигационной панелью.

В этом уроке мы займемся стилизацией навигационной панели согласно требованиям имеющегося у нас макета.

В результате урока мы оформим сверстанную навиационную панель, чтобы ее внешний вид соответствовал нарисованному макету. Осталось лишь решить вопросы адаптивности навигационной панели, чтобы все достойно выглядело на любом устройстве.

Урок 4. Оформление навигационной панели. Часть 2

В предыдущем уроке мы оформили навигационную панель, и теперь она достойно выглядит на десктопах и ноутбуках. Однако на планшетах и смартфонах есть некоторые недостатки в оформлении, которые необходимо поправить. Этим мы и займемся в текущем уроке. В частности, мы добавим интересное решение для социальных иконок, скрывая их и заменяя одной иконкой при просмотре сайта на маленьких экранах.

Также мы добавим немного магии jQuery, чтобы открыть социальные иконки при необходимости.

В результате урока мы оформим навиационную панель для маленьких экранов и практически завершим работу с ней. В следующем уроке мы добавим несколько последних штрихов, чтобы получить идеальный результат.

Урок 5. Оформление навигационной панели. Часть 3

В этом уроке мы добавим несколько последних штрихов к оформлению компонента навигационная панель и в итоге получим идеальный результат – navbar будет отлично показан на различных типах устройств.

В результате урока мы закончим работу с навигационной панелью. Самый сложный элемент текущего макета готов – он адаптивен и отлично работает на любой доступной ширине экрана. Полагаю, вы уже заметили, что Bootstrap значительно ускорил и упростил процесс создания этого относительно непростого элемента сайта.

Урок 6. Верстка контентной части

В этом уроке мы начнем работать с контентной частью нашей страницы. Она довольно проста и на ее верстку у нас уйдет всего пара уроков. Здесь мы немного познакомимся с понятием сетки фреймворка Bootstrap, которую используем для верстки работ портфолио. Именно благодаря сетке нам в первую очередь и интересен Bootstrap, и именно сетка позволяет очень просто создавать страницы любой сложности, которые необходимым образом будут подстраиваться (адаптироваться) под различную ширину экрана.

В результате урока мы сверстаем область контента, которая благодаря сетке Bootstrap’a будет изначально адаптивной. В следующем уроке нам останется набросать несколько стилевых правил, чтобы добиться соответствия с макетом.

Урок 7. Оформление контентной части

В этом уроке мы займемся оформлением контентной части. Благодаря сетке Bootstrap контентная часть уже адаптивна и нам достаточно будет написать всего несколько дополнительных правил, чтобы получить отличный результат. Также в уроке мы используем еще один компонент Bootstrap – Pagination. Используя данный компонент, мы получим отличный современный вариант пагинации, потратив на это минимум времени.

В результате урока мы завершим работу с областью контента и получим полностью адаптивный ее вариант.

Урок 8. Верстка и оформление футера

В этом уроке мы сверстаем и оформим последний элемент нашего макета – футер. Это самый простой элемент на макете, поэтому урок будет самым коротким и простым.

В результате урока мы завершим работу над версткой сайта и получим его итоговый вариант, который будет целиком и полностью адаптивным.

Ваши ссылки: скачать видео