Bootstrap 5: Основы верстки

Включено в курс

Чему вы научитесь

• Использовать механизм 12-колоночной сетки.
• Работать с текстом и таблицами, используя возможности Bootstrap.
• Использовать стандартные компоненты.
• Применять встроенные утилиты при создании шаблона.
• Создавать свои собственные компоненты.

Описание

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

Bootstrap — это фреймворк, основанный на предоставлении готовых классов, компонентов и функций/миксинов на препроцессоре SASS.

В этом курсе мы рассмотрим возможности Bootstrap как библиотеки. Для его изучения нужны базовые знания о вёрстке контента и позиционировании с помощью модуля Flex. Эти темы разбираются в курсах:

• https://ru.hexlet.io/courses/css-content[Основы верстки контента]
• https://ru.hexlet.io/courses/css-flex[CSS: Основы Flex]

При изучении внутреннего устройства Bootstrap понадобится знание препроцессора SASS, который позволяет внести больше логики при написании CSS: функции, миксины, циклы и так далее. Этому препроцессору посвящено два курса:

• https://ru.hexlet.io/courses/css-sass[SASS: Основы работы]
• https://ru.hexlet.io/courses/sass-programming[SASS: Программирование]

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

• 1

  Введение

  Познакомимся с фреймворком Bootstrap и изучим план курса

  теория
• 2

  Почему Bootstrap

  Узнаем о плюсах и минусах Bootstrap. Увидим, где используется Bootstrap и для чего его можно применять

  теория
• 3

  Установка Bootstrap

  Научимся подключать Bootstrap к странице. Узнаем о разных способах подключения и инструментах для этого

  теория

  тесты

• 4

  Сетка

  Изучим концепцию сеток в Bootstrap. Узнаем виды контейнеров

  теория

  тесты

  упражнение

• 5

  Адаптивность

  Узнаем о принципах адаптивности в Bootstrap. Научимся адаптировать сетку

  теория

  тесты

  упражнение

• 6

  Работа с текстом

  Изучим возможности при работе с текстом в Bootstrap. Узнаем о RFS и изменении стандартных шрифтов проекта

  теория

  тесты

  упражнение

• 7

  Таблицы

  Научимся работать с таблицами, используя возможности Bootstrap. Узнаем о доступности таблиц

  теория

  тесты

  упражнение

• 8

  Компоненты

  Узнаем о компонентах Bootstrap и изучим устройство их работы

  теория

  тесты

  упражнение

• 9

  Утилиты

  Узнаем об утилитах. Изучим принципы работы, строение и когда стоит использовать утилиты в Bootstrap

  теория

  тесты

  упражнение

• 10

  Bootstrap Icons

  Научимся использовать иконки из библиотеки Bootstrap Icons

  теория

  тесты

• 11

  Самостоятельная работа

  Дополнительные задания, которые позволяют закрепить полученную теорию
• 12

  Дополнительные материалы

  Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

Отзывы

Maxim Dzyubak 08 марта 2023

Благодарю за хороший курс по bootstrap. Писать самому html и css больше не хочется)))

Vlad 12 декабря 2022

Спасибо большое за курс! Сделал жене сайт-визитку на BS - она и все кому отправляет в восторге просто. А вот не учился бы на Hexlet, так и пришлось бы к кому-нибудь идти за сайтом, а и не факт, что сделали бы так, чтобы нормально...