Бутстрап 4 — уроки адаптивной верстки Bootstrap 4, обучение на itProger
При помощи Bootstrap можно быстро добавлять готовые стили к веб проектам. В курсе мы научимся работать с Бутстрап на практике и познакомимся с разработкой красивых веб сайтов на основе фреймворка. Мы создадим полноценный сайт с использованием как готовых стилей, так и с написанием своих стилей на CSS.
Полезные ссылки:
- Курс по Bootstrap;
- Официальный сайт Bootstrap.
Информация про Bootstrap
Bootstrap изначально разрабатывался для популярнейшей соцсети Twitter, но его роль выходит далеко за пределы одного сервиса. Сегодня является одним из самых используемых и эффективных модулей CSS. Данный фреймворк включает и другие широко известные языки – HTML и Javascript.
Посредством Bootstrap можно легко создать первоклассный веб-сайт, который сможет легко подстраиваться под различные размеры экрана. В библиотеке представлено обилие гибких шаблонов, помогающих создавать самые разнообразные визуальные эффекты.
Что такое Bootstrap 4?
Bootstrap 4 — это новая и наиболее актуальная версия фреймворка. Бутстрап часто обновляется и с каждой новой версией добавляются новые функции и возможности в фреймворк.
В 4 версии была добавлена поддержка технологии FlexBox, а также поддержка системы CSS сеток.
Ознакомиться с технологией FlexBox можно из видео ниже:
Как работать с Bootstrap?
Принцип работы с Bootstrap прост. Вам предстоит:
- скачать или подключить Bootstrap при помощи CDN;
- выполнить верстку сайта с помощью Bootstrap, используя подготовленные стили.
Верстка сайта на Bootstrap легкая даже для новичков в сфере веб разработки. Понять как работать с бутстрап и освоить Bootstrap основы можно в течении пары часов. Далее вы сможете проектировать сайты на бутстрап, делая их адаптивными, отзывчивыми и красивыми.
Версии Bootstrap
На сегодняшний день существует несколько основных версий Bootstrap. Последние крупные обновления это:
- Bootstrap 3 – добавлены классы для работы со множеством HTML5 объектов;
- Bootstrap 4 – представлена возможность строить адаптивную верстку Bootstrap на основе FlexBox;
- Bootstrap 5 – улучшены и добавлены стили к HTML объектам. Уменьшен код, увеличина производительность.
План курса
В курсе мы на практике ознакомимся с разработкой веб сайтов на Bootstrap (Бутстрап 4). Мы создадим веб сайт при помощи встроенных классов Bootstrap, а также добавим свои собственные стили, написанные на языке CSS.
По итогу мы реализуем современный веб сайт, который будет обладать красивым и адаптивным дизайном.
Перед началом курса вам стоит изучить такие технологии, как: HTML, CSS и Bootstrap. Если что-то из этого списка вы не знаете, то можете просмотреть соответсвующие курсы на нашем сайте.
Bootstrap Бутстрап 4 Учебник Справочник на русском примеры
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮ Главная Дальше ❯
Попробуйте примеры
Этот учебник Bootstrap 4 содержит сотни примеров Bootstrap 4.
С помощью нашего онлайн-редактора вы можете отредактировать код и нажать на кнопку для просмотра результата.
Пример Bootstrap 4
<div>
<h2>Моя первая Bootstrap страница</h2>
<p>Измените размер этой адаптивной страницы, чтобы увидеть эффект!</p>
</div>
<div>
<div>
<div>
<h4>Колонка 1</h4>
<p>Просто текст
..</p>
<p>Новый текст..</p>
</div>
<div>
<h4>Колонка 2</h4>
<p>Просто текст
..</p>
<p>Новый текст..</p>
</div>
<div>
<h4>Колонка 3</h4>
<p>Просто текст
..</p>
<p>Новый текст..</p>
</div>
</div>
</div>
Нажмите на «Просмотр демо в редакторе» кнопку, чтобы увидеть, как работает.
Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицы стилей и большей отзывчивостью.
Bootstrap 4 поддерживает новейшие, стабильные выпуски всех основных браузеров и платформ. Тем не менее Internet Explorer 9 и вниз не поддерживается.
Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.
Базовый шаблон Bootstrap 4
Мы создали адаптивный начальный шаблон с Bootstrap 4. Вы можете изменять, сохранять, делиться и использовать его в своих проектах:
Ссылки Bootstrap
Полный список всех классов Bootstrap 4 CSS с описанием и примерами:
- Bootstrap все классы CSS Популярные
Если вы хотите сделать больше с компонентами Bootstrap, смотрите наш полный Bootstrap 4 с JavaScript все примеры:
- Bootstrap JS Alert
- Кнопка Bootstrap JS
- Bootstrap JS Карусель
- Bootstrap JS коллапс
- Выпадающее меню Bootstrap JS
- Bootstrap JS модальный
- Bootstrap JS Попов
- Bootstrap JS скроллспи
- Вкладка Bootstrap JS
- Подсказка Bootstrap JS
❮ Главная Дальше ❯
bootstrap 4 популярное
bootstrap сетка
bootstrap меню
bootstrap modal модальное окно
блоки bootstrap
bootstrap скачать бесплатно
bootstrap кнопки
bootstrap формы
bootstrap таблицы
bootstrap примеры
Copyright 2018-2020 HTML5CSS.

Правила и Условия Политика конфиденциальности О нас Контакты
Bootstrap 4 Tutorial
❮ Главная Далее ❯
Попробуйте сами Примеры
Это руководство по Bootstrap 4 содержит сотни примеров Bootstrap 4.
С помощью нашего онлайн-редактора вы можете отредактировать код и нажать кнопку, чтобы просмотреть результат.
Начальная загрузка 4 Пример
Мой первый бутстрап Страница
Измените размер этой адаптивной страницы, чтобы увидеть эффект!
Столбец 1
Lorem ipsum dolor..
Столбец 2
Lorem ipsum dolor..
Столбец 3
Lorem ipsum грусть..
Попробуйте сами »
Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.
Bootstrap 5 против Bootstrap 3 и 4
Это руководство следует за Bootstrap 4 , выпущенным в 2018 году в качестве обновления на Bootstrap 3, с новыми компонентами, быстрее таблица стилейc, большая отзывчивость и т. д.
Bootstrap 5 (выпущен в 2021 г.) — новейшая версия Bootstrap; Он поддерживает последние стабильные версии всех основных браузеров и платформы. Однако Internet Explorer 11 и более ранние версии не поддерживаются.
Основное различие между Bootstrap 5 и Bootstrap 3 и 4 заключается в том, что Bootstrap 5 переключился на JavaScript вместо jQuery.
Примечание. Bootstrap 3 и Bootstrap 4 по-прежнему поддерживаются командой для исправления критических ошибок и изменений в документации, и совершенно безопасно продолжать их использовать. Однако новые функции НЕ будут добавлены в их.
Базовый шаблон Bootstrap 4
Мы создали адаптивный начальный шаблон с помощью Bootstrap 4. Вы можете изменять, сохранять, делиться и использовать его в своих проектах:
Демонстрация
Попробуйте сами
Мое обучение
Отслеживайте свои успехи с помощью бесплатной программы «Мое обучение» здесь, в W3Schools.
Войдите в свою учетную запись и начните зарабатывать баллы!
Это дополнительная функция. Вы можете учиться в W3Schools без использования My Learning.
Bootstrap References
Полный список всех CSS-классов Bootstrap 4 с описанием и примерами:
Bootstrap All CSS Classes Popular
Если вы хотите сделать больше с компонентами Bootstrap, см. наш полный справочник по Bootstrap 4 JavaScript/jQuery — все с примерами «Попробуйте сами»:
Bootstrap JS Alert Кнопка Bootstrap JS Карусель Bootstrap JS Свернуть Bootstrap JS Выпадающий список Bootstrap JS Bootstrap JS модальный Всплывающее окно Bootstrap JS Bootstrap JS Scrollspy Вкладка Bootstrap JS Тосты Bootstrap JS Bootstrap JS Tooltip
Bootstrap 4 упражнения
Проверьте себя с помощью упражнений
Упражнение:
Используйте класс Bootstrap для центрирования следующего текста:
Привет, мир!
Начать упражнение
Викторина по Bootstrap 4
Проверьте свои навыки работы с Bootstrap 4 в W3Schools!
Начать викторину Bootstrap 4!
❮ Главная Следующая ❯
Bootstrap 4 Утилиты
❮ Предыдущая Далее ❯
Утилиты Bootstrap 4
В Bootstrap 4 есть множество служебных/вспомогательных классов для быстрого оформления элементов без использования кода CSS.
Границы
Используйте классы border
для добавления или удаления границ элемента: диапазон>
<диапазон>
<диапазон
>
Попробуйте сами »
Цвет границы
Добавьте цвет к границе с любым из контекстных классов цвета границы:
Пример
Пример
Попробуйте сами »
Rad Borderius
Добавьте закругленные углы к элементу с помощью округленные
классы:
Пример
Пример
Попробуйте сами »
Float и Clearfix
Плавающий элемент справа с классом .
или слева с float-right
.float-left
и очистить плавающие значения с классом .clearfix
:
Пример
Плавающее левое Плавающая справа
Пример
Плавающая влево
Float right
Попробуйте сами »
Responsive Floats
Плавающий элемент слева или справа, в зависимости от ширины экрана, с адаптивными классами float ( .float-*-left|right
— где * sm
(>=576px), md
(>=768px), lg
(>=992px) или xl
(>=1200px)) :
Пример
Плавающее вправо на маленьких экранах или шире
Плавающее вправо на средних экранах или шире
Плавающее вправо на больших экранах или шире
Плавающее вправо на очень больших экранах или шире
Пример
Нет
Center Align
Центрирование элемента с классом .
(добавляет margin-left и поле справа: авто): mx-auto
Пример
По центру
Пример
Попробуйте сами »
Ширина
Установите ширину элемента с помощью классов w-* ( .w-25
, ,
50 , .W-75
, .W-100
, . МВт-100
):
Пример
Ширина 25%
Шид 50%
Width 75%
Width 100%
Width 75%
Width 100%
WIDST 75% 9000
%
2002 WIDTH 100%
29292
. Макс. ширина 100%
Пример
<дел>Ширина 50%
Попробуйте сами »
Высота
Установите высоту элемента с помощью классов h-* ( .
, h- 25
.H-50
, .H-75
, .H-100
, .MH-100
):
Пример
Высота 25%
Высота 50%
высота 75%
.
Высота 100 %
Макс. высота 100 %
Пример
Попробуйте сами »
Spacing
Bootstrap 4 имеет широкий спектр служебных классов отзывчивых полей и отступов.
Они работают для всех точек останова:
(<=576px), sm
(>=576px), md
(>=768px), lg
(>=992px) или xl
(>=1200px)):
Классы используются в формате: {property}{sides}-{size}
для xs
и {property}{sides}-{breakpoint}-{size}
для sm
, md
, lg
и xl
.
Где свойство одно из:
-
м
— устанавливаетполя
-
p
— наборынабивка
Где стороны одно из:
-
t
— комплектыmargin-top
илиpadding-top
-
b
— комплектыmargin-bottom
илиpadding-bottom
-
l
— наборыполе слева
илиотступ слева
-
r
— устанавливаетmargin-right
илиpadding-right
-
x
— устанавливает оба параметраpadding-left
иpadding-right
илиmargin-left
иmargin-right
-
y
— устанавливает обаpadding-top
иpadding-bottom
илиmargin-top
иmargin-bottom
- пробел — задает
поле
илиотступ
на всех 4 сторонах элемента
Где размер является одним из:
-
0
— устанавливаетполя
илиотступы от
до0
-
1
— устанавливаетmargin
илиpadding
на.
(4px, если размер шрифта равен 16px)25rem
-
2
— устанавливаетmargin
илиpadding
на.5rem
(8px, если размер шрифта равен 16px) -
3
— устанавливаетполя
илиотступы
до1rem
(16px, если размер шрифта равен 16px) -
4
— устанавливаетполя
илиотступы
до1.5rem
(24px, если размер шрифта равен 16px) -
5
— устанавливаетполя
илиотступы
на3rem
(48 пикселей, если размер шрифта равен 16 пикселей) -
auto
— устанавливаетполе
на auto
Примечание: поля также могут быть отрицательными, если добавить «n» перед размером :
-
n1
— наборыполе от
до-.25rem
(-4px, если размер шрифта равен 16px) -
n2
— устанавливаетполя
на-.
(-8px, если размер шрифта равен 16px)5rem
-
n3
— устанавливаетполя
на-1rem
(-16px, если размер шрифта равен 16px) -
n4
— устанавливаетполя
на-1,5rem
(-24px, если размер шрифта равен 16px) -
n5
— устанавливаетmargin
на-3rem
(-48px, если размер шрифта равен 16px)
Пример
У меня есть только верхний отступ (1.5rem = 24px)
У меня есть отступ со всех сторон (3rem = 48px)
У меня есть отступ со всех сторон (3rem = 48px) и нижний отступ ( 3rem = 48px)
Пример
Попробуйте сами »
Другие примеры пробелов
. | поле со всех сторон | Попытайся |
.mt-# / mt-*-# | верхняя граница | Попытайся |
.mb-# / mb-*-# | нижняя граница | Попытайся |
.мл-# / мл-*-# | поле осталось | Попытайся |
.г-# / г-*-# | край справа | Попытайся |
.mx-# / mx-*-# | поле слева и справа | Попытайся |
.my-# / my-*-# | поле сверху и снизу | Попытайся |
.p-# / p-*-# | набивка со всех сторон | Попытайся |
. | верхняя часть обивки | Попытайся |
.pb-# / pb-*-# | набивка снизу | Попытайся |
.pl-# / pl-*-# | прокладка левая | Попытайся |
.pr-# / pr-*-# | прокладка правая | Попытайся |
.py-# / py-*-# | набивка сверху и снизу | Попытайся |
.px-# / px-*-# | прокладка слева и справа | Попытайся |
Shadows
Используйте классы Shadow-
, чтобы добавить тени к элементу:
Пример
Нет Shadow
Small Shadow
Shadow
Большая тень
Пример
.
<дел
>Маленький
тень
Попробуйте сами »
Выравнивание по вертикали
Используйте классы align-
для изменения выравнивания элементов (работает только для встроенных элементов, встроенных блоков, встроенных элементов таблицы и ячеек таблицы):
Пример
baseline Топ середина нижний текст сверху text-bottom
Пример
базовый уровень
верхний
средний
нижний
текст-верхний
<диапазон
>text-bottom
Попробуйте сами »
Адаптивные вставки
Создавайте адаптивные встраивания видео или слайд-шоу на основе ширины родителя.
Добавьте элемент .embed-responsive-item
к любым встроенным элементам (например,
Пример
Пример
Попробуйте сами »
Видимость
Используйте классы .visible
или .invisible
для управления видимостью элементов. Примечание: Эти классы не изменяют отображаемое значение CSS. Они добавляют только видимость:видимая
или видимость:скрытая
:
Пример
Я видим
Я невидим
Пример
Попробуйте сами »
Position
Используйте класс .
, чтобы сделать любой элемент фиксированным/оставаться на верх страницы: fixed-top
Пример
Попробуйте сами »
Используйте класс .fixed-bottom
, чтобы сделать любой элемент фиксированным/оставаться на низ стр.:
Пример
<навигация>
…
Попробуйте сами »
Используйте класс .sticky-top
, чтобы сделать любой элемент фиксированным/оставаться на верхних страницы, когда вы прокручиваете ее. Примечание: Этот класс не работает в IE11 и более ранних версиях (он будет рассматриваться как position:relative
).
Пример
Попробуйте сами »
Значок закрытия
Используйте кнопку .close
класс для стилизации значка закрытия. Это часто используется для предупреждений и модальных окон. Обратите внимание, что мы используем
×
, чтобы создать настоящий значок (лучше выглядящий
«Икс»). Также обратите внимание, что по умолчанию он перемещается вправо:
Пример
Пример
Попробуйте сами » только класс для скрытия элемента на всех устройствах, кроме программ чтения с экрана:
Пример
Я буду скрыт на всех экранах, кроме screen
Попробуйте сами »
Цвета
Как описано в главе «Цвета», вот список всех классов цвета текста и фона:
Классы для цветов текста: .text- приглушенный
, .text-primary
, .text-success
, .text-info
, .text-warning
, .text-danger
, .text-secondary
, .text-white
, .
, text-dark
.text-body
(цвет тела по умолчанию/часто черный) и .text-light
:
Пример
Этот текст отключен.
Этот текст важен.
Этот текст указывает на успех.
Этот текст содержит некоторую информацию.
Этот текст представляет собой предупреждение.
Этот текст представляет опасность.
Вторичный текст.
Темно-серый текст.
Основной текст.
Светло-серый текст.
Попробуйте сами »
Классы контекстного текста также можно использовать для ссылок, которые добавят более темный цвет при наведении:
Пример
Ссылка без звука. Основная ссылка. Ссылка на успех. Информационная ссылка. Предупреждающая ссылка. Ссылка на опасность. Вторичная ссылка. Темно-серая ссылка. Тело/черная ссылка. Светло-серая ссылка.
Попробуйте сами »
Вы также можете добавить 50% непрозрачности для черного или белого текста с помощью .
или text-black-50
.text-white-50
классы:
Пример
Черный текст с непрозрачностью 50% на белом фоне
Белый текст с непрозрачностью 50% на черном фоне
Попробуйте сами »
Цвета фона
6 классов
для фоновых цветов:
.bg-primary
, .bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
и.0123 .
Обратите внимание, что цвета фона не задают цвет текста, поэтому в некоторых случаях вы захотите использовать их вместе с классом .text-*
.
Пример
Этот текст важен.
Этот текст указывает на успех.
Этот текст содержит некоторую информацию.
Этот текст представляет собой предупреждение.
Этот текст представляет опасность.
Дополнительный цвет фона.
Темно-серый цвет фона.
Светло-серый цвет фона.
Попробуйте сами »
Классы типографики/текста
Как описано в главе Типографика, вот список всех классов типографики/текста:
Класс | Описание | Пример |
---|---|---|
.дисплей-* | Отображаемые заголовки используются, чтобы выделяться больше, чем обычные заголовки (крупный размер шрифта и более легкий шрифт), и на выбор есть четыре класса: .display-1 , . дисплей-2 , . дисплей-3 , . дисплей-4 | Попробуйте |
.шрифт-жирный | Жирный текст | Попробуйте |
.font-weight-bolder | Более жирный текст | Попробуйте |
.шрифт-обычный | Обычный текст | Попробуйте |
. | Облегченный текст | Попробуйте |
.шрифт-светлее | Облегченный текст | Попробуйте |
.шрифт-курсив | Курсив | Попробуйте |
.свинец | Выделяет абзац | Попробуйте |
.маленький | Указывает меньший текст (установлен на 85% от размера родителя) | Попробуйте |
.text-break | Предотвращает нарушение макета длинного текста | Попробуйте |
.text-центр | Указывает, что текст выровнен по центру | Попробуйте |
.text-decoration-none | Удаляет подчеркивание ссылки | Попробуйте |
. | Указывает, что текст выровнен по левому краю | Попробуйте |
.text-выравнивание | Указывает выравнивание текста по ширине | Попробуйте |
.text-monospace | Моноширинный текст | Попробуйте |
.text-nowrap | Указывает на отсутствие переноса текста | Попробуйте |
.текст-нижний регистр | Обозначает текст в нижнем регистре | Попробуйте |
.текст-сброс | Сбрасывает цвет текста или ссылки (наследует цвет от родителя) | Попробуйте |
.текст справа | Указывает, что текст выровнен по правому краю | Попробуйте |
.text-uppercase | Обозначает текст в верхнем регистре | Попробуйте |
. | Обозначает текст с заглавной буквы | Попробуйте |
.инициализм | Отображает текст внутри элемента шрифтом немного меньшего размера | Попробуйте |
.list без стилей | Удаляет стиль списка по умолчанию и левое поле для элементов списка (работает как для , так и для ). Этот класс применяется только к непосредственным дочерним элементам списка (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс также к любым вложенным спискам) | Попробуйте |
.list-inline | Помещает все элементы списка в одну строку (используется вместе с .list-inline-item для каждого элемента | Попробуйте |
.pre-scrollable | Делает элемент прокручиваемым | Попробуйте |
Блочные элементы
Чтобы превратить элемент в блочный, добавьте .
класс. Используйте любой из классов д-блок
d-*-block
для управления КОГДА элемент должен быть блочным на определенной ширине экрана:
Пример
d-block d-sm-блок d-md-блок d-lg-блок d-xl-block
Пример
d-block
d-sm-block
d-md-block
d-lg-блок
d-xl-блок
Попробуйте сами »
Другие классы дисплеев
Также доступны другие классы дисплеев:
Класс | Описание | Пример |
---|---|---|
.d-нет | Скрывает элемент | Попробуйте |
.d-*-нет | Скрывает элемент на экране определенного размера | Попробуйте |
.d-встроенный | Делает элемент встроенным | Попробуйте |
. | Делает элемент встроенным на экране определенного размера | Попробуйте |
.d-встроенный блок | Делает элемент встроенным блоком | Попробуйте |
.d-*-встроенный блок | Создает встроенный блок элемента на экране определенного размера | Попробуйте |
.d-таблица | Отображает элемент в виде таблицы | Попробуйте |
.d-*-таблица | Позволяет отображать элемент в виде таблицы на экране определенного размера | Попробуйте |
.d-таблица-ячейка | Отображает элемент как ячейку таблицы | Попробуйте |
.d-*-таблица-ячейка | Отображает элемент как ячейку таблицы на экране определенного размера | Попробуйте |
. | Отображает элемент в виде строки таблицы | Попробуйте |
.d-*-таблица-строка | Отображает элемент в виде строки таблицы на экране определенного размера | Попробуйте |
.d-flex | Создает контейнер flexbox и преобразует прямые дочерние элементы в flex-элементы | Попробуйте |
.d-*-flex | Создает контейнер flexbox на экране определенного размера | Попробуйте |
.d-inline-flex | Создает встроенный контейнер flexbox | Попробуйте |
.d-*-inline-flex | Создает встроенный контейнер flexbox на экране определенного размера | Попробуйте |
Flex
Используйте классы .flex-*
для управления макетом с помощью flexbox.