Мы в сети

VK
FB

Оформите подписку!

 Введите Ваш E-m@il и
получайте свежие новости

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

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

Страница автора - Андрей Кудлай - Webformyself
Страница автора

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

Прямо сейчас забирайте БЕСПЛАТНО пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap от наиболее авторитетного в Рунете обучающего издательства для веб-мастеров WebForMyself. За ближайшие 7 дней вы повысите СКОРОСТЬ качественной адаптивной верстки по меньшей мере в два раза и сможете пропорционально повысить свои доходы. После изучения видеоуроков данного курса вы освоите ВСЕ базовые знания по фреймворку Bootstrap.

Смотреть видео:

Фреймворк Bootstrap. УРОК №1. CSS фреймворки. Установка. (Андрей Кудлай - Webformyself)

Содержание:

  • УРОК №1. CSS фреймворки. Установка фреймворка Bootstrap

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

  • УРОК №2. Верстка навигационной панели

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

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

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

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

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

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

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

  • УРОК №6. Верстка контентной части

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

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

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

  • УРОК №8. Верстка и оформление футера

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