Основы Bootstrap (Бутстрап) — курс для начинающих, 10 уроков
курс
1132 студента 490 сообщений
Последнее обновление: 16 апреля 2023
Включено в курс
10 уроков (видео и/или текст)
8 упражнений в тренажере
24 проверочных теста
Самостоятельная работа
Дополнительные материалы
Помощь в «Обсуждениях»
Доступ к остальным курсам платформы
Чему вы научитесь
- Использовать механизм 12-колоночной сетки.
- Работать с текстом и таблицами, используя возможности Bootstrap.
- Использовать стандартные компоненты.
- Применять встроенные утилиты при создании шаблона.
- Создавать свои собственные компоненты.
Описание
На этом курсе вы изучите фреймворк Bootstrap. Вы узнаете больше о том, как использовать готовые компоненты Bootstrap и создавать свои собственные. В итоге вы научитесь использовать сетку, классы для адаптивности, стандартные компоненты.
Bootstrap пригодится, если вы решите создавать сайты на уже готовой системе или создавать прототипы будущих проектов. Знания из этого курса помогают программистам быстро создать рабочий проект, который можно показать всему миру. Этот курс подойдет тем, кто уже знает верстку и хочет сократить время на создание страниц. Чтобы учиться было проще, стоит заранее изучить основы верстки контента, Flex и адаптивность веб-сайтов.
HTML CSS3 CSS адаптивность Bootstrap 5 Верстка
Программа курса
Продолжительность 10 часов
Введение
Познакомиться с фреймворком Bootstrap и изучить план курса
теория
Почему Bootstrap
Узнать о плюсах и минусах Bootstrap. Увидеть, где используется Bootstrap и для чего его можно применять
теория
Установка Bootstrap
Научиться подключать Bootstrap к странице. Узнать о разных способах подключения и инструментах для этого.
теория
тесты
Сетка
Изучить концепцию сеток в Bootstrap.
Узнать виды контейнеров.теория
тесты
упражнение
Адаптивность
Узнать о принципах адаптивности в Bootstrap. Научиться адаптировать сетку.
теория
тесты
упражнение
Работа с текстом
Изучить возможности при работе с текстом в Bootstrap. Узнать о RFS и изменении стандартных шрифтов проекта.
теория
упражнение
Таблицы
Научиться работать с таблицами используя возможности Bootstrap.
Узнать о доступности таблицтеория
тесты
упражнение
Компоненты
Узнать о компонентах Bootstrap и изучить устройство их работы.
теория
тесты
упражнениеСоздание пользовательского компонента
Разработать пользовательский компонент цитат с использованием возможностей Bootstrap.
теория
упражнение
Утилиты
Узнать об утилитах.
Научиться создавать пользовательские утилиты с использованием стандартных средств Bootstrap 5теория
тесты
упражнение
Самостоятельная работа
Дополнительные задания, которые позволяют закрепить полученную теорию
Узнать виды контейнеров.
Узнать о доступности таблиц
Научиться создавать пользовательские утилиты с использованием стандартных средств Bootstrap 5Формат обучения
Испытания
Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже
Maxim Dzyubak08 марта 2023
Благодарю за хороший курс по bootstrap. Писать самому html и css больше не хочется)))
Vlad12 декабря 2022
Спасибо большое за курс! Сделал жене сайт-визитку на BS — она и все кому отправляет в восторге просто.
А вот не учился бы на Hexlet, так и пришлось бы к кому-нибудь идти за сайтом, а и не факт, что сделали бы так, чтобы нормально…
Рекомендуемые программы
Профессия
с нуляВерстальщик
Верстка с использованием последних стандартов CSS
в любое время 5 месяцев
Основы верстки от Hexlet по цене 3 900 руб. — Academy Market
На десятичасовом курсе от Хекслета вы познакомитесь с популярным у верстальщиков фреймворком Bootstrap. Вы начнете знакомство с его базовыми функциями, которые позволяют настраивать адаптивность верстки, использовать двеннадцатиколоночную сетку, создавать собственные рабочие компоненты и утилиты. Кроме теоретической базы, необходимой для начала работы, вы получите 24 проверочных теста и 7 практических упражнений, которые выполните с помощью тренажера. В конце обучения вы получите список источников для самостоятельного продолжения изучения Bootstrap.
Русский
Чему вы научитесь
Использовать фреймворк Bootstrap
Создавать сложные макеты
Создавать шаблоны, используя встроенные утилиты
Работать со стандартными компонентами и создавать свои
30 000 ₽ / Мес
Верстальщик
30 000 ₽ — 120 000 ₽
30 000 ₽ / Мес
Junior
Опыт до 1 года
Middle
Опыт 1–3 года
Senior
Опыт от 3 лет
На этом курсе вы познакомитесь с функциями фреймворка Bootstrap и научитесь применять их на практике.
Программа состоит из теоретических занятий, тестов и упражнений. Если вы не понимаете тему, всегда можно получить помощь в обсуждениях.
На этом теоретическом занятии вы ознакомитесь с программой курса и и обзором функционала Bootstrap. Вы узнаете, как он появился и зачем его использовать.
Вам расскажут о преимуществах и недостатках Bootstrap. Вы поймете, почему этот фреймворк стал таким популярным, в каких областях его применяют и чем он отличается от других.
На этом занятии вы узнаете, как происходит подключение фреймворка к веб-странице. Познакомитесь с разными способами и инструментами, которые вам в этом помогут.
На этом уроке вы получите базовые знания о концепции сеток, применяемых в Bootstrap. Поймете, какие виды контейнеров существуют в этом фреймворке.
Вы узнаете, как в Bootstrap реализована настрйока адаптивности под разные устройства и экраны. Научитесь адаптировать сетку самостоятельно.
Вы изучите функции фреймворка, которые применяются для работы с текстами.
Познакомитесь с RFS и узнаете, как вносить изменения в базовые шрифты проекта.
Вы получите навыки работы с таблицами в Bootstrap и узнаете больше об их доступности. Выполните упражнение на тренажере, которое поможет закрепить полученные навыки.
На этом занятии вы познакомитесь с компонентами фреймворка Bootstrap. Поймете, по каким принципам они работают и где вы сможете их применить.
Это практическое занятие. На нем вы самостоятельно потренируетесь в разработке и создадите компонент цитат, используя функционал Bootstrap.
Вы поймете, что такое утилиты и зачем они нужны. Используя стандартный функционал фреймворка Bootstrap, создадите собственные утилиты.
Вы получите несколько заданий, которые помогут вам узнать больше о функциях Bootstrap и научиться с ними работать. Вы закрепите полученную на курсе теорию.
Команда Хекслета подобрала материалы, которые помогут углубить свои знания после обучения и продолжить дальше развиваться самостоятельно.
Как проходит обучение
Изучение темы
Просмотр обучающих видеороликов
Выполнение практических заданий
Делаете все тогда, когда вам это удобно и в подходящем вам темпе
Помощь с трудоустройством
Спецификация
Университет
Hexlet222 отзыва
Формат обучения
Онлайн
Доступ к курсу
Навсегда
Кому подойдёт
Верстальщик
Направление
Программирование
Инструменты
Bootstrap
Навыки
Применение сетевых утилит
Уровень
Junior
Middle
Помощь в трудоустройстве
Да
Зарплаты Junior — Senior
30 000 ₽ — 120 000 ₽
Финальная цена
3 900 ₽
Часто задаваемые вопросы
Обучение организовано так, что вы можете спокойно совмещать его с работой, учебой и личной жизнью.
Именно вы решаете, когда работать с материалами курса — вы занимаетесь тогда, когда удобно вам. Все уроки курса будут всегда в вашем доступе, даже после окончания курса, поэтому вы в любой момент сможете повторить пройденный материал.
Другие популярные курсы
Bootstrap 5 Tutorial
❮ Главная Далее ❯
Попробуйте сами Примеры
Это руководство содержит сотни примеров Bootstrap 5.
С помощью нашего онлайн-редактора вы можете отредактировать код и нажать кнопку, чтобы просмотреть результат.
Начальная загрузка 5 Пример
Попробуйте сами »Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.
Bootstrap 5 против Bootstrap 3 и 4
Bootstrap 5 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.
Bootstrap 5 поддерживает последние стабильные версии всех основных браузеров и
платформы. Однако Internet Explorer 11 и более ранние версии не поддерживаются.
Основное различие между Bootstrap 5 и Bootstrap 3 и 4 заключается в том, что Bootstrap 5 переключился на JavaScript вместо jQuery.
Примечание. Bootstrap 3 и Bootstrap 4 по-прежнему поддерживаются командой для исправления критических ошибок и изменений в документации, и совершенно безопасно продолжать их использовать. Однако новые функции НЕ будут добавлены в их.
Bootstrap 5 Упражнения
Проверьте себя с помощью упражнений
Упражнение:
Используйте класс Bootstrap для центрирования следующего текста:
Привет, мир!
Начать упражнение
Викторина Bootstrap 5
Проверьте свои навыки работы с Bootstrap 5 в W3Schools!
Начать викторину Bootstrap 5!
Мое обучение
Отслеживайте свои успехи с помощью бесплатной программы «Мое обучение» здесь, в W3Schools.
Войдите в свою учетную запись и начните зарабатывать очки!
Это дополнительная функция.
Вы можете учиться в W3Schools без использования My Learning.
❮ Дом
w3schools.com
Далее ❯
Начало работы с BS5
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Лучшие ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
7 Top0 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения.
Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Таблицы начальной загрузки
❮ Предыдущая Далее ❯
Базовая таблица Bootstrap
Базовая таблица Bootstrap имеет легкие отступы и только горизонтальные разделители.
Класс .table добавляет к таблице основные стили:
Пример
| Имя | Фамилия | Электронная почта |
|---|---|---|
| Джон | Доу | [email protected] |
| Мэри | Мо | [email protected] |
| июль | Дули | july@example. com |
Попробуйте сами »
Striped Rows
Класс .table-striped добавляет к таблице полоски зебры:
Попробуйте сами »
Таблица с рамкой
Класс .table-bordered добавляет границы со всех сторон таблицы и ячеек:
Пример
| Имя | Фамилия | Электронная почта |
|---|---|---|
| Джон | Доу | [email protected] |
| Мэри | Мо | mary@example. com |
| июль | Дули | [email protected] |
Попробуйте сами »
Hover Rows
The Класс .table-hover добавляет эффект наведения (серый цвет фона) на строки таблицы:
Пример
| Имя | Фамилия | Электронная почта |
|---|---|---|
| Джон | Доу | [email protected] |
| Мэри | Мо | [email protected] |
| июль | Дули | [email protected] |
Попробуйте сами »
Сжатая таблица
Класс .table-сжатый делает таблицу более компактной за счет сокращения заполнения ячеек пополам:
0150
comПопробуйте сами. 02
| Имя | Фамилия | Электронная почта |
|---|---|---|
| По умолчанию | Дефолтсон | [email protected] |
| Успех | Доу | [email protected] |
| Опасность | Мо | [email protected] |
| Информация | Дули | [email protected] |
| Предупреждение | № по каталогу | [email protected] |
| Активный | Активсон | [email protected] |
Попробуйте сами »
Можно использовать следующие контекстные классы:
| Класс | Описание |
|---|---|
. | Применяет цвет при наведении к строке или ячейке таблицы |
.успех | Указывает на успешное или положительное действие |
.info | Указывает на нейтральное информативное изменение или действие |
.предупреждение | Указывает на предупреждение, которое может потребовать внимания |
.опасность | Указывает на опасное или потенциально негативное действие |
актив Адаптивные таблицы
Класс .table-responsive создает адаптивную таблицу. Затем таблица будет
горизонтальная прокрутка на небольших устройствах (менее 768 пикселей). При просмотре на чем угодно
больше 768 пикселей в ширину, разницы нет:
Пример
Попробуйте сами »
Проверьте себя с помощью упражнений
Упражнение:
Добавьте атрибут класса, чтобы оформить таблицу как базовую таблицу Bootstrap.
<таблица>Джон Доу [email protected] Мэри Мо [email protected] <таблица> Июль Дули [email protected]
Начать упражнение
Полный справочник по таблицам начальной загрузки
Полный справочник по всем классам таблиц см. в нашем полном Справочник по таблицам начальной загрузки.
❮ Предыдущий Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Основные ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.
