Верстка с Bootstrap 3

CSS фреймворк Bootstrap - это популярный инструмент для создания сайтов. С Bootstrap вам не придется верстать сайты с нуля благодаря готовым компонентам. 

Верстка с Bootstrap 3
50 уроков50 уроков
СертификатСертификат
РусскийРусский
FructCode

Описание:

Bootstrap — это css-фреймворк с готовыми css-классами и html/jquery компонентами, с помощью которых, вы очень быстро сможете создать интерфейс веб-сайта, способный адаптироваться под мобильных устройства.
В уроках Bootstrap вы узнаете:

  • Что такое Grid-system и как позиционировать блоки на сайте
  • Как быстро сверстать веб-сайт с помощью Bootstrap
  • Как сделать горизонтальное и вертикальное меню
  • Какие существуют компоненты в Bootstrap
  • Как встроить адаптивный видеоплеер на сайт
  • Как вставить картинку на страницу и сделать ее адаптивной
  • Как быстро сделать карусель изображений на сайте

Уроки верстки Bootstrap построены таким образом, что вы сможете уже через несколько уроков Bootstrap создать основу каркаса сайта!
С помощью Bootstrap, верстка сайтов становиться похожа на сборку конструктора из деталей. Вы сможете за несколько минут встроить верстку на ваш сайт следующих популярных компонентов: Адаптивное горизонтальное меню, красивые кнопки, html-формы с дополнительными элементами, прогресс бар, каталог товаров и многое другое!
Создание сайтов на Bootstrap относится к Frontend(фронтенд) и специалисты со знанием Bootstrap ценятся на рынке труда.  

Программа курса:

Знакомство и установка

  • Знакомство с Bootstrap. Установка

Позиционирование блоков (Grid System)

  • Классы container и container-fluid
  • Grid System
  • Grid System. Класс row
  • Grid Stystem. Класс .row
  • Grid System. Позиционирование блоков
  • Grid System. Классы .col-lg-*, .col-md-*, col-xs-*, col-sm-*
  • Классы для позиционирования при разных размерах экрана
  • Класс hidden-*
  • Классы push и pull

Главная страница. Верхняя часть сайта

  • Navbar
  • Navbar toggle
  • Navbar. Логотип и слоган
  • Navbar. Стили для пунктов меню
  • Header. Логотип и слоган
  • Navbar. Продолжение
  • Navbar. Улучшим внешний вид для мобильного устройства
  • Header. Заключительная часть

Главная страница. Шаблон страницы

  • Структура шаблона страниц

Главная страница. Фильмы, сериалы, блог

  • Главная страница. Блок с фильмами
  • Главная страница. Блок с фильмами. CSS-стили
  • Главная страница. Блок с фильмами
  • Главная страница. Записи блога.
  • Главная страница. Классы кнопок

Главная страница. Левая часть сайта.

  • Главная страница. Левый блок
  • Panel
  • Главная страница. Левый блок. Часть 2
  • Главная страница. Левый блок. Часть 3
  • Panel. Part3
  • Главная страница. Левый блок. Часть 4
  • Panel. Part 4

Страница просмотра фильмов и сериалов

  • Страница просмотра фильмов. Адаптивный видеоплеер
  • Страница просмотра фильмов. Часть 2
  • Страница просмотра фильмов. Часть 3
  • Страница просмотра фильмов. Блок отзывы

Страницы Фильмы и Рейтинг фильмов

  • Страница Films. Часть 1
  • Страница Рейтинг фильмов