Интерактивный курс программирования BOOTSTRAP на FructCode.
Bootstrap – это css-фреймворк с готовыми css-классами и html/jquery компонентами, с помощью которых вы очень быстро сможете создать интерфейс веб-сайта, способный адаптироваться под мобильные устройства.
В уроках Bootstrap вы узнаете:
- Что такое Grid-system и как позиционировать блоки на сайте
- Как быстро сверстать веб-сайт с помощью Bootstrap
- Как сделать горизонтальное и вертикальное меню
- Какие существуют компоненты в Bootstrap
- Как встроить адаптивный видеоплеер на сайт
- Как вставить картинку на страницу и сделать ее адаптивной
- Как быстро сделать карусель изображений на сайте.
Уроки верстки Bootstrap построены таким образом, что вы сможете уже через несколько занятий создать основу каркаса сайта!
План курса "Bootstrap 3":
- Знакомство с Bootstrap. Установка
- Классы container и container-fluid
- Задание 3: Тест
- Grid System
- Grid System. Класс row
- Задание 6: Тест
- Grid Stystem. Класс .row
- Grid System. Позиционирование блоков
- Grid System. Классы .col-lg-*, .col-md-*, col-xs-*, col-sm-*
- Задание 10: Тест
- Классы для позиционирования при разных размерах экрана
- Задание 12: Тест
- Класс hidden-*
- Классы push и pull
- Navbar
- Navbar
- Navbar. Продолжение
- Navbar toggle
- Navbar. Логотип и слоган
- Задание 20: Тест
- Navbar. Стили для пунктов меню
- Header. Логотип и слоган
- Navbar. Продолжение
- Задание 24: Тест
- Navbar. Улучшим внешний вид для мобильного устройства
- Header. Заключительная часть
- Header. Заключительная часть
- Структура шаблона страниц
- Структура шаблона страниц
- Задание 30: Тест
- Главная страница. Блок с фильмами
- Главная страница. Блок с фильмами. CSS-стили
- Главная страница. Блок с фильмами
- Главная страница. Записи блога.
- Главная страница. Классы кнопок
- Задание 36: Тест
- Главная страница. Левый блок
- Panel
- Главная страница. Левый блок. Часть 2
- Главная страница. Левый блок. Часть 3
- Panel. Part3
- Главная страница. Левый блок. Часть 4
- Panel. Part 4
- Страница просмотра фильмов. Адаптивный видеоплеер
- Страница просмотра фильмов. Часть 2
- Страница просмотра фильмов. Часть 3
- Страница просмотра фильмов. Блок отзывы
- Страница Films. Часть 1
- Страница Рейтинг фильмов
- Заключительная часть