Есть ли встроенный горизонтальный разделитель в Bootstrap 4?

Быстрый ответ

Для того чтобы использовать встроенный горизонтальный разделитель в Bootstrap 4, достаточно вставить тег <hr> и применить к нему классы для настройки отступов, такие как .my-*. Вот пример кода с вертикальными отступами:

<!-- Добавление двусторонних отступов к горизонтальной линии -->
<hr class="my-3">

Класс my-3 задает одинаковый средний отступ с верху и снизу для элемента <hr>, благодаря чему получается стандартный горизонтальный разделитель в Bootstrap 4.

Возвращение к основам: разделители в Bootstrap

Давайте более подробно рассмотрим работу Bootstrap 4 с простым тегом <hr> и изучим его встроенные стилевые возможности. Понимание основных настроек поможет вам более эффективно стилизовать разделители.

Стили по умолчанию

В Bootstrap 4 тег <hr> меняет свое обычное назначение на элемент с заданными стилями, включая отступы и настройки границы.

Подробнее об этом расскажет наш спикер на видео

Волшебство padding и margin

Не ограничивайте стилизацию только стандартными настройками. Bootstrap 4 предлагает вспомогательные классы для учета отступов. Для настройки отступа сверху или снизу используются классы .mt-* и .mb-* соответственно. Для симметричных отступов — класс .my-*.

Настройка разделителей с помощью чистого CSS

Оберните <hr> в div и воспользуйтесь классами Bootstrap .bg-* и .py-* для создания особенных эффектов:

<!-- Создание визуально более толстого разделителя с использованием div -->
<div class="py-2 bg-light">
  <hr class="my-0">
</div>

Благодаря таким настройкам линии присвоится светлый фон, что сделает разделитель более заметным.

А как насчет разделителей в меню и контекстном позиционировании?

Разделители в меню

В выпадающих меню Bootstrap использует класс .dropdown-divider для создания разделительных линий между пунктами списка.

Разделение и контроль над элементами

Для вставки текстовых разделителей между крупными блоками информации, Bootstrap предлагает использовать классы .row, .col и .col-auto, которые помогают поддерживать адаптивность и контролировать пространство между элементами.

Визуализация

Вот визуальное представление расположения контента в Bootstrap 4:

🛣️🚗🚕🚙🚗🚕🚙🚗🚕🚙 Дорога Bootstrap

Теперь добавим главный элемент нашей темы – <hr>:

🛣️🚗🚕🚙 --🚧 Разделитель Криштиану 🚧-- 🚗🚕🚙🛣️

Теперь создадим наш собственный разделитель:

<!-- Не Криштиану Роналду, а div, способный выполнить любую работу -->
<div class="my-horizontal-divider"></div>

Пример использования CSS для стилизации:

/* Простая дорожная разметка – примечательно отсутствующая, это всего лишь линия */

.my-horizontal-divider {
  height: 1px;
  background: gray;
  margin: 8px 0;
}

Мы создали свой собственный разделитель — "div"айдер, способный структурировать контент, так как Криштиану управляет игрой.

Исследование адаптивных и функциональных разделителей

Разделитель — не только декор

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

Адаптивность — наше всё

Горизонтальные разделители в Bootstrap, как и все другие его элементы, должны быть адаптивными. Благодаря вспомогательным классам Bootstrap, разделители корректно отображаются на всех разрешениях экрана.

Полезные материалы

1. Отступы в Bootstrap — руководство по настройке отступов в Bootstrap 4.
2. <hr>: Горизонтальное правило (Thematic Break) элемент – HTML: Язык Гипертекстовой Разметки | MDN – подробное описание тега <hr>.
3. Разделители в Bootstrap – HTML & CSS шаблон — различные пользовательские стили для <hr> в Bootstrap.
4. Вспомогательные классы в Bootstrap 4 — обзор вспомогательных классов в Bootstrap 4.
5. Полное руководство по элементу таблицы | CSS-Tricks — обширное руководство по HTML-таблицам, включая горизонтальные разделители.
6. Простые стили для <hr>' — простые и элегантные дизайны для <hr>.
7. Шпаргалка по классам Bootstrap 4 — шпаргалка по классам Bootstrap 4 для ускоренного поиска.